Giấc mơ CSS Zen Garden cuối cùng đã thành hiện thực trên Firefox.com

Cách đây gần hai thập kỷ, ý tưởng về một trang web mà phần nội dung và phần trình bày hoàn toàn tách rời nhau chỉ bằng CSS thuần đã từng được xem là giấc mơ xa vời. Vậy mà đến nay, giấc mơ ấy đã thành hiện thực trong một dự án đúng nghĩa: tái xây dựng Firefox.com cùng Mozilla và Lincoln Loop.

Từ CSS Zen Garden đến thực tế sản xuất

Năm 2008, khi vừa tốt nghiệp đại học, tác giả bài viết gốc đã phát hiện ra CSS Zen Garden — dự án của Dave Shea, nơi chỉ với một tệp HTML duy nhất, người ta có thể tạo ra vô số giao diện hoàn toàn khác biệt chỉ bằng CSS. Đó là hình ảnh của một giấc mơ: thiết kế sạch sẽ, có thể tái sử dụng, hoàn toàn tách biệt khỏi nội dung.

Nhưng khi bắt tay vào làm sản phẩm thật cho khách hàng, giấc mơ nhanh chóng tan vỡ:

• Không có biến CSS (CSS variables) để quản lý màu sắc, kích thước
• Các thuộc tính hiện có không đủ để thể hiện thiết kế đúng như bản vẽ
• Phải dựa vào xử lý phía máy chủ, hình ảnh, bố cục bằng bảng và vô số thủ thuật
• Mỗi trình duyệt hiển thị một kiểu, nên phần lớn công sức đổ vào việc "chữa cháy" cho từng trình duyệt

CSS Zen Garden cho thấy điều gì là khả thi về mặt lý thuyết. Nhưng môi trường sản xuất lại là một câu chuyện hoàn toàn khác.

Hai thập kỷ để lấp đầy khoảng cách

Khoảng cách giữa lý thuyết và thực tiễn ấy mất gần hai thập kỷ để thu hẹp, và phần lớn tiến bộ đến trong vài năm gần đây:

• Biến tùy chỉnh (custom properties) cho phép trình duyệt hiểu biến một cách gốc rễ
• Grid và Flexbox mang đến khả năng bố cục thuận theo bản chất của nền tảng web
• Những thuộc tính từng thiếu hụt năm 2008 nay đã tồn tại và được triển khai đủ nhất quán để thiết kế dựa trên chúng, thay vì phải lách qua chúng

Điều này đồng nghĩa CSS hiện đại giờ đây làm được một cách tự nhiên những gì trước kia buộc phải nhờ đến bộ tiền xử lý và các thủ thuật.

Firefox.com — nơi giấc mơ thành hiện thực

Trong dự án tái xây dựng Firefox.com, đội ngũ đã xây dựng toàn bộ hệ thống bằng CSS gốc hiện đại, không dùng bộ tiền xử lý. Cụ thể:

• Các biến tùy chỉnh được xuất trực tiếp từ tệp thiết kế
• CSS gốc được viết một lần, không cần thủ thuật
• Hoạt động trên mọi trình duyệt hiện đại, kèm một stylesheet thương hiệu tối giản cho các trình duyệt cũ để đảm bảo khả năng truy cập
• Hệ thống gồm hơn 70 component và 25 mẫu trang, triển khai dưới dạng các component Wagtail để đội nội dung có thể tự lắp ghép trang mà không cần kỹ sư hỗ trợ
• Trang web hiện hỗ trợ 19 ngôn ngữ

Có một "ghi chú trung thực": nhóm vẫn dùng PostCSS trong môi trường sản xuất, nhưng chỉ cho một việc duy nhất — nội tuyến các câu lệnh @import. Điều này là vì @import gốc vẫn có đặc tính hiệu năng tệ ở một số trình duyệt.

Điểm khác biệt quan trọng nằm ở chỗ: mã CSS được viết vẫn là CSS gốc thuần túy. Không có gì trong đó phụ thuộc vào bước build để trở nên hợp lệ hay có nghĩa. Build chỉ đơn thuần gộp những gì mà trình duyệt vốn phải tải tuần tự.

Bài học về "no build step"

Khi ai đó nói với bạn rằng một dự án là "không có bước build", hãy nhớ đến sự phân biệt này. Điều quan trọng là liệu mã nguồn bạn viết có phải là ngôn ngữ mà trình duyệt nói trực tiếp, hay chỉ là một phương ngữ tồn tại cho đến khi được biên dịch.

Với các đội ngũ front-end tại Việt Nam, đây là một góc nhìn đáng cân nhắc. Nhiều dự án trong nước vẫn phụ thuộc khá nặng vào các bộ tiền xử lý như Sass hay Less, và thường mặc định rằng build step là điều kiện tiên quyết. Việc CSS gốc đã đủ mạnh để xây dựng những trang web quy mô lớn, đa ngôn ngữ, đồng nghĩa các đội ngũ có thể giảm đáng kể độ phức tạp của toolchain — từ đó rút ngắn thời gian build, giảm rủi ro lỗi và giúp lập trình viên mới dễ tiếp cận hơn.

Vì sao dự án này có ý nghĩa

Việc giấc mơ CSS Zen Garden cuối cùng được hiện thực hóa trong sản xuất, lại còn làm cùng Mozilla — một trong những tổ chức dẫn đầu về tiêu chuẩn web — mang ý nghĩa đặc biệt. Firefox.com là một trang web nói về trình duyệt, được tạo ra bởi chính tổ chức đã dành 20 năm đấu tranh cho nền tảng được dùng để xây dựng nó. Không có nơi nào phù hợp hơn để kiểm chứng liệu nền tảng web đã thực sự sẵn sàng.

Và câu trả lời là: đã sẵn sàng.

Tác giả ghi nhận công lao của những người đã định hình cách ông tư duy về nghề này: Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly và Eric Meyer. Công việc của họ đã dạy cả một thế hệ nghĩ về CSS như một hệ thống.

Sợi chỉ xuyên suốt mọi công việc của tác giả chính là các design system giúp đội ngũ di chuyển nhanh mà vẫn nhất quán — dù nền tảng là CSS thuần, Tailwind hay shadcn/ui. Công cụ thay đổi vài năm một lần. Điều không thay đổi là giá trị của một hệ thống nơi việc đúng đắn cũng chính là việc dễ làm, và nơi quyết định của nhà thiết kế đi thẳng đến sản phẩm mà không bị dịch qua lại ba lần.