Cách làm đẹp CSS hoạt động
Trình làm đẹp đọc stylesheet của bạn từng ký tự một, theo dõi mức độ lồng nhau của mỗi khối và phát lại với khoảng cách nhất quán. Nó không bao giờ thay đổi những gì các style thực hiện — chỉ thay đổi cách chúng trông trong file.
- Phân tách token. Thư viện quét đầu vào của bạn thành một luồng token: selector, tên thuộc tính, giá trị, at-rule, chú thích, và các dấu ngoặc nhọn, dấu hai chấm và dấu chấm phẩy phân tách chúng. Chuỗi và giá trị url() được nhận dạng là các đơn vị đơn, vì vậy một dấu ngoặc nhọn bên trong thuộc tính content không bao giờ bị nhầm với dấu phân cách khối.
- Theo dõi lồng nhau. Khi đi qua luồng token, trình làm đẹp duy trì mức thụt lề hiện tại. Mỗi dấu ngoặc nhọn mở làm sâu thêm mức — dù nó thuộc về rule block, media query hay keyframes block — và mỗi dấu ngoặc đóng đưa nó về. Độ sâu đó quyết định bao nhiêu đơn vị thụt lề đứng trước mỗi dòng bạn nhận lại.
- Áp dụng tùy chọn của bạn. Lựa chọn thụt lề của bạn (2 dấu cách, 4 dấu cách hoặc tab) đặt độ rộng của một mức. Cài đặt brace-style quyết định liệu dấu ngoặc nhọn mở có bám vào selector trước nó hay rơi xuống dòng riêng. Các toggle còn lại thêm dòng trống giữa các rule block và tách các selector nhóm ra các dòng riêng.
- Phát lại. Cuối cùng trình định dạng in các token trở lại với thụt lề và xuống dòng đã tính toán, đặt một khai báo mỗi dòng và một dấu cách sau mỗi dấu hai chấm. Kết quả là cùng một stylesheet, được trình bày để con người có thể duyệt qua cascade.
Tại sao làm đẹp CSS
- Đọc stylesheet đã rút gọn. CSS production được gửi trên một dòng không có khoảng cách giữa các quy tắc. Làm đẹp khôi phục các xuống dòng và thụt lề để bạn có thể tìm selector đằng sau lỗi layout và thấy chính xác các khai báo nào nó đặt, ngay cả khi không có source map.
- Dọn dẹp các file không nhất quán. Stylesheet do nhiều người chỉnh sửa bị lẫn lộn thụt lề và kiểu dấu ngoặc. Một lần qua trình làm đẹp chuẩn hóa toàn bộ file về một bố cục duy nhất, khiến diff tiếp theo hiển thị các thay đổi cascade thực sự thay vì nhiễu khoảng trắng.
- Công cụ này không làm chậm trang của bạn. Hầu hết các trình định dạng trực tuyến tải toàn bộ thư viện ngay khi bạn mở trang. Công cụ này lazy-load js-beautify chỉ khi bạn nhấp Làm đẹp hoặc bật Chế độ trực tiếp, vì vậy mở trang chỉ tốn vài kilobyte thay vì vài trăm, và render ban đầu vẫn nhanh.
- Không có gì rời khỏi trình duyệt của bạn. Trình làm đẹp chạy hoàn toàn trên thiết bị của bạn. CSS của bạn không bao giờ được tải lên server, điều này quan trọng khi stylesheet bạn đang kiểm tra thuộc về khách hàng, chứa các tên lớp nội bộ hoặc thuộc phạm vi thỏa thuận bảo mật.
Ứng dụng phổ biến
Làm đẹp CSS xuất hiện bất cứ khi nào ai đó cần đọc stylesheet không được viết để đọc.
- Gỡ lỗi production: dán stylesheet đã rút gọn lấy từ tab Network để tìm quy tắc đang ghi đè layout bạn mong đợi.
- Chuẩn bị code review: định dạng lại stylesheet của contributor có thụt lề không nhất quán trước khi mở pull request để người đánh giá thấy các thay đổi cascade, không phải sự lộn xộn bố cục.
- Học tập và kiểm tra: mở rộng stylesheet của framework hoặc thư viện component để nghiên cứu cách các selector, media query và custom property được cấu trúc.
Một ví dụ thực tế
Lấy một dòng đã rút gọn: a{color:red;margin:0}b{padding:0}. Dán vào trên với thụt lề đặt là 2 dấu cách và brace style Thu gọn, sau đó nhấp Làm đẹp. Bạn nhận lại các khối dễ đọc: a { trên dòng riêng, các khai báo color: red; và margin: 0; mỗi cái thụt lề sâu hơn một mức, dấu ngoặc đóng thẳng hàng dưới selector, và quy tắc b tiếp theo bên dưới. Chuyển brace style thành Mở rộng và mỗi dấu ngoặc nhọn mở rơi xuống dòng riêng. Thay đổi thụt lề thành Tab và mỗi mức chuyển từ hai dấu cách sang ký tự tab. Các style hoàn toàn giống nhau; chỉ bố cục thay đổi.
FAQ
Công cụ này chạy trong trình duyệt của tôi không?
Có. Thư viện js-beautify được lazy-load lần đầu tiên bạn nhấp Làm đẹp hoặc bật Chế độ trực tiếp, sau đó được cache. CSS của bạn không bao giờ rời khỏi trang — không có round-trip đến server và không có upload.
Làm đẹp có giống với bỏ rút gọn không?
Nó khôi phục định dạng dễ đọc — thụt lề, xuống dòng và khoảng cách — nhưng không thể lấy lại các chú thích mà quá trình rút gọn đã loại bỏ hoặc phục hồi bất kỳ cấu trúc nào chưa từng có trong file. Nó chỉ định dạng lại các khai báo và selector đang có mặt.
Làm đẹp có thay đổi cách style của tôi render không?
Không. Làm đẹp chỉ thêm và xóa khoảng trắng và xuống dòng; cascade không bị chạm và trang render giống hệt. Thứ tự thuộc tính, độ ưu tiên và các giá trị đều giữ nguyên chính xác như bạn đã viết.
Các tùy chọn brace-style có nghĩa là gì?
Thu gọn giữ dấu ngoặc nhọn mở trên cùng dòng với selector (a {), là quy ước CSS phổ biến. Mở rộng thả mỗi dấu ngoặc nhọn mở xuống dòng riêng bên dưới selector. Các toggle dòng trống và một selector mỗi dòng kiểm soát khoảng cách giữa các rule block và cách các selector nhóm như h1, h2, h3 được sắp xếp.
Làm đẹp CSS phía trình duyệt cho bạn stylesheet dễ đọc mà không cần bước build hay upload. Dán file đã rút gọn hoặc lộn xộn, chọn thụt lề và kiểu dấu ngoặc của bạn, rồi sao chép hoặc tải về kết quả. Không có gì rời khỏi thiết bị của bạn, không có tài khoản và thư viện chỉ tải khi bạn yêu cầu — vì vậy mở trang này chỉ tốn vài kilobyte, không phải một megabyte.