Dự án CSS Zen Garden

• CSS Zen Garden là một dự án trình bày vẻ đẹp của thiết kế dựa trên CSS
• HTML được giữ nguyên, và chỉ cần thay đổi tệp CSS bên ngoài là có thể trải nghiệm nhiều thiết kế khác nhau
• Người tham gia có thể thể hiện sức mạnh của thiết kế web thông qua CSS, truyền cảm hứng và sử dụng như tài liệu học tập
• Chủ yếu sử dụng CSS 1 & 2, còn CSS 3 & 4 chỉ nên dùng ở mức hạn chế
• Thiết kế được gửi phải hiển thị kết quả nhất quán trên nhiều trình duyệt khác nhau, và tối thiểu phải hoạt động trên IE9+ cùng các trình duyệt mới nhất

---

Tầm quan trọng của CSS Zen Garden

• CSS Zen Garden là một dự án nhằm thể hiện sức mạnh của CSS và truyền cảm hứng cho các nhà thiết kế và lập trình viên
• HTML được giữ nguyên, và chỉ cần thay đổi tệp CSS bên ngoài là có thể trải nghiệm nhiều thiết kế khác nhau
• Dự án này cho thấy các khả năng của CSS và nhấn mạnh vẻ đẹp của thiết kế web

Cách tham gia

• Cần có thiết kế trực quan mạnh mẽ và kỹ năng CSS, nhưng người mới bắt đầu cũng có thể bắt đầu với các tệp ví dụ
• Có thể tự do chỉnh sửa stylesheet, nhưng không được thay đổi HTML
• Tác phẩm hoàn chỉnh phải được tải lên máy chủ web và gửi liên kết

Lợi ích khi tham gia

• Có thể nâng cao độ nhận diện, mang lại cảm hứng và được dùng làm tài liệu thể hiện những khả năng đáng kinh ngạc của CSS
• Đây là một trang web có thể truyền cảm hứng cho các nhà thiết kế web và lập trình viên, đồng thời được sử dụng như tài liệu học tập

Yêu cầu

• Chủ yếu sử dụng CSS 1 & 2, còn CSS 3 & 4 chỉ nên dùng ở mức hạn chế
• Phải hiển thị kết quả nhất quán trên nhiều trình duyệt khác nhau, và tối thiểu phải hoạt động trên IE9+ cùng các trình duyệt mới nhất
• Phải gửi tác phẩm nguyên bản và tôn trọng bản quyền

Bản quyền và giấy phép

• Đồ họa được gửi vẫn giữ nguyên bản quyền, còn CSS phải được cung cấp theo giấy phép Creative Commons
• Cần chia sẻ CSS để người khác có thể học hỏi

[GN⁺]

Ý kiến Hacker News

• Trước khi CSS xuất hiện, các nhà phát triển web lạm dụng phần tử bảng để tạo lưới và cắt ảnh rồi đặt vào bảng nhằm triển khai bố cục

  • Đã có sự phản đối đối với CSS, và nhiều nhà phát triển từ chối học CSS
  • Từng có ngộ nhận rằng CSS chỉ cho phép những thiết kế "nhàm chán và kiểu hộp"
  • Dave Shea đã xóa bỏ những ngộ nhận này bằng cách cho thấy khả năng của CSS thông qua CSS Zen Garden
  • Ông đã chứng minh rằng có thể tạo ra những thiết kế ấn tượng bằng CSS, qua đó chấm dứt cuộc tranh luận

• Trang này đã cũ nhưng theo một nghĩa tích cực thì rất tuyệt

  • Vào đầu những năm 2000, đây là một trong những động lực khiến tôi rời Microsoft ASP.NET để phát triển ứng dụng trên Linux
  • Alex Russell mang đến thông tin mới thông qua Dojo JS, khiến tôi nhận ra tầm quan trọng của tin tức công nghệ
  • Tôi đã dùng một bộ công cụ gồm Web.py, HTML, JS và CSS, sau đó mới xuất hiện jQuery, Backbone, Underscore, React, TS, v.v.

• Điểm cốt lõi của CSS Zen Garden là có thể tận dụng HTML mang tính ngữ nghĩa tối đa để vận hành phần trình bày và nội dung hoàn toàn độc lập với nhau

  • Có thể hiện thực thiết kế trong phạm vi giới hạn của CSS
  • Để thay đổi kiểu dáng, nhiều khi vẫn phải chỉnh sửa trực tiếp DOM
  • Phải trộn lẫn các quyết định về phần trình bày và cấu trúc nội dung ở cấp độ HTML và Javascript

• Là người đã học CSS thông qua Zen Garden và Eric Meyer, tôi thấy các công cụ CSS hiện đại như Tailwind giống một phản mẫu hơn

• Đây từng là ánh sáng soi rọi trong thời kỳ đen tối của Tailwind và CSS-in-JS

  • Thật khó để nhận ra tầm quan trọng của CSS Zen Garden từ 20 năm trước

• Cũ nhưng tốt

  • Nó từng là nền tảng để dạy thiết kế web cho các học sinh trung học có thu nhập thấp
  • Học sinh phải giải thích CSS trong các cuộc thi thiết kế web, và nhiều em đã giành được máy tính để bàn làm giải thưởng
  • Tôi đã gửi câu hỏi cho Dave Shea, Eric Meyer, Andy Budd và nhận được sự giúp đỡ

• Tôi đã gửi hai thiết kế, và đến giờ vẫn còn nhận được yêu cầu tái sử dụng CSS

• Trang này từng có ảnh hưởng rất lớn trong quá khứ

  • Có thể gửi CSS và hình ảnh cho cùng một nội dung HTML
  • Đã có những ví dụ thiết kế cực kỳ ấn tượng

• Ký ức xưa... Tôi rất yêu CSS Zen Garden, nhưng đó là triết lý của thời mà mục đích chính của website là cung cấp tài liệu

  • Một thế giới giàu phương tiện truyền thông đã để lại tầm nhìn đó ở phía sau

• Thật vui khi thấy CSS Zen Garden trên HN

  • Tôi có nhiều bất mãn với các "framework" CSS như Tailwind
  • Tailwind cho phép tạo ra kết quả "đủ ổn" mà không cần học cách CSS thực sự hoạt động
  • HTML trở thành thứ có nhiều lớp CSS hơn cả nội dung
  • Có xu hướng xem chiều sâu và sự tinh thông là điều không bắt buộc nữa