Dự án CSS Zen Garden

 (csszengarden.com)
2 điểm bởi GN⁺ 2025-04-28 | 1 bình luận | Chia sẻ qua WhatsApp
  • CSS Zen Garden là một dự án demo cho thấy cùng một tài liệu HTML có thể mang lại trải nghiệm thị giác hoàn toàn khác chỉ bằng thiết kế dựa trên CSS
  • Khi chọn một stylesheet từ danh sách thiết kế, HTML được giữ nguyên, chỉ CSS bên ngoài thay đổi, khiến cách trang được render khác đi
  • Người tham gia tải HTML/CSS mẫu về và làm việc cục bộ, nhưng khi gửi bài thì chỉ được chỉnh sửa stylesheet
  • File CSS hoàn thiện và các tài nguyên liên quan được tải lên máy chủ web của chính người tham gia rồi gửi dưới dạng liên kết; các tác phẩm được chọn sẽ được triển khai trên máy chủ CSS Zen Garden
  • CSS thực dụng được ưu tiên hơn các tính năng thử nghiệm, yêu cầu CSS có thể kiểm chứng và hoạt động trên IE9+ cùng các trình duyệt Chrome, Firefox, iOS, Android mới nhất

Thử nghiệm CSS khiến cùng một HTML trông hoàn toàn khác

  • CSS Zen Garden là một demo nhằm thể hiện khả năng biểu đạt của CSS
  • Người dùng có thể chọn mục mong muốn từ danh sách thiết kế để áp dụng stylesheet tương ứng cho trang hiện tại
  • Ràng buộc cốt lõi nằm ở việc không thay đổi HTML mà chỉ thay thế file CSS bên ngoài
    • Kết quả thị giác thay đổi trong khi vẫn giữ nguyên cấu trúc tài liệu
    • Cho thấy thiết kế và lập trình có thể mở rộng khả năng thị giác của web đến mức nào
  • Có thể xem đây là một dự án học tập khuyến khích tham gia và truyền cảm hứng, đồng thời chia sẻ các kết quả có thể triển khai thực tế bằng CSS

Cách tham gia và quy trình gửi bài

  • Người tham gia thiết kế lại trang này dựa trên thiết kế thị giác mạnh và năng lực CSS
    • Các file ví dụ có chú thích nên cả người mới học CSS cũng có thể dùng làm điểm xuất phát
    • Các hướng dẫn nâng cao và mẹo được cung cấp trong CSS Resource Guide
  • Có thể tải HTML và CSS mẫu về rồi làm việc trên bản sao cục bộ
  • Để gửi bài, cần tải file CSS hoàn thiện và các tài nguyên liên quan lên máy chủ web do bạn kiểm soát, sau đó gửi qua liên kết nộp bài
    • Không khuyến khích gửi tác phẩm chưa hoàn thiện
    • Các bài được chọn sẽ được phía CSS Zen Garden tải về và triển khai trên máy chủ
  • Phần thưởng khi tham gia là sự công nhận, nguồn cảm hứng và đóng góp vào tài liệu chia sẻ thể hiện khả năng của CSS

