Trình định dạng & làm đẹp CSS miễn phí

Định dạng, làm đẹp và minify CSS. Tùy chỉnh thụt lề, kích hoạt một thuộc tính trên mỗi dòng và sắp xếp theo thứ tự bảng chữ cái, và so sánh kích thước trước/sau. Tải xuống CSS đã định dạng dưới dạng tệp.

Dữ liệu của bạn không rời khỏi thiết bị của bạn
CSS đầu vào
0 bytes
CSS đã định dạng
0 bytes

Định dạng CSS là gì?

Một trình định dạng CSS (còn gọi là "beautifier" hoặc "pretty-printer") nhận CSS ở mọi dạng, từ đầu ra production đã minify, các đoạn một-dòng dán từ Inspector của trình duyệt, đến stylesheet viết tay với cách thụt lề lộn xộn, rồi xuất lại với thụt lề theo quy ước, ngắt dòng và định dạng selector cùng declaration nhất quán. Trình phân tích CSS của trình duyệt bỏ qua khoảng trắng tại bước parse, nên trang đã render trông giống hệt bất kể nguồn được trình bày thế nào. Mục đích thuần túy là dễ đọc cho con người: thụt lề có thứ bậc làm hiện ra cấu trúc lồng @media, một thuộc tính một dòng giúp mắt lướt nhanh qua các declaration trong một rule, và định dạng nhất quán trên toàn repo giúp tăng tốc việc xem diff. Bốn quy trình thực tế: (1) debug CSS minify production dán từ DevTools Inspector để hiểu vì sao một rule không áp dụng; (2) định dạng lại CSS lấy từ panel "Computed" của trình duyệt để so sánh với mã nguồn; (3) chuẩn hóa khác biệt định dạng giữa các thành viên đội sau một merge từ người đóng góp dùng quy ước khác; (4) chuẩn bị CSS cho code review khi nguồn đã suy biến thành các dòng dồn dập.

Các trình định dạng CSS chính

js-beautify (Einar Lielmanis, từ 2007) là trình định dạng cổ điển trong hệ sinh thái JavaScript, nửa CSS của nó là phần chạy phía sau beautifier.io công khai và trong lịch sử đã chạy hàng chục site "format CSS online". Prettier (James Long, tháng 1 năm 2017; hỗ trợ CSS thêm trong v1.4 ngày 3 tháng 6 năm 2017) là trình định dạng "opinionated" đã trở thành chủ đạo trong hệ sinh thái frontend hiện đại. Triết lý thiết kế của Prettier là "gần như không cấu hình", một phong cách thụt lề duy nhất (mặc định 2 khoảng trắng), một mục tiêu độ rộng dòng duy nhất, một quy tắc xuống dòng dự đoán được. Đây là trình định dạng mặc định cho CSS trong VS Code khi cài extension Prettier. Stylelint (David Clark + Maxime Thirouin, 2015) thiên về linter hơn formatter, nhưng hỗ trợ format-on-save qua tùy chọn --fix và là lựa chọn mặc nhiên để áp đặt quy ước CSS trong nội bộ một đội, hơn 100 rule built-in của nó bao trùm từ "không có selector trùng" đến "ưu tiên hex hơn rgb()" đến "chỉ dùng nháy đơn". clean-css (Jakub Pawlowicz, 2011) chủ yếu để minify, nhưng có chế độ "beautify" làm ngược lại. Cả bốn cuối cùng đều đẩy CSS qua PostCSS (Andrey Sitnik, ra mắt 7 tháng 9 năm 2013), bộ phân tích CSS phổ quát chạy phía sau phần lớn hệ sinh thái CSS hiện đại (Autoprefixer, cssnano, phần xử lý của Tailwind). Cho dự án hiện đại năm 2026, Prettier-on-save là mặc định; công cụ trong-trình-duyệt này dành cho các trường hợp lẻ ngoài bối cảnh dự án.

Quy ước thụt lề và selector

