Khôi phục định dạng CSS trực tuyến
Thả bảng định kiểu đã rút gọn vào để đọc lại rõ ràng. Bộ chọn được tách dòng, mỗi khai báo nằm trên một dòng, các khối và truy vấn media được thụt lề như khi bạn tự viết.
Vì sao CSS khi triển khai chỉ có một dòng dài
CSS được rút gọn vì lý do tương tự mã JavaScript: bảng định kiểu chặn quá trình hiển thị, nên giảm từng byte có thể giúp trang xuất hiện nhanh hơn. cssnano, Lightning CSS và các bước tối ưu trong quy trình Sass hoặc PostCSS loại bỏ khoảng trắng, chú thích, rút ngắn giá trị màu, gộp quy tắc trùng và bỏ dấu chấm phẩy cuối khối. Framework tiện ích còn khiến kết quả dày đặc hơn, vì một bảng định kiểu Tailwind đã biên dịch có thể chứa hàng nghìn quy tắc nhỏ gần như không có khoảng cách giữa chúng.
Đọc lại cơ chế xếp chồng CSS
Lý do chính để làm đẹp bảng định kiểu là hiểu vì sao một quy tắc có hoặc không được áp dụng. Khi mỗi bộ chọn nằm trên dòng riêng với các khai báo thụt lề bên dưới, bạn có thể theo dõi cơ chế xếp chồng: tìm mọi quy tắc tác động lên phần tử, so sánh độ ưu tiên, xem quy tắc nào xuất hiện sau và phát hiện khai báo !important đang ghi đè thay đổi của mình. Truy vấn media cùng nội dung của chúng trở thành những khối rõ ràng, giúp truy tìm hành vi đáp ứng dễ hơn nhiều so với tệp đã rút gọn.
Hỗ trợ CSS hiện đại
Trình định dạng hiểu cú pháp CSS hiện tại, bao gồm thuộc tính tùy chỉnh, biểu thức calc và clamp, cách viết gọn cho grid và flexbox, truy vấn container, quy tắc lồng nhau, lớp cascade, khối supports và keyframes. Danh sách bộ chọn dài được ngắt dòng để dễ đọc, còn chú thích chưa bị loại bỏ trong bước dựng ứng dụng được giữ lại. Nếu tệp dùng cả thuộc tính chuẩn và thuộc tính có tiền tố riêng của trình duyệt, công cụ vẫn giữ chúng, chỉ sắp xếp cách trình bày cho rõ ràng.
Mẹo đọc CSS đã biên dịch từ framework
Khi làm đẹp bảng định kiểu Tailwind hoặc Bootstrap đã biên dịch, kết quả có thể rất dài, đến hàng chục nghìn dòng là bình thường. Hãy bật số dòng rồi dùng chức năng tìm kiếm của trình duyệt để tìm tên lớp hoặc thuộc tính cần xem. Nếu mục tiêu là giảm kích thước tệp, bạn cần kiểm tra cấu hình dựng ứng dụng. Các quy tắc không dùng đến thường đã được tạo trước khi bước rút gọn bắt đầu, và định dạng lại không loại bỏ chúng.
Câu hỏi thường gặp
Có khôi phục định dạng bảng định kiểu Tailwind đã biên dịch không?
Có, đây là một cách dùng rất phổ biến của trang này. Kết quả có thể dài vì framework tạo nhiều quy tắc cho các lớp tiện ích. Bật số dòng và dùng chức năng tìm kiếm của trình duyệt là cách thiết thực để tra cứu.
Chú thích có được khôi phục không?
Chỉ những chú thích còn trong tệp mới được giữ lại. Hầu hết công cụ rút gọn xóa chú thích, trừ một số thông báo pháp lý. Khi đã bị xóa, chúng không thể được khôi phục. Trình định dạng giữ lại và trình bày rõ ràng những chú thích còn tồn tại.
Có dùng được với SCSS hoặc Less không?
Trang này dành cho CSS thuần, là nội dung trình duyệt thực sự tải xuống. Mã nguồn tiền xử lý có biến, mixin và cú pháp lồng riêng của SCSS hoặc Less không phải đầu vào được nhắm tới. Cú pháp lồng nhau chuẩn của CSS vẫn được hỗ trợ.