Format CSS

Tại sao format CSS được coi trọng

CSS không cần whitespace. Trình duyệt parse a{color:red} và a { color: red; } giống hệt nhau. Nhưng con người không đọc chúng như nhau. Stylesheet đến dưới dạng một dòng dài gần như không thể phân tích — bạn không thể thấy ranh giới rule, chuỗi selector, hay nhóm declaration.

Format CSS cũng là điều kiện tiên quyết cho version control hữu ích. Một git diff trên CSS đã minify hiển thị một dòng thay đổi khổng lồ ngay cả khi chỉ một giá trị màu thay đổi. CSS đã beautify hiển thị chính xác property nào thay đổi, trên selector nào, trong rule block nào.

Một selector mỗi dòng — tại sao quan trọng cho diff và readability

Selector nhóm như:

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

ổn để đọc, nhưng code review thêm h6 hoặc bỏ h4 sẽ sửa một dòng hỗn hợp. Diff bị nhiễu. Form đã beautify đặt mỗi selector trên dòng riêng:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

Giờ thêm hoặc bỏ một heading level là diff một dòng sạch. Đây là hành vi mặc định của chế độ CSS trong js-beautify và format Prettier dùng cho CSS.

Readability của specificity

CSS specificity xác định rule nào thắng khi hai rule nhắm cùng element. Phép tính (inline style → ID → class/attribute → element) dễ phân tích hơn khi mỗi rule được thụt lề đầy đủ và cô lập. Stylesheet đã minify làm phẳng mọi thứ thành một dòng — bạn phải phân tích cascade ở mức ký tự.

Trong development, giữ CSS đã beautify. Trong code review, diff đã format làm xung đột specificity hiện rõ trước khi lên production.

Minification: tiết kiệm byte thực tế

Minify CSS loại bỏ:

• Toàn bộ whitespace giữa các token (khoảng trắng, tab, newline)
• Comment (/* ... */)
• Dấu chấm phẩy cuối trong rule block (declaration cuối trước } không cần)
• Số 0 đứng đầu trong decimal (0.5em → .5em)

Stylesheet thực tế có thể giảm 25–40% sau khi minify. Điểm mấu chốt: HTTP compression (gzip hoặc brotli) hiệu quả hơn nhiều so với loại whitespace thô. Gzip thường đạt 60–80% compression trên CSS vì whitespace rất lặp lại và compress tốt:

| File | Thô | Sau minify | Sau gzip | Sau minify + gzip | |------|-----|-----------|---------|------------------| | bootstrap.css | 187 KB | 153 KB | 26 KB | 24 KB |

Quyết định đúng: bật gzip/brotli trên server của bạn (hầu hết đều bật mặc định), và cũng minify CSS trong build pipeline. Kết hợp cả hai cho kết quả tốt nhất.

CSS Nesting (CSS Nesting Module Level 1)

CSS hiện đại hỗ trợ nesting không cần preprocessor. CSS Nesting Module Level 1 (hiện được hỗ trợ trên tất cả evergreen browser) cho phép:

.card {
  padding: 1rem;

  & .title {
    font-size: 1.25rem;
  }

  &:hover {
    background: var(--color-hover);
  }
}

Chế độ CSS của js-beautify giữ nguyên thụt lề nesting đúng cách. Minification thu gọn nesting về dạng whitespace tối thiểu trong khi giữ cấu trúc nesting hợp lệ — nó không "de-nest" về CSS phẳng.

Shorthand vs longhand trong output đã minify

CSS shorthand như margin: 0 auto nhỏ hơn margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto. Tuy nhiên, tự động chuyển longhand sang shorthand trong quá trình minify là rủi ro vì shorthand reset tất cả sub-property, không chỉ những cái bạn liệt kê. Minifier chuyển đổi shorthand một cách mù quáng có thể thay đổi hành vi cascade.

js-beautify không tối ưu shorthand — nó chỉ loại whitespace. Để tối ưu shorthand, các tool như cssnano với plugin postcss-merge-longhand xử lý điều này với phân tích cascade đúng.

Source map để debug CSS đã minify

Khi phục vụ CSS đã minify trong production, generate source map để browser DevTools hiển thị dòng và file gốc đã beautify ngay cả khi chạy code đã minify:

# PostCSS với cssnano
npx postcss styles.css --use cssnano -o styles.min.css --map

