Matcha.css – thư viện tạo kiểu ngữ nghĩa dạng drop-in được xây dựng bằng CSS thuần

 (matcha.mizu.sh)
4 điểm bởi GN⁺ 2024-05-25 | 1 bình luận | Chia sẻ qua WhatsApp
  • matcha.css là thư viện giúp làm đẹp các phần tử HTML ngay như stylesheet mặc định của trình duyệt, giảm bớt công việc viết CSS thủ công cho prototyping nhanh, HTML tĩnh và tài liệu tạo từ Markdown
  • Có thể áp dụng chỉ với một dòng `` mà không cần bước build, dependency, JavaScript hay cấu hình, với kích thước mặc định sau gzip khoảng 8.81kB
  • Tận dụng cấu trúc tài liệu và các phần tử ngữ nghĩa để xử lý chỉ bằng CSS những hành vi như submenu trong ``, dấu * cho trường bắt buộc, hay màu viền theo trạng thái kiểm tra hợp lệ của input
  • Cung cấp các preset Default, Lite, Utility classes, Istanbul coverage cùng custom builder, đồng thời cũng có thể import trực tiếp từng thư mục style chi tiết
  • Đây là mã nguồn mở theo giấy phép MIT; các utility class và tính năng layout tuy tiện lợi nhưng vì thêm class vào tài liệu nên có thể làm lệch khỏi cách dùng dựa trên ngữ nghĩa

CSS drop-in để làm đẹp tài liệu HTML ngay lập tức

  • matcha.css là thư viện drop-in dùng CSS thuần để tạo kiểu cho các phần tử HTML
  • Thư viện tập trung vào việc giúp các phần tử HTML trông đẹp mắt tương tự stylesheet mặc định của trình duyệt mà không yêu cầu người dùng phải chỉnh sửa trực tiếp tài liệu
  • Phù hợp cho prototyping nhanh, trang HTML tĩnh, tài liệu sinh từ Markdown, và các nhà phát triển muốn tận dụng toàn bộ phạm vi phần tử HTML mà không phải đi sâu vào chi tiết CSS
  • Chính trang này cũng được tạo kiểu bằng matcha.css

Triển khai chỉ với một dòng và có thể hoàn tác dễ dàng

  • Có thể sử dụng mà không cần bước build, dependency, JavaScript, cấu hình hay refactor tài liệu
  • Kích thước bản build mặc định theo gzip là ~8.81kB
  • Chỉ cần thêm một dòng sau vào `` của tài liệu là áp dụng được
  • Khi gỡ bỏ cũng chỉ cần bỏ `` đó đi, được thiết kế để không cần refactor hay dọn dẹp tài liệu
  • Tài nguyên được host trên Vercel, đồng thời cũng có thể dùng qua JSdelivr, dịch vụ CDN phân phối gói npm
  • Mọi phiên bản công khai đều được cung cấp trong thư mục /v/, và mặc định nhánh main sẽ được phục vụ

Tạo kiểu dựa trên cấu trúc ngữ nghĩa

  • matcha.css điều chỉnh style dựa trên cấu trúc tài liệu và phân cấp phần tử

  • Ví dụ về hành vi tự động

    • Lồng các phần tử `` sẽ tạo ra submenu ngầm định
    • Khi được dùng cùng thì sẽ tự động thêm dấu * cho trường bắt buộc
    • [data-color-scheme="light"] ép dùng chế độ sáng, còn [data-color-scheme="dark"] ép dùng chế độ tối
    • [data-color-scheme] có thể áp dụng cho một phần tử cụ thể để ép color scheme có chọn lọc
    • :root thiết lập biến CSS, còn @media (prefers-color-scheme) thiết lập chế độ theo tùy chọn của người dùng
    • Không dùng quy tắc !important nên khi cần có thể override style dễ dàng

Tùy chọn build và triển khai

  • Ngoài bản build mặc định còn có các preset build theo mục đích sử dụng
    • Default ~8.81kB: toàn bộ tạo kiểu ngữ nghĩa và tính năng bổ sung, trừ @istanbul-coverage
    • Lite ~5.59kB: toàn bộ tạo kiểu ngữ nghĩa, @break-words, @discrete-scrollbars
    • Utility classes ~3.43kB: @root, @utilities
    • Istanbul coverage ~1.94kB: @root, @syntax-highlighting, @istanbul-coverage
  • Nếu chỉ muốn chọn những tính năng cần thiết thì có thể dùng custom builder
  • Với nhu cầu tùy biến phức tạp hơn, cũng có thể fork rồi tự vá trực tiếp
  • Mỗi thư mục con trong github.com/lowlighter/matcha/styles đều được website phục vụ trực tiếp
    • Ví dụ, nếu chỉ muốn dùng @syntax-highlighting thì có thể nhúng trực tiếp mod.css tương ứng
    • Nếu không tự cung cấp biến CSS riêng thì nhiều khả năng sẽ cần gói @root
    • Tất cả các file mod.css cũng được cung cấp thêm dưới dạng alias của thư mục cha để tiện sử dụng

