olragon.css: thả vào là xong, khỏi viết class

Một bản trưng bày kèm hướng dẫn ngắn cho bộ stylesheet mà cả trang này đang chạy.

English: olragon.css: drop it in, skip the classes.

Mình viết file này cho đúng một trang, là trang bạn đang đọc, rồi mới nghĩ ra là người khác cũng dùng được.

Cả trang bạn đang đọc này chẳng có một class CSS nào trong mã, chỉ là HTML ngữ nghĩa thuần: <article>, <h2>, <p>, <blockquote>, <ul>. Toàn bộ diện mạo đến từ đúng một file nhỏ, olragon.css, tô thẳng lên các thẻ HTML. Gắn nó vào trang ngữ nghĩa nào cũng được, và trang đó trông y như vậy.

Thả vào là chạy

Một dòng trong <head>, rồi cứ viết HTML bình thường:

<link rel="stylesheet" href="https://olragon.com/olragon.css">

Cài đặt chỉ có vậy. Không bước build, không class, không JavaScript. Cứ viết <h1>, <p>, <blockquote>, <ul>, <figure>, chúng đã có kiểu sẵn. Trang HTML trơ thành trang ấm áp, dễ đọc.

Xem tận mắt

Mỗi hàng: bên trái là thẻ, bên phải là cú pháp và kết quả thật. Tất cả bên dưới là chính trang đang tự tô — không chạm tới class nào.

<h3>A small heading</h3>

<blockquote>Small is legible — a page you can hold in your head is a page you can tend.</blockquote>

<ul><li>seedling</li><li>budding</li><li>evergreen</li></ul>

<aside>Change a few CSS variables and the whole mood shifts with them.</aside>

<p>Wrap selectors in <code>:where()</code> for zero specificity.</p>

<p>Here is <a href="#demo">a styled link</a> inside a sentence.</p>

<hr>

<table><tr><th>stage</th><th>icon</th></tr><tr><td>budding</td><td>🌿</td></tr><tr><td>evergreen</td><td>🌲</td></tr></table>

Bạn nhận được gì

• Một cột chữ vừa tầm đọc, font serif hệ thống, bảng màu "mảnh vườn cổ tích" dịu mắt.
• Chế độ tối tự động, theo hệ điều hành.
• Mấy nét vẽ tay: gạch chân lượn sóng, thẻ <hr> nguệch ngoạc, dấu đầu dòng nảy mầm, chữ cái đầu to ở đoạn mở.
• Chuyển động nhẹ nhàng, tôn trọng prefers-reduced-motion, và nằm gọn trong một khối bạn xoá lúc nào cũng được.

Nó theo nguyên tắc nào

1. Không class trước hết. Mọi kiểu lõi nhắm vào thẻ, chẳng nhắm vào class. HTML của bạn sạch; stylesheet lo phần còn lại.
2. Độ đặc hiệu bằng 0. Mọi selector bọc trong :where(), nên trọng số là 0. Đè lên bất cứ gì bằng một dòng thường, khỏi cần !important.
3. Chỉ font hệ thống. Không web font, không font CDN, không request mạng. Dùng đúng font serif và mono máy bạn sẵn có.
4. Không build, không phụ thuộc. Chỉ một file .css viết tay. Mở ra, đọc, sửa.
5. Chuyển động là tuỳ chọn. Mọi animation nằm trong một khối có nhãn ở cuối file. Xoá nó là có ngay trang tĩnh hoàn toàn.

Đổi màu, đổi font kiểu gì

Màu và font là các biến CSS ở đầu file. Đổi --paper, --ink, --green, --serif, là cả tâm trạng đổi theo. Vì độ đặc hiệu bằng 0, luật của bạn luôn thắng.

Nó cố tình mang quan điểm riêng: đây là diện mạo mảnh vườn của mình, chẳng phải một framework trung tính. Nhưng bộ khung thì tổng quát. Nếu bạn muốn một cách nhỏ gọn, thành thật, không phụ thuộc để khiến HTML ngữ nghĩa trông được chăm chút, cứ chép dòng link ở trên rồi bắt đầu viết nha.

Thứ mình chưa biết là nó sống ra sao ngoài mảnh vườn này. Mình chỉ thử trên mấy trang của mình, với font hệ thống trên máy mình, nên bảng chữ dài hơn hay layout lạ hơn thì mình chưa rõ nó vỡ ở đâu. Bạn thử rồi thấy chỗ nào gãy thì kể mình nghe nha.

Làm thủ công cho mảnh vườn này. Của bạn để dùng, CC BY 4.0.