Cuốn sách của Micah Godbolt là một lập luận ngắn đi kèm một case study dài. Lập luận là: frontend của một site lớn cũng xứng đáng có kiến trúc được thiết kế từ đầu như backend, tức là có một người quyết định sớm markup được tạo ra thế nào, CSS được viết ra sao, code đi tới production bằng cách nào, regression được phát hiện ra sao và kiến thức được ghi lại ở đâu. Ông sắp xếp các quyết định đó thành bốn pillar (trụ cột): code, process, testing và documentation, rồi minh hoạ từng pillar bằng những gì team ông đã xây dựng cho website Red Hat.
Sách ra năm 2016, và điều đó lộ rõ. Các ví dụ dùng Sass, Grunt, Twig, Hologram, Pattern Lab và PhantomCSS. Tuy vậy, những câu hỏi sách đặt ra vẫn là những câu hỏi mà mọi team design system còn tranh luận: ai sở hữu các variation của một component, vì sao CSS phụ thuộc vào vị trí cứ liên tục hỏng, làm sao để prototype và sản phẩm không bị lệch nhau, và làm sao biết commit hôm nay không làm thay đổi cái button của tháng trước.
Điều khiến mình thấy sách đáng đọc là nó coi design system như một sản phẩm mà người dùng là developer. Cách nhìn đó phù hợp với bất kỳ ai bảo trì component dùng chung, kể cả trong một monorepo như cái mình đang vận hành: các quy ước, phần build và tài liệu chính là sản phẩm bàn giao, không phải chi phí phụ bao quanh nó.
Sách dành cho ai
- Frontend developer đã bắt đầu bảo trì component dùng chung, một UI library hoặc một design system và muốn thấy bức tranh lớn hơn framework mình đang dùng.
- Tech lead và architect cần ngôn từ để thuyết phục việc frontend tham gia sớm, có quy ước được viết ra và có test coverage cho UI.
- Manager có hiểu biết kỹ thuật muốn hiểu vì sao công việc design system tốn thời gian lúc đầu và trả lại về sau. Sách được viết một phần cho nhóm độc giả này.
Đây không phải sách hướng dẫn CSS, sách về React hay sách hướng dẫn testing. Nếu bạn cần hướng dẫn từng bước cho một tool, tài liệu hiện hành sẽ giúp bạn tốt hơn.
Đọc thế nào cho hiệu quả
Sách dài khoảng 200 trang và đọc nhanh. Mình sẽ chia thành bốn lần đọc.
- Chương 1 đến 3 và 4 đến 5 (bắt buộc). Định nghĩa vai trò, bốn pillar, các nguyên tắc về markup và CSS. Đọc kỹ; mọi thứ phía sau đều dựa vào chúng.
- Chương 7 (bắt buộc). Các quy tắc code của Red Hat: layout và component, selector chỉ một class, modifier opt-in và context qua data attribute. Đây là chương thực tế nhất của sách.
- Chương 8, 10, 11 đến 13 (đọc để lấy ý tưởng). Workflow, schema-driven design system, unit test, performance budget và visual regression. Chương 10 đáng đọc chậm.
- Chương 15 đến 17 (đọc để theo câu chuyện). Các tool documentation đã cũ, nhưng năm giai đoạn của hệ thống Red Hat trong chương 17 là phần hay nhất của nửa sau.
Đọc lướt chương 6 (JavaScript, ví dụ thời jQuery), chương 9 (Grunt so với Gulp) và phần code thiết lập trong chương 12, 14 và 15. Đọc phần lập luận, bỏ qua phần cấu hình.
Để thực hành, hãy chọn một component trong codebase của bạn và đưa nó đi qua cả bốn pillar: viết lại style với một class cho mỗi element và variant bằng data attribute, cho nó một contract có type, thêm một visual test cho mỗi variant, và viết một story cho mỗi trạng thái.
Năm 2026 còn nên đọc không?
Có, nhưng cần chọn lọc. Hiện vẫn chỉ có bản first edition năm 2016, và mình không tìm thấy edition mới hơn hay bản miễn phí chính thức nào. Khoảng một nửa tooling cụ thể đã được thay thế:
| Trong sách | Thứ các team thường dùng bây giờ |
|---|---|
| Grunt, Gulp, Compass | Package scripts, Vite, một monorepo runner như Turborepo |
| Jenkins, Travis CI, Bower | CI dạng hosted như GitHub Actions, npm package từ workspaces |
| BEM và scoping chỉ bằng Sass | Cascade layers, CSS Modules, @scope, design tokens |
| QUnit | Vitest hoặc Jest, với Vitest Browser Mode cho test trên browser thật |
| PhantomCSS, CasperJS | Screenshot assertion của Playwright hoặc Vitest, dịch vụ review dạng hosted |
| Hologram, Pattern Lab | Storybook với autodocs, tài liệu cho token |
| PageSpeed score, Speed Index | Core Web Vitals (LCP, INP, CLS), Lighthouse CI |
Các nguyên tắc bên dưới thì đứng vững rất tốt. Specificity, single ownership (một nơi sở hữu) cho style, variation theo kiểu opt-in, component không quan tâm mình được đặt ở đâu, schema làm contract, budget được thực thi trong CI và tài liệu sinh ra từ code đều là thực hành hiện nay. Một số ý, như component schema-driven và layout dựa trên dữ liệu, có lẽ còn dễ áp dụng hơn bây giờ so với lúc sách được viết.
Hãy đọc kèm Atomic Design của Brad Frost (tác giả cho đọc miễn phí online), tài liệu Storybook, và format ổn định 2025.10 của Design Tokens Community Group.
Guide này gồm những phần nào
- Khởi nguồn và Code pillar: vai trò của architect, bốn pillar, các phương pháp CSS và các quy tắc của Red Hat, đối chiếu với cascade layers, container queries và tokens.
- Process pillar và Testing pillar: story theo hướng component trước, build trong CI, component schema-driven, unit test, performance budget và visual regression, cùng những thứ thay thế tooling hiện nay.
- Documentation pillar: tài liệu tĩnh so với tài liệu sinh từ code, Atomic Design, năm giai đoạn của Red Hat, và cách Storybook cùng việc render theo dữ liệu mang các ý tưởng đó đến hôm nay.
Về ghi chú này
Đây là ghi chú đọc sách cá nhân của mình, viết bằng lời của mình với ví dụ của mình. Chúng nhằm giúp bạn quyết định có nên đọc sách không và đọc được nhiều hơn khi bạn đọc; chúng không phải bản tóm tắt thay thế cho sách. Chi tiết của case study, lập luận đằng sau từng quyết định và rất nhiều phán đoán nhỏ chỉ có trong sách.
Sách có tại O'Reilly.