Yêu cầu CSS và giấy phép

  • Các yêu cầu tập trung vào CSS có tính chức năng và thực dụng hơn là các tính năng thử nghiệm mới nhất
    • Ưu tiên dùng CSS 1 & 2 ở những nơi có thể
    • CSS 3 & 4 nên được giới hạn ở các thành phần được hỗ trợ rộng rãi hoặc phải cung cấp phương án thay thế chắc chắn
    • CSS phải vượt qua kiểm chứng
    • Khi tính đến các user agent mới nhất và môi trường di động, việc có layout giống hệt đến từng pixel trên mọi nền tảng có thể khó đạt được
    • Thiết kế phải hoạt động tối thiểu trên IE9+, Chrome, Firefox, iOS và Android browser mới nhất
  • Bài gửi phải là tác phẩm nghệ thuật nguyên bản và tôn trọng luật bản quyền
    • Nên giảm thiểu các tài liệu có thể gây phản cảm
    • Vì các thiết kế liên quan đến khu vườn đã có đủ nhiều, nên khuyến khích các chủ đề thị giác độc đáo và thú vị
  • Bản quyền đồ họa vẫn thuộc về người gửi, nhưng CSS phải được công bố theo cùng giấy phép Creative Commons BY-NC-SA 3.0 với trang để người khác có thể dùng cho việc học

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-04-28
Ý kiến trên Hacker News

  • Có một bối cảnh khó thấy nếu bạn không từng làm phát triển web vào thời điểm thứ này được tạo ra.
    Trước CSS, người ta lạm dụng phần tử table như một lưới để tạo layout, rồi cắt hình ảnh thành nhiều mảnh và đặt vào từng ô. Bây giờ thì mức đó vẫn còn được nhớ đến, nhưng sự phản đối CSS thời ấy dường như đã bị quên khá nhiều.
    Có rất nhiều lập trình viên web hài lòng với hiện trạng và không muốn học CSS, còn huyền thoại rằng “CSS chỉ làm được những thiết kế nhàm chán, vuông vức” thì dai dẳng. Dave Shea đã tập hợp và trình diễn các thiết kế đẹp với CSS Zen Garden, gần như chấm dứt lập luận đó; điều thú vị là chiến thắng áp đảo đến mức giờ đây người ta còn quên cả việc từng có cuộc tranh luận như vậy.

    • CSS thời kỳ đầu nghèo nàn hơn bây giờ rất nhiều. border-radius cũng phải đến khoảng năm 2011 mới xuất hiện, và ngay cả một site tương đối đơn giản như https://90s.dev/ cũng cần khoảng 420 dòng theo https://90s.dev/style.css bằng CSS hiện đại.
      Đó là dù đã dùng khá thoải mái nesting và :has, thứ làm thay đổi cuộc chơi. Vì các giới hạn cơ bản của CSS khi đó, tôi nhớ là để triển khai những hình dạng không thể tạo ra một cách trực quan, người ta phải thay đổi cả CSS lẫn cấu trúc HTML.
    • Lý do dùng table thời kỳ đầu là vì căn chỉnh cho đúng bằng CSS trên nhiều trình duyệt là một cơn ác mộng. Một cơn ác mộng rất tốn tiền, và chỉ ổn nếu bạn là một startup có dư tiền, đủ khả năng thường xuyên đập đi làm lại HTML.
    • Thời điểm chính xác thì hơi mơ hồ, nhưng đã có một giai đoạn CSS vừa xuất hiện còn chưa đủ để tạo các layout phức tạp hơn. Không có flexbox, grid thì càng khỏi nói.
      Tôi nghĩ CSS Zen Garden tồn tại để cho thấy vào thời điểm đó CSS có thể làm được đến đâu.
    • Tôi chưa từng hiểu việc tạo lưới bằng phần tử table thực sự sai ở chỗ nào đến mức như vậy. Ngoài câu chuyện “HTML ngữ nghĩa” chỉ có ý nghĩa với một số ứng dụng, tôi không rõ còn gì khác.
    • Tôi không nhớ có sự phản đối CSS, nhưng nhớ rằng các site thường dùng CSS một chút cho styling phông chữ, trong khi layout vẫn dùng table. Đó không phải phản đối mà là tính thực dụng.
      Khi cần một lưới ổn định và dự đoán được, người ta dùng table layout, đặc biệt là với các layout dày đặc và phức tạp. Cũng rất thường gặp trường hợp chỉ phần điều hướng dùng table layout, và mục tiêu khi đó là pixel perfect.
      Bạn có nhớ phần tử spacer vào khoảng năm 2000 không? Cuối cùng nó không trụ lại được, còn GIF một pixel thì phổ biến và dễ dự đoán hơn.
      Cho đến khi flexbox trở nên đại chúng vào năm 2014, layout bằng CSS float giống như trò quay đĩa vậy. Các div rỗng và div có nội dung hành xử khác nhau rất khổ sở; khoảng thời gian đó thì không lấy lại được, nhưng ít nhất tôi cũng được trả tiền.
      Ý tưởng rằng CSS thời đầu dễ dàng mang lại các layout “Zen Garden” đẹp đẽ không khớp với trải nghiệm của tôi. Tuy vậy, tôi khi đó làm các site truyền thông thông tin, chứ không phải các site nghệ thuật thú vị.

  • Site này đã cũ rồi, và là cũ theo nghĩa tốt.
    Vào thập niên 2000, nó là một cú sốc văn hóa với tôi, và khiến tôi rời Microsoft ASP.NET để xây dựng ứng dụng trên Linux. Tôi nhận ra rằng các “server controls” có tham số inline style là một cách làm hoàn toàn sai, có thể nói là “phản Internet”.
    Alex Russell, người tạo ra Dojo JS, đã cho thấy góc nhìn đó tại một hội nghị, và tôi bị sốc khi nhận ra mình đã bỏ lỡ bao nhiêu thông tin trong thời gian tiếp nhận tin tức công nghệ qua các kênh của Microsoft.
    Trong vài năm, bộ công cụ của tôi chỉ là Web.py, HTML, JS, CSS; rồi sau đó jQuery, Backbone, Underscore xuất hiện, trước khi React và TypeScript lại khiến “full-stack” mới trở nên nặng nề.

    • Tôi không rõ điều gì trong ASP.NET lại ngăn bạn tạo kiểu ứng dụng đó. ASP.NET không chặn việc đó, và bạn vẫn có thể tạo stylesheet cũng như tách file JS riêng.
      Trớ trêu là cái cũ lại thành cái mới. Phía Next.js đang tái tạo view state, Tailwind thì là inline styling, còn shadcn dùng React component; gần như đã quay trọn một vòng.
    • Giờ thì có Svelte, có thể xem là một kiểu full-stack hơi “thông minh”.
    • Thứ đó vẫn còn online. Gần như là một di vật cũ, nhưng có thể xem tại https://www.ajaxtoolkit.net/. Không có phần mềm doanh nghiệp nào mà lại không có drag panel.
      Trong một thời gian, semantic markup và CSS đã đi trước, nhưng giờ tôi thậm chí không còn hứng thú kiểm tra các xu hướng hiện nay nữa. Đến đoạn “HTML trong JavaScript” (JSX) là tôi ngừng quan tâm.
    • Tôi bắt đầu với ASP và PHP, nhưng ASP.NET chủ yếu mang tính giúp các lập trình viên Visual Studio tạo ra các ứng dụng web thô vụng, và không phù hợp với web theo nghĩa rộng.
      Cũng không cần phải chuyển sang Linux. Vì bộ phận IT không cho phép desktop Linux, tôi làm mọi thứ trên Windows rồi triển khai lên cả máy chủ Windows lẫn Linux.

  • Tôi cảm thấy cốt lõi của CSS Zen Garden là: nếu tận dụng tối đa HTML ngữ nghĩa, bạn có thể tách phần trình bày khỏi nội dung và xử lý chúng hoàn toàn độc lập.
    Đến giờ vẫn có thể làm được đến mức như Zen Garden, nhưng thực ra vẫn là vận động trong giới hạn của CSS. Nó gần với luồng “CSS làm được điều này nên ta thiết kế như vậy”, chứ không phải “ta muốn thiết kế như vậy nên dùng CSS này”.
    Có nhiều lựa chọn styling chỉ khả thi khi trực tiếp thay đổi DOM, và có những việc CSS thuần không làm được. Trong các thảo luận của W3C, tôi cũng từng thấy kiểu lập luận “chỉ cần bọc thêm một div nữa là được, sao lại cần thuộc tính CSS mới”.
    Chèn hoặc thay thế hình ảnh thì đơn giản, nhưng thay thế SVG có thể style được lại bất khả thi nếu không đặt trực tiếp node SVG vào HTML. Cuối cùng, ở tầng HTML và JavaScript, các quyết định về trình bày và cấu trúc nội dung bị trộn lẫn, và ngay cả một thay đổi thiết kế đơn giản cũng đụng đến toàn bộ stack.

    • Lời hứa của cộng đồng CSS luôn là có thể tách cấu trúc khỏi trình bày.
      Sau 30 năm viết GUI, giờ tôi tin chắc rằng vị trí kẻ đường ranh đó đã sai. Thay vào đó, cần cô lập ý định. Composites trong dự án của tôi đang đảm nhiệm vai trò đó, và tôi rất háo hức vì nó sẽ được công bố vào tuần tới.
    • Và đây là lúc XSLT xuất hiện.
    • Ngược lại, CSS ngày nay rất mạnh, nên với nhiều thiết kế không phải lâu đài trên mây mà có xét đến đặc tính của medium, chỉ cần CSS và HTML cũng có thể triển khai gọn gàng.

  • Với tư cách là người học CSS từ những tài liệu như Zen Garden và Eric Meyer, các công cụ CSS hiện đại như Tailwind trông giống như anti-pattern

    • Hoàn toàn đồng ý. Tailwind thực sự có rất nhiều vấn đề
      HTML bị phủ kín bởi thông tin về style. Việc đọc HTML lẽ ra là để xem nội dung và ngữ nghĩa, chứ không phải giải mã pl-16 pr-8 bg-olive-500 text-gray-700 thành “chắc đây là header của card”
      Ngày nay có thể nói rằng người ta không đọc HTML nữa, nhưng nếu các lập trình viên dùng những framework như vậy biến HTML thành một mớ hỗn độn kinh khủng thì ai còn muốn đọc nữa. Khi có quá nhiều class của framework, HTML sẽ chứa nhiều nhiễu hơn nội dung, thế là việc đọc HTML biến mất, rồi các lập trình viên lại chất thêm nhiều class và style hơn — thành một vòng lặp tự củng cố
      Các web developer cũng lặp style rất nghiêm trọng. Thay vì những thứ như .button, các tổ hợp kiểu text-white rounded bg-gray-aaa bị rải ở hàng trăm nơi. Không biết đây là vấn đề của Tailwind hay của lập trình viên, nhưng trong các dự án lớn, nếu muốn đổi style cho toàn bộ những thành phần UI tương tự nhau thì sẽ thành trò đập chuột chũi: phải tìm xem inline style nào nằm ở phần tử nào
    • Những công cụ CSS như vậy có vẻ hấp dẫn với những người học web development theo kiểu ứng biến. Ban đầu, vì muốn tạo ra thiết kế trong đầu, họ bắt đầu từ “header, văn bản, hình ảnh” rồi học theo kiểu “làm sao căn giữa?”, “đổi màu thế nào?”, “khoảng cách giữa các phần tử ra sao?”
      Rồi hộp công cụ ý tưởng về CSS hình thành rất nhanh, nhưng lại bỏ sót các chi tiết khiến CSS hoạt động đúng. Tôi biết dùng position: absolute và transform để lách qua những vấn đề kỳ lạ, nhưng không biết về block formatting context hay các chi tiết nhỏ của box model
      Nếu kiến thức CSS chỉ là những miếng băng cá nhân dán lên một nền kiến thức CSS lỏng lẻo, thì chỉ đang đốt nhiên liệu mà thôi. Khi đó, một cách tiếp cận mang đến hộp công cụ style có thể kết hợp và giúp tránh nhiều cái bẫy của CSS có thể trông rất hấp dẫn
      Thứ làm tôi thay đổi suy nghĩ là một series sách ngắn dạng online dạy HTML/CSS từ nền tảng. Nó giải thích mọi thứ từ các nguyên lý đầu tiên và cho biết vì sao lại như vậy, chứ không chỉ ném cho bạn “10 cách căn giữa div” rồi kết thúc. Tôi đọc hết trong một buổi chiều và cách nhìn về web development đã thay đổi, nhưng hoàn toàn không nhớ tên sách. Tôi đặc biệt nhớ câu “display: block giống như tài liệu Word, còn display: flex gần với cách mọi người kỳ vọng hơn”
    • Code Tailwind thật sự xấu xí. Tôi ghét nó. Khi nó xuất hiện, tôi đang làm việc trên các site lớn, và ý tưởng gắn hàng trăm thuộc tính style lên từng trang trong hàng nghìn trang, thay vì vài dòng trong file CSS và một tên class, trông như một bước thụt lùi lớn, đảo ngược một nửa ưu điểm của CSS
    • Tôi nghĩ nó hoạt động tốt với tư cách là chuẩn của một công ty quy mô hàng trăm người. Nếu bạn muốn style mọi thứ trên landing page theo kiểu dùng một lần, thì cứ làm vậy

  • Nó giống như chút ánh sáng trong thời kỳ đen tối của Tailwind và CSS-in-JS
    Giờ thật khó cảm nhận CSS Zen Garden đã quan trọng đến mức nào khoảng 20 năm trước

    • CSS-in-JS chủ yếu là giải pháp để tổ chức code, như cách làm của Styled Components hay Emotion. Nó không thay đổi căn bản cách CSS hoạt động
    • Chắc chắn nó đã khiến tôi yêu CSS. Nhưng điều đó không có nghĩa là tôi không hiểu vì sao Tailwind lại hấp dẫn trong các dự án quy mô lớn
    • Khi mới học CSS, tôi đã mua cuốn sách của họ. Đó thật sự là một thời đại khác

  • Trước đây site này đã ảnh hưởng rất lớn đến tôi
    Giải thích cho những ai chưa biết: với cùng một nội dung HTML, người ta có thể gửi thiết kế chỉ bằng CSS và hình ảnh. Những ví dụ đặc biệt ấn tượng là:
    https://csszengarden.com/202/
    https://csszengarden.com/189/
    https://csszengarden.com/177/
    https://csszengarden.com/136/
    https://csszengarden.com/206/
    Cũng từng có một thiết kế mà khi cuộn trang, một thanh kiếm dùng position: fixed “cắt đôi trang” ở giữa, nhưng giờ có vẻ không còn trong danh sách nữa. Tôi còn nhớ một thiết kế khác: phần trên cùng của trang là mặt biển, và khi cuộn xuống thì ở đáy đại dương có một trong các thứ như bạch tuộc, tàu ngầm hoặc thợ lặn

    • Tôi cũng vậy. Nhìn những thiết kế đó khiến tôi nhớ ra web design ngày nay đã trở nên nhàm chán đến mức nào

  • Tôi từng đăng hai thiết kế lên đó, và đến giờ vẫn nhận được email xin phép tái sử dụng CSS

  • Hôm nay thấy CSS Zen Garden trên HN mà thật sự rất vui. Thời đó tuyệt thật
    Nhưng giờ phải càm ràm một chút
    Điều đáng lo nhất ở Tailwind và các “framework” CSS tương tự, cũng như trong phát triển phần mềm hiện đại nói chung, là việc người ta ngày càng tự hào vì không hiểu hệ thống nền tảng
    Tailwind đưa ra một giải pháp nhanh và bề mặt. Gắn các lớp tiện ích vào trang là có được kết quả “trông đủ ổn” mà không cần học CSS thực sự hoạt động như thế nào. Chẳng ai bận tâm việc HTML trở thành một đống hỗn độn với số lớp CSS còn nhiều hơn cả nội dung
    Thái độ là: “Cách nó hoạt động thì quan trọng gì? Trang đẹp rồi mà. Thế là thành công!”
    Đây không chỉ là vấn đề của Tailwind, mà là một xu hướng lớn hơn trong ngành. Tôn vinh sự thiếu hiểu biết, vội vã chạy theo kết quả mà không xây dựng hiểu biết thực sự
    Từ khi nào việc không biết lại trở thành điều đáng tự hào? Thật buồn khi chiều sâu và sự thành thạo bị xem là tùy chọn, thậm chí là không đáng mong muốn

    • Nhìn phần lớn HTML tệ đến mức nào thật sự gây sốc. Tôi vừa xem Twitter, một bài đăng trên timeline của tôi chỉ có một đoạn văn bản, một hình ảnh và khoảng 10 biểu tượng có liên kết, vậy mà riêng HTML đã 254 dòng, 21,8kB, có 104 div lồng nhau và hơn 860 class
      Số class còn nhiều hơn số ký tự của nội dung văn bản, và chỉ riêng tên class đã khoảng 9kB. Điều đó lặp lại với mọi bài đăng trên timeline
      Đáng ra chỉ cần vài div, vài class, một class cho mỗi biểu tượng và vài dòng CSS là đủ. Nghiêm túc mà nói, có thể style mọi bài đăng trên timeline bằng số ký tự ít hơn số ký tự trong tên class của một bài đăng
      Tôi không hiểu các lập trình viên chuyên nghiệp có thể tạo ra thứ HTML phình to vô lý như vậy bằng cách nào
    • Phát triển phần mềm là việc xây thêm các lớp trừu tượng theo thời gian. Bạn viết assembly giỏi đến đâu?
    • Tôi hiểu ý bạn, nhưng tôi không nghĩ điều đó áp dụng cho Tailwind. Các class của Tailwind tương ứng trực tiếp với thuộc tính CSS, nên nếu không hiểu CSS thì thực ra cũng không làm được nhiều

  • Cảm giác như bay từ quá khứ đến vậy. Tôi thích CSS Zen Garden, nhưng mục tiêu và triết lý của nó phù hợp với một thế giới nơi mục đích chính của website là cung cấp tài liệu
    Có vẻ thế giới media phong phú đã bỏ lại tầm nhìn web đó từ khoảng giữa những năm 2000

    • Tôi nghĩ không hẳn là media phong phú, mà là web đã chuyển sang 100% lấy marketing làm trung tâm. Kéo xuống dưới cũng chỉ thấy quảng cáo tiếp
    • Đó là một sự hạ cấp nghiêm trọng
      https://blog.danieljanus.pl/2019/10/07/web-of-documents/
    • Bạn nói “một thế giới nơi mục đích chính của website là cung cấp tài liệu”, nhưng chúng ta vẫn đang sống trong thế giới đó. Tôi không nói mỉa
      Ngoài vài ứng dụng bản đồ, phần lớn web vẫn là việc đọc một thứ gì đó, và không cần nhiều thứ linh tinh đến vậy. Nó chỉ trở nên phức tạp hơn vì các nhà phát triển thích sự phức tạp hơn sự đơn giản
    • “Media hiện đại” có thật sự phong phú không? Tôi nghĩ mật độ thông tin và tỷ lệ tín hiệu trên nhiễu thì ngược lại đang tệ đi

  • Rất vui khi Garden trở lại. Vào thời thiết kế web dựa trên CSS còn là tuyến đầu và mọi người bắt đầu dùng div lồng sâu thay vì table lồng sâu, CSS Zen Garden và Spoono là những website tôi yêu thích nhất
    Cuốn sách cũng hay