Định dạng CSS

Định Dạng CSS Là Gì?

Định dạng CSS là quá trình thêm thụt lề, ngắt dòng và khoảng cách nhất quán vào các tệp Cascading Style Sheets để mã nguồn dễ đọc với con người. Trình duyệt hoàn toàn bỏ qua khoảng trắng trong CSS. Một dòng code rút gọn và một stylesheet thụt lề gọn gàng cho kết quả hiển thị giống hệt nhau. Sự khác biệt nằm ở khả năng đọc: CSS đã định dạng giúp bạn dễ dàng lướt qua các selector, phát hiện dấu chấm phẩy còn thiếu, và hiểu cơ chế cascade chỉ trong một cái nhìn.

Một công cụ định dạng CSS (đôi khi gọi là CSS beautifier hoặc pretty-printer) nhận CSS bị nén hoặc có định dạng không nhất quán và viết lại với thụt lề đồng nhất, mỗi khai báo trên một dòng riêng, và dấu ngoặc nhọn được đặt theo quy tắc thống nhất. Đây là thao tác ngược lại của quá trình nén, còn gọi là beautification hay pretty-printing. Trong khi nén loại bỏ khoảng trắng để giảm kích thước file cho môi trường production, định dạng khôi phục cấu trúc phục vụ cho giai đoạn phát triển, review code và bảo trì codebase.

Đặc tả CSS (W3C CSS Syntax Module Level 3) định nghĩa ngữ pháp cho stylesheet, nhưng không quy định bất kỳ quy ước về khoảng trắng nào. Quy tắc định dạng là quyết định của từng nhóm: dùng tab hay dấu cách, thụt lề 2 hay 4 dấu cách, kiểu đặt dấu ngoặc, dòng trống giữa các rule set. Một công cụ định dạng áp dụng nhất quán bất kỳ quy ước nào bạn chọn, trên toàn bộ mọi file. Hầu hết các nhóm ghi lại lựa chọn của mình trong file .prettierrc hoặc .editorconfig.

Tại Sao Dùng Công Cụ Định Dạng CSS Này?

Dán bất kỳ đoạn CSS nào và nhận kết quả đã thụt lề đúng trong vài mili giây. Không cần cài plugin cho trình soạn thảo, không cần viết file cấu hình, không cần tạo tài khoản.

Các Trường Hợp Sử Dụng Công Cụ Định Dạng CSS

Tham Chiếu Thứ Tự Thuộc Tính CSS

Hầu hết các công cụ định dạng CSS không sắp xếp lại thuộc tính. Nhưng nhiều hướng dẫn phong cách khuyến nghị gom các thuộc tính liên quan lại với nhau. Bảng dưới đây cho thấy một quy ước nhóm phổ biến được sử dụng bởi các công cụ như plugin order của Stylelint và CSScomb:

Cách nhóm này là một quy ước, không phải yêu cầu của CSS. Trình duyệt áp dụng các khai báo dựa trên specificity và thứ tự xuất hiện, bất kể vị trí thuộc tính trong rule block. Công cụ định dạng tập trung vào khoảng trắng và thụt lề; việc sắp xếp lại thuộc tính là mối quan tâm linting riêng biệt do các công cụ như Stylelint xử lý.

Định Dạng CSS và Nén CSS

Định dạng và nén là các thao tác ngược nhau, được áp dụng ở các giai đoạn phát triển khác nhau:

Ví Dụ Code

Cách định dạng CSS theo chương trình trong các ngôn ngữ và môi trường khác nhau:

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

Câu Hỏi Thường Gặp