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

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.

h1–h3

Tiêu đề — chữ serif, gạch chân vẽ tay.

<h3>A small heading</h3>

A small heading

blockquote

Câu trích dẫn nổi bật, viền vẽ tay mềm.

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

Small is legible — a page you can hold in your head is a page you can tend.

ul · li

Danh sách với dấu đầu dòng nảy mầm.

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

seedling
budding
evergreen

aside

Hộp ghi chú dịu — chỉ là <aside>.

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

code

Mã trong dòng, tô màu nhẹ.

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

Wrap selectors in :where() for zero specificity.

a

Liên kết gạch chân lượn sóng kiểu sáp màu.

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

Here is a styled link inside a sentence.

hr

Đường phân cách lượn sóng, không phải vạch cứng.

<hr>

table

Bảng kẻ nhẹ nhàng.

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

stage	icon
budding	🌿
evergreen	🌲

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 "mảnh 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 mảnh 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 mảnh vườn này. Của bạn để dùng — CC BY 4.0.