Phạm vi các phần tử HTML được tạo kiểu

  • Cấu trúc tài liệu

    • Tạo kiểu cho section, article, header, footer, aside, nav, menu, hgroup, các phần tử tiêu đề và nhiều phần tử khác
    • `` được thiết kế để hòa hợp tự nhiên khi container cha dùng display: flex
    • bên trong sẽ hiển thị giống breadcrumb, còn `` sẽ hiển thị như danh sách điều hướng

  • Văn bản và phần tử inline

    • Cung cấp style cho , , , , , , , , , , , , , , , , , , `` và nhiều phần tử khác
    • Vì tooltip mặc định của trình duyệt không thể được tạo kiểu, nên tooltip bằng CSS được khuyến nghị dùng thuộc tính [data-title] thay vì [title]

  • Phần tử form

    • Tạo kiểu cho , , , , , , , , ``
    • Các phần tử input không thực hiện kiểm tra bổ sung ngoài phần kiểm tra do trình duyệt đảm nhiệm
    • :user-valid áp dụng viền --success, còn :user-invalid áp dụng viền --danger
    • Mẫu có thể tự động nhận biết trạng thái required, nhưng mẫu thì không thể

  • Bảng và media

    • `` áp dụng border collapse, và nếu phần tử cha có giới hạn chiều rộng thì sẽ tự động dùng overflow
    • Có thể bọc bằng container .table-responsive
    • , , `` được áp dụng style bo góc

  • và

    • và cũng nằm trong phạm vi được tạo kiểu mặc định
    • ::backdrop của `` sẽ hiển thị khi dùng dialog.showModal()
    • Khuyến nghị dùng `` để trình duyệt có thể đóng dialog khi submit mà không cần JavaScript

Sự tiện lợi và cái giá của tính năng layout

  • matcha.css cũng cung cấp các tùy chọn layout cho tài liệu
  • Thêm class .layout-simple vào phần tử để kích hoạt layout đơn giản
  • Cấu trúc yêu cầu bao gồm .layout-simple, header:first-of-type, main:only-of-type, aside, nav, footer:last-of-type và các phần tử liên quan
  • Cấu trúc sẽ thay đổi theo điều kiện media
    • Ở màn hình mặc định, bố cục tập trung vào header và main
    • Với min-width: 960px, bố cục sẽ dùng aside và main
    • Với min-width: 1280px, bố cục dùng hai aside và main
  • Trên màn hình nhỏ, aside:nth-of-type(1) sẽ bị ẩn; có thể hiện lại bằng data-expand hoặc cho phép thu gọn bằng data-expandable
  • Việc dùng layout có thể đòi hỏi refactor tài liệu, và sau này nếu ngừng dùng matcha.css thì có thể lại phải refactor lần nữa

Utility class mang tính hỗ trợ nhiều hơn

  • matcha.css cũng cung cấp một số utility class để thuận tiện sử dụng
  • Các class liên quan đến màu gồm có
    • .default, .muted, .accent, .active, .variant, .success, .attention, .severe, .danger
    • bd-* đổi màu viền, bg-* đổi màu nền, fg-* đổi kiểu foreground
  • .flash tạo ra một block thu hút sự chú ý và có thể kết hợp với các class màu sắc
  • Cung cấp utility cho text, kích thước, vị trí, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow, và SVG fill/stroke
  • Margin và padding dùng các class dạng số dựa trên các giá trị 0, .125, .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 3, 4
  • Vì utility class yêu cầu thêm class vào tài liệu nên có thể khiến việc rời khỏi matcha.css sau này trở nên khó hơn
  • Nếu utility được cung cấp là chưa đủ hoặc còn hạn chế, nên cân nhắc dùng hoặc chuyển sang framework CSS ưu tiên utility
  • matcha.css không nhắm tới mục tiêu trở thành một CSS framework hoàn chỉnh

Hiển thị mã, giao diện trình soạn thảo và Shadow DOM

  • matcha.css cung cấp các class syntax highlighting tuân theo @media (prefers-color-scheme)
  • Cũng bao gồm class để tạo giao diện kiểu code editor
    • Cấu trúc yêu cầu là .editor, > textarea, > div.highlight
    • Phần style bổ sung này không tự thực hiện syntax highlighting, mà chỉ tạo kiểu giống trình soạn thảo mã
    • Để highlight thực tế vẫn cần thư viện syntax highlighting như highlight.js
  • matcha.css cũng định nghĩa biến CSS bằng pseudo-class :host nên tương thích với Shadow DOM
  • Bên trong Shadow DOM, có thể import lại matcha.css và áp dụng custom styles riêng mà vẫn được cô lập để không xung đột với phần còn lại của tài liệu