Quy ước CSS năm 2026 nghiêng mạnh về thụt lề 2 khoảng trắng, mặc định trong Prettier, mã nguồn Tailwind, Code Guide của Bootstrap, Google CSS Style Guide, và phần lớn các gói CSS phát hành trên npm. Quy ước cũ 4 khoảng trắng vẫn còn ở một số codebase legacy. Tab hiếm trong CSS một cách cụ thể (phổ biến hơn ở JS/TS). Với selector: danh sách selector ngăn cách bằng dấu phẩy theo quy ước viết mỗi cái một dòng (.btn,<br>.btn-primary,<br>.btn-secondary {), giúp dễ thêm hoặc xóa selector mà không phải bố trí lại dòng. Các combinator (>, +, ~) thường có một khoảng trắng mỗi bên. Chuỗi pseudo-class (:hover:focus) giữ dính nhau. Selector phổ quát (*) và combinator hậu duệ (khoảng trắng ngầm) là trung tính với formatter.

Định dạng declaration

Một declaration một dòng là mặc định hiện đại, color: red; trên dòng riêng, padding: 10px; trên dòng kế. Cách viết "compact" thay thế (nhiều declaration trên cùng một dòng) hiếm trong CSS production hiện nay; phần lớn các đội đã chuyển sang một-một để dễ đọc và diff sạch. Một khoảng trắng sau dấu hai chấm: color: red; chứ không phải color:red;. Dấu chấm phẩy cuối ở declaration cuối: về kỹ thuật là tùy chọn theo spec CSS, nhưng mọi formatter hiện đại đều thêm vào để diff thân thiện, thêm thuộc tính mới không yêu cầu sửa dòng trước. Dòng trống giữa các rule: tùy chọn và phụ thuộc đội. Prettier giữ nguyên các dòng trống có sẵn trong đầu vào thay vì áp đặt một phong cách cụ thể. Dấu nháy quanh thuộc tính: tên phông có khoảng trắng đòi hỏi nháy (font-family: "Helvetica Neue", sans-serif;); URL theo quy ước được nháy (url("image.png")) dù không nháy vẫn hợp lệ. Chuẩn hóa giá trị: keyword về chữ thường (RED → red), rút gọn hex (#FFFFFF → #fff), bỏ đơn vị khi giá trị là không (0px → 0), phần lớn thuộc về minifier hơn formatter, nhưng một số formatter áp dụng những phép biến đổi không mất mát.

Các trường hợp CSS đặc biệt

Các truy vấn @media lồng các rule bên trong với một mức thụt lề bổ sung, làm cho cấu trúc điều kiện hiện rõ về thị giác. Khối @keyframes chứa các rule theo phần trăm (0% { ... }, 100% { ... }) lồng theo cùng cách. Khai báo @font-face có nhiều cặp src/format mà sẽ rõ ràng hơn nếu mỗi cặp một dòng. Thuộc tính tùy biến CSS (--brand-color: #3b82f6;) được định dạng như mọi declaration khác, nhưng tên thuộc tính giữ nguyên kiểu chữ (tên thuộc tính tùy biến phân biệt hoa thường, khác với thuộc tính chuẩn). Biểu thức calc() đòi hỏi khoảng trắng quanh toán tử, calc(100% - 20px) là đúng, calc(100%-20px) là CSS không hợp lệ. Formatter giữ các khoảng trắng cần thiết bên trong calc() trong khi chuẩn hóa ngữ cảnh xung quanh. CSS Nesting (CSS Nesting Module Level 1, baseline 2023+), một tính năng tương đối mới cho phép các rule lồng thụt lề dưới rule cha, đã thay đổi cách formatter xử lý cú pháp lồng; Prettier hiện đại và Stylelint đều hiểu cú pháp gốc.

Sắp xếp thuộc tính, một quy ước gây tranh cãi không ngờ

Một số đội áp đặt thứ tự thuộc tính bên trong mỗi rule. Có ba quy ước cạnh tranh nhau. Theo bảng chữ cái (toggle "Sắp xếp thuộc tính" của công cụ này): đơn giản nhất, dễ áp đặt một cách máy móc, biến câu hỏi "thuộc tính X đã được khai báo ở đây chưa?" thành một lần lướt nhanh. Google CSS Style Guide khuyến nghị thứ tự bảng chữ cái với nhượng bộ cho các tiền tố vendor. Theo khái niệm (vị trí → hộp → typography → thị giác → animation): nhóm các thuộc tính liên quan lại với nhau. Cuốn sách kiến trúc SMACSS phổ biến cách tiếp cận này. Theo loại (display trước, rồi hộp, rồi văn bản, rồi linh tinh): biến thể của "theo khái niệm" với các nhóm cứng nhắc hơn. Rule order/properties-order của Stylelint hỗ trợ bất kỳ cách nào trong số đó qua cấu hình. Không cách nào trong ba cải thiện kết quả render; lựa chọn phụ thuộc thuần túy vào mô hình tinh thần bạn thấy dễ hơn khi lướt qua một rule. Công cụ này cung cấp sắp xếp theo bảng chữ cái như tùy chọn; với các quy ước khác, bạn cần tệp cấu hình Stylelint trong dự án thật.

Pipeline CSS hiện đại

Cho các dự án có pipeline build, mặc định năm 2026 là Prettier chạy on-save trong trình soạn thảo và Stylelint ở mỗi commit qua Husky + lint-staged. VS Code nhúng Prettier làm formatter mặc định cho tệp CSS, SCSS và LESS khi có cài extension. Pre-commit hook qua Husky chạy Stylelint và Prettier trên các tệp đã staged trước khi cho phép commit. Kiểm tra CI chạy stylelint --check và prettier --check trên pull request. Sau định dạng ở giai đoạn phát triển, CSS production đi qua cssnano (dựa trên PostCSS, chuẩn minify hiện đại) làm ngược lại mọi thứ formatter đã làm để cho ra byte nén dùng để gửi đi. Không điều nào trong số đó quan trọng cho các đoạn lẻ dán từ nơi khác, đó chính xác là điều công cụ trong-trình-duyệt này phục vụ. Cho công việc dự án dài hạn, hãy thiết lập Prettier + Stylelint trong môi trường local; công cụ trong-trình-duyệt là lựa chọn không ma sát cho mọi thứ còn lại.

Các trường hợp sử dụng phổ biến

Quyền riêng tư: vì sao chạy hoàn toàn trong trình duyệt là quan trọng ở đây

CSS hiếm khi chứa bí mật rõ ràng, nhưng stylesheet độc quyền lại tiết lộ thông tin về phân loại class nội bộ của một site, các token của design system, các giả định A/B test mã hóa trong tên selector, và các tính năng chưa phát hành. Các formatter phía server upload CSS của bạn lên dịch vụ bên thứ ba nơi nó còn lại trong log. Công cụ này chạy hoàn toàn trong trình duyệt qua JavaScript, hãy kiểm chứng trong tab Network của DevTools khi bạn bấm Format, hoặc đặt trang offline (chế độ máy bay) sau khi đã tải xong và formatter vẫn hoạt động. An toàn cho stylesheet độc quyền, tệp nguồn-sự-thật của design system, các biến thể A/B test, hoặc bất kỳ CSS nào bạn không muốn bị sao vào ổ cứng của người lạ.

Câu hỏi thường gặp

Làm đẹp CSS là gì?

Làm đẹp CSS định dạng lại mã của bạn để dễ đọc hơn bằng cách thêm thụt lề chính xác và xuống dòng. Đây là điều ngược lại với minify và làm cho việc gỡ lỗi dễ dàng hơn nhiều.

Khi nào sử dụng CSS đã minify?

CSS đã minify loại bỏ tất cả các khoảng trắng và phù hợp nhất với sản xuất để giảm kích thước và băng thông. Sử dụng CSS đã làm đẹp trong phát triển để dễ gỡ lỗi hơn. Nhiều công cụ build tự động minify khi triển khai.

Sắp xếp các thuộc tính theo bảng chữ cái dùng để làm gì?

Tùy chọn này phân loại các thuộc tính CSS theo thứ tự bảng chữ cái trong mỗi quy tắc (vd: border trước color trước display). Một số nhà phát triển thích cách tiếp cận này để duyệt dễ dàng hơn, mặc dù nó không ảnh hưởng đến việc render CSS.

"Một thuộc tính một dòng" có tác dụng gì?

Đặt mỗi declaration trên dòng riêng, color: red; một dòng, padding: 10px; dòng kế, thay vì xếp chồng chúng lên một dòng duy nhất. Mặc định hiện đại trong gần như mọi CSS production, vì nó làm diff sạch hơn (thêm thuộc tính = thêm dòng, không sửa một dòng) và làm mỗi declaration dễ đọc riêng. Chiều ngược lại, nhiều declaration mỗi dòng, hiếm trong mã production năm 2026 ngoài các đoạn rất compact của một rule duy nhất.

Có nên dùng nếu dự án của tôi đã dùng Prettier hoặc Stylelint?

Có thể không, tích hợp Prettier trong trình soạn thảo của bạn đã làm việc đó on-save, với nhận thức đầy đủ về AST CSS qua PostCSS, và Stylelint áp đặt quy ước đội ở mỗi commit. Công cụ này dành cho các tình huống pipeline build của bạn không bao phủ: CSS dán từ Inspector của trình duyệt, đoạn từ email hoặc Stack Overflow, định dạng lẻ ngoài mọi bối cảnh dự án. Cho công việc dự án dài hạn, hãy thiết lập Prettier + Stylelint trong local; cho công việc lẻ không ma sát, công cụ này là dạng phù hợp.

Tệp CSS của tôi có bị tải lên không?

Không. Việc định dạng chạy hoàn toàn trong trình duyệt qua JavaScript. CSS bạn dán không bao giờ đi qua mạng, hãy kiểm chứng trong tab Network của DevTools khi bạn bấm Format, hoặc đặt trang offline (chế độ máy bay) sau khi đã tải xong và công cụ vẫn hoạt động. An toàn cho stylesheet độc quyền, tệp nguồn-sự-thật của design system, các biến thể A/B test, hoặc bất kỳ CSS nào bạn không muốn bị sao vào ổ cứng của người lạ.

Công cụ liên quan

Bộ minify CSS

Minify CSS bằng cách loại bỏ comment và khoảng trắng.

Bộ định dạng HTML

Định dạng và làm đẹp mã HTML với thụt lề sạch sẽ.

Bộ minify JavaScript

Minify JavaScript bằng cách loại bỏ comment và khoảng trắng.