olragon.css — CSS thả vào là đẹp, không cần class

🌿 buddingupdated 2026-06-23#css#web#toi-gian#classless#dropin

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 — classless, drop-in HTML5 styling.

Trang bạn đang đọc này — toàn bộ — không có một class CSS nào trong mã. Nó 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 bất kỳ trang ngữ nghĩa nào, và nó trông y như thế nà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 tạo kiểu sẵn. Một trang HTML trơ trở thành một trang ấm áp, dễ đọc.

Xem tận mắt

Cùng ý tưởng đó, nhưng cụ thể — mã HTML thô ở trên, và ngay bên dưới là cách olragon.css render nó. Không đụng tới class nào; đây chính là trang đang tự tô kiểu cho mình.

Một trích dẫn:

<blockquote>Nhỏ thì dễ hiểu — một trang nằm gọn trong đầu là một trang chăm được.</blockquote>

Nhỏ thì dễ hiểu — một trang nằm gọn trong đầu là một trang chăm được.

Một danh sách (để ý dấu đầu dòng nảy mầm):

<ul><li>nảy mầm</li><li>đâm chồi</li><li>thường xanh</li></ul>

nảy mầm
đâm chồi
thường xanh

Một ô chú thích — chỉ là <aside>:

<aside>Đổi vài biến CSS là cả tâm trạng đổi theo.</aside>

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

Một cột chữ vừa tầm đọc, font serif hệ thống, và bảng màu "khu vườn cổ tích" dịu mắt.
Chế độ tối tự động (theo hệ điều hành).
Những 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 có thể xóa.

Những nguyên tắc mình theo

Không class trước hết. Mọi kiểu lõi nhắm vào thẻ, không nhắm vào class. HTML của bạn sạch; stylesheet lo phần còn lại.
Độ đặ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ông cần !important.
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ó.
Không build, không phụ thuộc. Chỉ một file .css viết tay. Mở ra, đọc, sửa.
Chuyển động là tùy chọn. Mọi animation nằm trong một khối có nhãn ở cuối file. Xóa nó là có một trang tĩnh hoàn toàn.

Biến nó thành của bạn

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 khu vườn của mình, khô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, hãy chép dòng link ở trên và bắt đầu viết.

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