Hỗ trợ trình duyệt và giấy phép

  • matcha.css cho biết nó được xây dựng để tương thích với mọi trình duyệt hiện đại
  • Bảng hỗ trợ bao gồm Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96% và nhiều nền tảng khác
  • Dự án được phát hành dưới dạng mã nguồn mở và sử dụng MIT License
  • Kho mã nguồn nằm tại github.com/lowlighter/matcha

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-05-25
Ý kiến trên Hacker News

  • Tôi thích ý tưởng khôi phục HTML thành nguồn chân lý duy nhất cho bố cục tài liệu, và có vẻ nó có thể rất hiệu quả với các tài liệu không cần thiết kế phức tạp.
    Tuy nhiên, các lựa chọn thiết kế mặc định, đặc biệt là màu sắc và độ hoàn thiện, thì hơi đáng tiếc. Tôi không phải nhà thiết kế chuyên nghiệp, nhưng đã có đủ kinh nghiệm nghe người dùng phàn nàn về phần mềm mình tự làm, nên tôi có thể cảm nhận được điều gì đó hơi gượng khi so với sản phẩm do một nhà thiết kế giỏi, có nền tảng về lý thuyết màu sắc, mật độ thông tin, gradient, v.v. tạo ra.
    Nếu tác giả đang đọc, tôi tò mò liệu bạn đã cân nhắc tận dụng thẩm mỹ của các dự án FOSS khác như Bulma hay Tailwind, hoặc hợp tác với một nhà thiết kế chuyên nghiệp chưa. Tôi nhớ jgthms thỉnh thoảng cũng có mặt trên trang này.

    • Cảm ơn phản hồi mang tính xây dựng; thật ra tôi hơi bối rối vì nó đã được đăng lên HN trước khi tôi tự đăng Show HN.
      Tôi không phải lập trình viên frontend cũng không phải nhà thiết kế, nên có thể lộ rõ sự thiếu hiểu biết về lý thuyết màu sắc, khả năng tiếp cận và những yếu tố có thể là hiển nhiên với người khác. Có lẽ vì vậy mà nó cũng mang cảm giác thủ công.
      Tôi sẽ tìm hiểu thêm những điểm bạn nhắc đến. Về việc hợp tác với nhà thiết kế chuyên nghiệp, tôi sẵn sàng nhận lời khuyên, nhưng vì đây là dự án phụ nên không có kế hoạch thuê riêng ai cả. Hiện tại tôi nghĩ đối tượng chính không phải là giới chuyên nghiệp, mà có lẽ sẽ hấp dẫn người dùng làm vì sở thích hơn.
    • Tôi cũng cảm thấy có gì đó hơi gượng, nhưng tôi cũng từng có cảm giác đó với những thứ do nhà thiết kế làm. Dù vậy nhìn chung nó khá ổn, giống như do một người có chút gu thiết kế hoặc một nhà thiết kế mới vào nghề làm ra.
      Càng nhìn lâu thì tổng thể càng thấy đẹp hơn, nhưng đồng thời cảm giác hơi gượng cũng mạnh hơn, khá thú vị.
      Sửa: Có lẽ màu của tách trà khiến tôi thấy hơi lạ. Tôi thích logo nói chung, nhưng tự hỏi nếu đổi màu tách trà gần với màu nền phía trên hơn thì sao.
    • Đồng ý. Một ví dụ tạo cảm giác gượng là kiểu hover của nút.
      Chữ đen trên nền tối không hợp cả về thẩm mỹ lẫn khả năng tiếp cận. Nếu các thiết lập mặc định được trau chuốt hơn thì sẽ càng tuyệt.
    • Trên trang có một phần cho phép tự tạo bản build tuỳ chỉnh, nên có thể kiểm soát phần nào các lựa chọn kiểu mặc định.
      Tuy nhiên, nếu là nhà thiết kế muốn khớp với diện mạo thiết kế của doanh nghiệp thì họ có thể dành hàng giờ chỉ cho những thứ như khoảng cách, và công cụ này có vẻ không dành cho những người như vậy.

  • Tôi thích những thư viện nhỏ như thế này. Hiện tôi đang dùng pico.css, nhưng cũng sẽ xem thử cái này. Tôi nghĩ các phần tử DOM chuẩn của trình duyệt lẽ ra nên trông như thế này.
    Nhưng thực tế thì không, nên những thư viện như vậy mới tồn tại. Sau khi đọc bình luận của người khác, tôi tìm hiểu “classless” trong thư viện này nghĩa là gì và tìm thấy một danh sách các thư viện tương tự.
    https://github.com/dbohdan/classless-css

    • Tôi đồng ý rằng “các phần tử DOM chuẩn của trình duyệt lẽ ra nên trông như thế này”, nhưng với những người muốn tự tạo style thì đó cũng có thể là ác mộng. Ngay cả style mặc định hiện nay cũng đã hơi phiền theo nghĩa này.
      Từ lâu tôi đã nghĩ sẽ thật tốt nếu có cách chuyển đổi giữa style chrome và style nội dung. Ví dụ thanh điều hướng hay các phần trực quan hoá/tương tác được nhúng chỉ nhận style mặc định tối thiểu ở chế độ chrome, còn phần nội dung bài viết thì nhận style người dùng ưa thích.
    • Cũng có trang cho phép thử nhanh những thứ này. Trang tôi biết là https://www.cssbed.com/
    • Tôi rất thích pico.css. Nó là một điểm cân bằng vừa nhanh, dễ học, vừa có khá đủ tính năng.
      Bộ Flask + HTMX + AlpineJS + PicoCSS hiện là “All Python and HTML SPA” của tôi.

  • Trông có vẻ thú vị, nhưng bỏ gạch chân liên kết và trước khi hover chỉ dựa vào màu sắc là rất tệ về mặt khả năng tiếp cận.

    • Người bị rối loạn sắc giác có thể thêm tiện ích mở rộng CSS để gạch chân hoặc nhấn mạnh liên kết.
      Người khiếm thị dùng trình đọc màn hình hoặc màn hình chữ nổi, nên không cần gạch chân. Vậy còn ai cần gạch chân nữa?

  • Có vẻ đầy hứa hẹn. Tôi đã dùng Simple.css: https://simplecss.org/
    Nhìn lướt qua thì matcha.css có vẻ tiến xa hơn một chút, nên tôi định dùng thử.

  • Có lẽ cần một công cụ tạo ra các CSS framework không cần class như thế này. Như vậy mỗi người có thể tinh chỉnh chi tiết bảng màu, padding, cỡ chữ, v.v.

  • Suốt 30 năm, chúng ta đã dùng thanh cuộn tỷ lệ làm điều khiển chuẩn. Ta có thể biết cửa sổ hiện tại đang hiển thị bao nhiêu phần của tài liệu, và có thể bấm vào thanh cuộn để dễ dàng nhảy tới vị trí tương ứng với kích thước tài liệu.
    Ta cũng có thể dùng các nút mũi tên ở trên/dưới thanh cuộn, hoặc tab tới đó rồi thao tác bằng bàn phím. Nếu có hạn chế về thị giác hoặc vận động, ta có thể tăng độ tương phản hoặc phóng to hơn trong cài đặt hệ điều hành.
    Nhưng trên web năm 2024, người ta thường xuyên phá hỏng thanh cuộn và biến nó thành cơn ác mộng trải nghiệm người dùng. Thật đáng xấu hổ khi CSS cho phép làm hỏng hoàn toàn các điều khiển chuẩn do hệ điều hành cung cấp vốn đang hoạt động tốt, khiến UI/UX của trình duyệt trở nên tệ hại.
    Xin đừng dùng thứ này.

    • Tôi phản đối mạnh mẽ.
      Các điều khiển chuẩn do hệ điều hành cung cấp cũng đã tệ đi theo thời gian. Ví dụ như thanh cuộn biến mất và checkbox bo tròn của Apple.
      Những thứ đó không dễ thay đổi, nhưng với CSS thì ít nhất ta có thể cải thiện các điều khiển chuẩn như vậy.

  • Tôi thích chức năng xem trước cho biết nó sẽ trông như thế nào trên các website khác. Rất trực quan và phù hợp với một trang CSS.

  • Không thể thiếu kho Spark Joy của Swyx:
    https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...

  • Tại sao đến giờ vẫn liên tục có CSS framework mới được tạo ra? Tại sao chuyện này vẫn chưa phải là vấn đề đã được giải quyết?

    • Đây không phải CSS framework, mà là một stylesheet để lấy dùng khi bạn không muốn bận tâm đến CSS hay styling nhưng vẫn muốn tạo một trang trông ổn.
    • Phần lớn CSS liên quan đến nghệ thuật và thẩm mỹ. Công việc CSS sẽ không bao giờ “kết thúc”.
      Chừng nào các nghệ sĩ còn muốn thể hiện bản thân trên phương tiện web, các stylesheet và “framework” mới sẽ vẫn tiếp tục xuất hiện.