Công cụ định dạng & làm đẹp CSS

Công cụ định dạng CSS làm gì?

Công cụ định dạng CSS nhận mã stylesheet ở bất kỳ dạng nào, như bị nén thành một dòng, thụt lề lộn xộn hoặc sao chép từ DevTools của trình duyệt, rồi viết lại theo bố cục nhất quán: selector, dấu ngoặc nhọn mở, mỗi khai báo property: value; một dòng và dấu ngoặc nhọn đóng nằm riêng trên một dòng. Các quy tắc bên trong khối @media, @supports và @container sẽ được thụt lề thêm một cấp để cấu trúc dễ nhìn.

Định dạng là bước đầu tiên khi bạn cần gỡ lỗi một theme bên thứ ba, review CSS trong pull request hoặc học hỏi từ style của trang khác. Công cụ này sử dụng js-beautify và chạy hoàn toàn trên trình duyệt của bạn.

Trước và sau khi định dạng

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

sẽ thành

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

Lưu ý rằng công cụ không thêm hay xóa dấu chấm phẩy, không đổi thứ tự thuộc tính và không thay đổi giá trị. Nó chỉ điều chỉnh khoảng trắng, nên kết quả hoạt động y hệt như đầu vào.

SCSS, Less và CSS hiện đại

Các quy tắc lồng nhau, selector cha &, biến ($brand, @brand), mixin và CSS nesting gốc đều được thụt lề đúng. Custom property (--brand: #4f46e5), clamp(), :is()/:where() và cascade layer (@layer) được giữ nguyên.

Quy ước viết style nên áp dụng

• Thụt lề hai khoảng trắng là chuẩn phổ biến trong hầu hết các style guide CSS và cũng là mặc định của Prettier.
• Một selector mỗi dòng trong nhóm selector giúp diff gọn hơn khi bạn thêm hoặc xóa selector.
• Dòng trống giữa các quy tắc giúp dễ đọc lướt trong các file dài.
• Tự động hóa việc định dạng: chạy Prettier hoặc Stylelint trong editor và CI để việc định dạng không bao giờ xuất hiện trong code review.

Chuẩn bị đưa lên production? Dùng CSS Minifier để xem chính xác bạn tiết kiệm được bao nhiêu byte, hoặc chọn Minify ở trên. Nếu muốn đổi giá trị pixel sang rem luôn, hãy thử công cụ chuyển PX sang REM.

Cũng được tìm dưới tên: làm đẹp css, css beautifier, format css online, unminify css, css prettifier, định dạng scss, css indent.

Các công cụ dùng kèm tốt với Định dạng CSS

• Định dạng HTML — Dán mã HTML đã nén hoặc lộn xộn và nhận lại HTML được thụt lề rõ ràng, nhất quán — bao gồm cả các khối <style> và <script> nhúng bên trong.
• Định dạng JavaScript — Giải nén và định dạng lại JavaScript, JSON hoặc JSX với kiểu thụt lề và dấu ngoặc bạn chọn, hoặc loại bỏ khoảng trắng và chú thích bằng bộ thu gọn đã được kiểm chứng.
• Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
• Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.