File .map kết quả ánh xạ byte offset đã minify về dòng source gốc. DevTools tự động fetch nó khi file đã minify có /*# sourceMappingURL=styles.min.css.map */ ở cuối.

Sử dụng js-beautify cho CSS

import beautify from 'js-beautify';

const pretty = beautify.css(rawCss, {
  indent_size: 2,
  selector_separator_newline: true,  // một selector mỗi dòng
  end_with_newline: true,
  newline_between_rules: true,
});

Để minify production, ưu tiên cssnano (PostCSS) hoặc lightningcss (Rust, cực nhanh):

import { transform } from 'lightningcss';

const { code } = transform({
  filename: 'styles.css',
  code: Buffer.from(rawCss),
  minify: true,
  sourceMap: true,
});

Quyền riêng tư

Toàn bộ xử lý CSS chạy hoàn toàn trên trình duyệt. Style của bạn không bao giờ được gửi lên server.

Beautify CSS có thay đổi cách style áp dụng không?

Không. CSS whitespace bên ngoài giá trị string và property content không có ý nghĩa với parser trình duyệt. Thụt lề, newline giữa các rule, và khoảng trắng xung quanh dấu hai chấm đều bị bỏ qua lúc render. Computed style trang của bạn tạo ra hoàn toàn giống nhau trước và sau khi format.

Tại sao một selector mỗi dòng là mặc định trong CSS đã beautify?

Đặt mỗi selector trên dòng riêng tạo ra git diff sạch hơn. Khi selector nhóm như h1, h2, h3 { ... } thêm hoặc bỏ một entry, format một dòng đánh dấu toàn bộ dòng selector là đã thay đổi. Một-selector-mỗi-dòng nghĩa là thêm h4 hoặc bỏ h2 hiển thị là diff một dòng không có nhiễu. Đây cũng là lý do Prettier dùng format này cho CSS mặc định.

CSS minification thực sự tiết kiệm được bao nhiêu?

Loại whitespace thô thường giảm CSS 20–40% tùy style coding. Tuy nhiên, yếu tố quan trọng hơn là HTTP compression: gzip giảm CSS 60–80% vì whitespace rất lặp lại. Minification và gzip bổ sung cho nhau — dùng cả hai trong production. Minify trước trong build pipeline, rồi để CDN hoặc server áp dụng gzip/brotli lên trên. Kết quả kết hợp luôn tốt hơn từng kỹ thuật riêng lẻ.

Tool này có hỗ trợ CSS Nesting không?

Có. js-beautify giữ nguyên cú pháp CSS Nesting (CSS Nesting Module Level 1, được hỗ trợ trên tất cả evergreen browser) bao gồm selector &. Cả chế độ beautify lẫn minify đều xử lý rule lồng nhau mà không de-nest chúng về CSS phẳng.

Tùy chọn selector separator là gì?

Nó kiểm soát cách các selector trong rule nhóm được phân tách. Đặt thành newline (mặc định) cho một selector mỗi dòng — ưu tiên để dễ đọc và diff. Đặt thành khoảng trắng cho selector nhóm compact trên một dòng. Cả hai không thay đổi cách rule được áp dụng; chỉ là preference format.

Nên dùng tool này hay tích hợp cssnano vào build pipeline?

Cả hai. Dùng tool này cho format ad-hoc — paste CSS snippet, dọn dẹp stylesheet một lần, hoặc kiểm tra CSS bên thứ ba. Để minify production tự động, tích hợp cssnano (PostCSS) hoặc lightningcss (Rust, cực nhanh) vào build step. Tool pipeline còn có thể merge shorthand, deduplicate và loại bỏ dead code mà browser-based tool không thể làm được.

Làm sao debug CSS đã minify trong production?

Generate source map trong quá trình build (--map flag trong PostCSS, sourceMap: true trong lightningcss). File map liên kết byte offset đã minify về dòng source gốc. Browser DevTools tự động fetch map và hiển thị file và số dòng gốc khi bạn inspect element được style, dù trình duyệt đang tải file đã minify.

Minify CSS có xóa comment không?

Có — CSS minification tiêu chuẩn loại bỏ tất cả comment /* ... */. Nếu bạn có comment quan trọng phải giữ lại (copyright header, giấy phép), dùng convention !: /*! Copyright ... */. Hầu hết minifier giữ lại comment bắt đầu bằng !. Để giữ license header trong production, dùng cssnano với { discardComments: { removeAllButFirst: true } }.