Trích biến CSS từ stylesheet: liệt kê theo scope, dò biến thừa biến thiếu và xuất sang design token
Công cụ đọc nguyên một file CSS, gom toàn bộ custom property dạng hai dấu gạch ngang thành một bảng, nhóm theo scope khai báo gồm :root, selector riêng và khối media query. Nó chỉ ra biến khai báo mà không ai dùng, biến được gọi mà chưa khai báo ở đâu, giải luôn các chuỗi tham chiếu lồng nhau, rồi xuất lại thành khối CSS gọn hoặc thành tệp design token JSON.
Tính năng nổi bật
- Đọc toàn bộ custom property trong file, kể cả khai báo nằm trong khối media query lồng nhau
- Nhóm biến theo scope khai báo và đếm số biến của từng scope
- Giải chuỗi tham chiếu var lồng nhau và hiển thị giá trị cuối cùng của từng biến
- Chỉ ra biến khai báo mà không có lời gọi nào trong file
- Chỉ ra biến được gọi nhưng chưa khai báo, kèm giá trị dự phòng nếu có
- Phát hiện vòng lặp tham chiếu khiến trình duyệt coi biến là không hợp lệ
- Xuất lại thành khối CSS theo từng scope, chọn giữ nguyên var hoặc thay bằng giá trị đã giải
- Xuất sang JSON design token có suy đoán kiểu màu, kích thước, thời lượng, bộ chữ
Hệ biến CSS phình ra rất nhanh và không có gì tự cảnh báo bạn
Một dự án bắt đầu với mười lăm biến trong khối gốc, ai cũng nắm được. Sáu tháng sau con số thành một trăm hai mươi, nằm rải ở bốn tệp, có biến đặt tên theo màu, có biến đặt tên theo công dụng, có biến trỏ vào biến khác ba tầng, và có cả một nhóm biến sót lại từ đợt đổi giao diện năm ngoái mà không ai dám xóa vì không chắc còn chỗ nào dùng. Điểm khó chịu của custom property là trình duyệt không bao giờ báo lỗi. Gọi một biến chưa khai báo thì khai báo đó bị coi như không hợp lệ và bị bỏ qua âm thầm, phần tử rơi về giá trị kế thừa hoặc giá trị mặc định, giao diện lệch một chút mà không có dòng cảnh báo nào trong bảng điều khiển. Khai báo một biến không ai dùng thì càng không có gì xảy ra, nó chỉ nằm đó làm nặng tệp và làm rối người đọc sau. Công cụ này làm đúng phần việc mà trình duyệt không làm: đối chiếu danh sách khai báo với danh sách lời gọi, rồi nói cho bạn biết hai bên lệch nhau ở đâu.
Lợi ích khi sử dụng
- Thấy được toàn bộ hệ biến của dự án trên một màn hình thay vì cuộn qua nhiều tệp
- Xóa biến thừa một cách yên tâm vì có bằng chứng không chỗ nào gọi tới
- Bắt được lỗi gọi biến sai tên, loại lỗi mà trình duyệt không hề báo
- Hiểu ngay biến nào trỏ vào biến nào nhờ chuỗi tham chiếu được vẽ ra
- Có sẵn tệp design token JSON để đưa sang công cụ thiết kế hoặc hệ thống xây dựng
Cách rà soát hệ biến trong một stylesheet
- 1Dán nội dung file CSS vào ô bên trái, có thể dán cả tệp nhiều nghìn dòng gồm nhiều khối media query.
- 2Xem khối tổng quan để nắm ngay bốn con số: số biến khai báo, số lượt gọi, số biến thừa và số biến thiếu.
- 3Mở thẻ bảng biến để đọc từng biến kèm giá trị khai báo, giá trị sau khi giải chuỗi tham chiếu, scope và kiểu suy đoán.
- 4Đọc các khối cảnh báo bên dưới về chuỗi tham chiếu, biến chưa khai báo, biến không dùng và biến khai báo lại ở nhiều scope.
- 5Bấm nút đổi giữa xuất giá trị gốc và xuất giá trị đã giải tùy theo bạn muốn giữ chuỗi var hay muốn giá trị phẳng.
- 6Sang thẻ khối CSS để lấy bản khai báo gọn, hoặc thẻ JSON để lấy tệp design token đưa sang công cụ thiết kế.
Scope của một biến CSS, và vì sao :root không phải là toàn cục theo nghĩa tuyệt đối
Custom property tuân theo quy tắc kế thừa như mọi thuộc tính khác, chứ không phải là biến toàn cục kiểu ngôn ngữ lập trình. Khai báo trong khối gốc nghĩa là gắn biến vào phần tử gốc của tài liệu, và mọi phần tử con kế thừa được vì chúng nằm bên trong. Khai báo trong một selector khác thì biến chỉ tồn tại trên phần tử khớp selector đó và cây con của nó, phần còn lại của trang không thấy. Chính đặc điểm này làm nên cách làm giao diện sáng tối phổ biến nhất hiện nay: khai báo bộ biến đầy đủ ở khối gốc, rồi khai báo lại đúng vài biến màu trong một selector chủ đề, khi lớp chủ đề được gắn lên thẻ ngoài cùng thì toàn bộ cây con nhận giá trị mới mà không cần đụng tới bất kỳ khai báo nào khác. Công cụ này gom biến theo scope thay vì trộn hết vào một danh sách chính là để bạn nhìn ra cấu trúc đó. Khi thấy một biến xuất hiện ở nhiều scope, nó báo cho bạn biết nhưng không coi là lỗi, vì đó thường là chủ đích. Việc bạn cần làm là nhìn danh sách và tự trả lời: lần khai báo lại này có nằm trong ý đồ thiết kế không, hay là dấu vết của một lần sửa vội.
Chuỗi tham chiếu lồng nhau và giá trị dự phòng hoạt động ra sao
Một biến hoàn toàn có thể lấy giá trị từ một biến khác, và biến đó lại lấy từ biến thứ ba. Đây là cách xây hệ token hai tầng rất hay dùng: tầng dưới là màu thô đặt tên theo sắc độ, tầng trên là màu công dụng đặt tên theo vai trò, và giao diện chỉ gọi tầng trên. Đổi thương hiệu thì chỉ sửa tầng dưới. Lời gọi biến còn nhận thêm một giá trị dự phòng viết sau dấu phẩy, và giá trị dự phòng đó lại có thể chứa một lời gọi biến khác, tạo thành chuỗi nhiều tầng. Trình duyệt duyệt chuỗi đó từ trái sang phải, dùng giá trị đầu tiên tìm được. Nếu đi hết chuỗi mà không có biến nào tồn tại và cũng không còn giá trị dự phòng nào thì cả khai báo bị coi là không hợp lệ ở thời điểm thay thế, và thuộc tính rơi về giá trị kế thừa. Công cụ này đi đúng chuỗi ấy, thay từng lời gọi bằng giá trị thật cho tới khi ra được một giá trị phẳng, đồng thời phát hiện trường hợp hai biến trỏ vòng vào nhau. Vòng lặp tham chiếu là lỗi thật sự và trình duyệt cũng coi biến đó là không hợp lệ, nhưng vì không có thông báo nào nên nó có thể nằm im rất lâu.
Biến thừa và biến thiếu: hai loại vấn đề khác hẳn nhau
Biến khai báo mà không dùng là vấn đề về vệ sinh mã nguồn. Nó không làm hỏng gì, chỉ làm tệp nặng thêm vài trăm byte và làm người đọc sau tưởng rằng biến đó có vai trò. Cách xử lý là xóa, nhưng phải cẩn thận một điểm: công cụ chỉ nhìn thấy phần CSS bạn dán vào, nên một biến có thể đang được gọi từ tệp CSS khác, từ thuộc tính style viết thẳng trong thẻ, hoặc từ mã kịch bản đặt giá trị lúc chạy. Vì vậy trước khi xóa hãy tìm tên biến đó trên toàn dự án chứ đừng chỉ dựa vào báo cáo này. Biến dùng mà chưa khai báo thì ngược lại, đó là lỗi thật đang có hiệu lực. Nếu lời gọi có giá trị dự phòng thì giao diện vẫn chạy nhưng chạy bằng giá trị dự phòng chứ không phải giá trị bạn nghĩ, và điều này rất dễ giấu một lỗi gõ nhầm tên biến trong nhiều tháng. Nếu không có giá trị dự phòng thì khai báo bị bỏ qua hoàn toàn. Nguyên nhân thường gặp nhất theo thứ tự là gõ sai tên, đổi tên biến ở nơi khai báo mà quên đổi ở nơi gọi, và gọi một biến nằm ở scope mà phần tử đó không kế thừa được.
Đặt tên biến sao cho hệ thống còn đọc được sau một năm
Tên biến là thứ duy nhất người sau nhìn thấy, nên nó phải nói được ba điều: biến thuộc nhóm nào, dùng vào việc gì, và ở mức nào trong thang. Quy ước hiệu quả nhất là ghép các phần theo thứ tự từ chung tới riêng, ngăn cách bằng dấu gạch nối, ví dụ nhóm màu rồi tới vai trò rồi tới sắc độ. Cách này có một lợi ích kỹ thuật ngoài chuyện dễ đọc: nó tách được thành cây khi xuất sang định dạng token, vì mỗi dấu gạch nối trở thành một tầng lồng nhau. Công cụ này dựng cây JSON đúng theo nguyên tắc đó, nên một hệ biến đặt tên nhất quán sẽ cho ra tệp token đẹp, còn hệ biến đặt tên lộn xộn sẽ cho ra cây nông sâu không đều và chính điều đó là tín hiệu để bạn dọn lại. Hai lỗi đặt tên hay gặp là đặt theo giá trị thay vì theo vai trò, ví dụ lấy tên màu xanh làm tên biến rồi sau này đổi thương hiệu sang tím thì tên biến nói dối; và đặt theo vị trí xuất hiện, ví dụ lấy tên một khối giao diện làm tên biến rồi khối đó bị bỏ nhưng biến vẫn còn. Nguyên tắc an toàn là tầng dưới đặt theo giá trị, tầng trên đặt theo vai trò, và giao diện chỉ được gọi tầng trên.
Từ biến CSS sang tệp design token và ngược lại
Định dạng token mà công cụ xuất ra dùng hai khóa đặc biệt là khóa giá trị và khóa kiểu, theo đúng quy ước của nhóm làm chuẩn design token. Cấu trúc lồng nhau lấy từ chính tên biến, còn kiểu được suy đoán từ hình dạng của giá trị: chuỗi bắt đầu bằng dấu thăng hoặc mở đầu bằng tên hàm màu thì là màu, số kèm đơn vị thời gian thì là thời lượng, số kèm đơn vị chiều dài thì là kích thước, chuỗi có dấu phẩy ngăn cách các tên phông thì là bộ chữ. Suy đoán này đủ dùng cho phần lớn hệ biến nhưng không phải lúc nào cũng đúng, chẳng hạn một biến giữ tỷ lệ dòng không đơn vị sẽ được xếp là số chứ không phải kích thước, nên hãy xem qua cột kiểu trong bảng trước khi mang tệp đi dùng. Về chiều ngược lại, khi bạn nhận một tệp token từ người thiết kế và muốn đưa vào dự án, hãy dùng thẻ khối CSS: chọn xuất theo giá trị gốc nếu bạn muốn giữ nguyên cấu trúc tham chiếu hai tầng, hoặc chọn xuất theo giá trị đã giải nếu bạn muốn một danh sách phẳng không phụ thuộc lẫn nhau, thường dùng khi cần nhúng một bộ biến gọn vào phần đầu trang cho lần vẽ đầu tiên.
Câu hỏi thường gặp (FAQ)
Custom property và biến trong bộ tiền xử lý CSS khác nhau chỗ nào?
Biến của bộ tiền xử lý được thay thế lúc biên dịch rồi biến mất khỏi tệp kết quả, nên không đổi được lúc chạy. Custom property tồn tại thật trong trình duyệt, kế thừa theo cây tài liệu và đổi được bằng mã kịch bản hoặc bằng cách gắn lớp chủ đề. Công cụ này chỉ đọc loại thứ hai.
Vì sao khai báo của tôi dùng biến mà lại không có tác dụng gì?
Nhiều khả năng biến đó chưa được khai báo ở scope mà phần tử kế thừa được, hoặc tên bị gõ sai một ký tự. Khi đó cả khai báo bị coi là không hợp lệ ở bước thay thế và bị bỏ qua âm thầm, không có cảnh báo nào. Hãy xem khối biến dùng mà chưa khai báo trong kết quả.
Biến khai báo trong khối gốc có phải phần tử nào cũng dùng được không?
Gần như vậy nhưng theo cơ chế kế thừa chứ không phải toàn cục. Phần tử nào nằm trong cây tài liệu đều kế thừa được. Trường hợp không thấy là khi phần tử nằm ngoài cây đó, chẳng hạn nội dung bên trong một khung nhúng riêng biệt, vì khung đó có tài liệu và phần tử gốc của chính nó.
Tôi xóa biến mà công cụ báo không dùng thì có rủi ro gì?
Có, vì công cụ chỉ nhìn thấy đoạn CSS bạn dán vào. Biến đó có thể đang được gọi từ tệp CSS khác, từ thuộc tính style viết thẳng trong thẻ, hoặc được đọc và ghi bằng mã kịch bản lúc chạy. Hãy tìm tên biến trên toàn dự án trước khi xóa.
Giá trị dự phòng sau dấu phẩy trong var hoạt động thế nào?
Trình duyệt dùng giá trị đó khi biến đứng trước chưa được khai báo. Giá trị dự phòng có thể chứa một lời gọi biến khác, tạo thành chuỗi nhiều tầng và trình duyệt duyệt từ trái sang phải cho tới khi tìm được thứ dùng được. Công cụ đi đúng chuỗi đó và hiển thị kết quả cuối.
Vòng lặp tham chiếu là gì và nó gây hậu quả gì?
Là khi biến thứ nhất lấy giá trị từ biến thứ hai còn biến thứ hai lại lấy ngược từ biến thứ nhất, trực tiếp hoặc qua vài tầng trung gian. Trình duyệt coi cả nhóm biến trong vòng lặp là không hợp lệ. Công cụ phát hiện và ghi rõ vị trí quay vòng trong khối chuỗi tham chiếu.
Biến khai báo hai lần ở hai selector khác nhau có phải lỗi không?
Thường không, đó là cách làm giao diện sáng tối và các chủ đề màu. Bộ đầy đủ khai báo ở khối gốc, rồi khai báo lại vài biến trong selector chủ đề. Công cụ liệt kê ra để bạn rà lại, chỉ cần xem có lần khai báo nào ngoài ý đồ thiết kế hay không.
Xuất giá trị gốc và xuất giá trị đã giải khác nhau ra sao?
Xuất giá trị gốc giữ nguyên các lời gọi biến nên cấu trúc token hai tầng còn nguyên, đổi tầng dưới là tầng trên đổi theo. Xuất giá trị đã giải thay hết bằng giá trị phẳng, tiện khi cần nhúng một bộ biến độc lập không phụ thuộc biến khác.
Kiểu token trong tệp JSON được xác định bằng cách nào?
Bằng hình dạng của giá trị. Chuỗi mở đầu bằng dấu thăng hoặc bằng tên hàm màu thì là màu, số kèm đơn vị giây hoặc mili giây thì là thời lượng, số kèm đơn vị chiều dài thì là kích thước, chuỗi liệt kê nhiều tên phông thì là bộ chữ. Suy đoán này đúng phần lớn trường hợp nhưng nên xem lại cột kiểu trước khi dùng.
Công cụ có đọc được biến đặt bằng mã kịch bản lúc chạy không?
Không. Nó chỉ phân tích đoạn CSS bạn dán vào nên không thấy những biến được gán bằng hàm đặt thuộc tính của phần tử. Nếu dự án của bạn dùng cách đó nhiều, hãy nhớ những biến ấy sẽ nằm trong danh sách được gọi mà chưa khai báo, và điều đó là bình thường.
Tôi nên đặt tên biến theo màu hay theo công dụng?
Cả hai, ở hai tầng khác nhau. Tầng dưới đặt theo giá trị để mô tả đúng sắc độ, tầng trên đặt theo vai trò trong giao diện, và phần mã giao diện chỉ được phép gọi tầng trên. Nhờ vậy khi đổi bộ nhận diện thương hiệu bạn chỉ sửa tầng dưới mà không đụng vào bất kỳ khai báo nào khác.
Dán file CSS lớn vào có bị chậm hoặc bị gửi dữ liệu đi đâu không?
Toàn bộ việc phân tích chạy trong trình duyệt của bạn, không có lời gọi mạng nào và không có gì được lưu lại. Với tệp vài nghìn dòng thì kết quả hiện gần như tức thì, nên bạn dán được cả stylesheet của dự án nội bộ mà không lo lộ mã nguồn.
Từ khóa liên quan
- trích biến css
- css variable extractor
- custom property css
- liệt kê biến trong file css
- biến css khai báo mà không dùng
- biến css dùng mà chưa khai báo
- var fallback css
- chuỗi tham chiếu var lồng nhau
- vòng lặp tham chiếu biến css
- scope biến css root
- biến css theo chủ đề sáng tối
- xuất design token json
- design tokens format module
- chuyển biến css sang token
- đặt tên biến css
- dọn biến css thừa
- gom biến css theo media query
- công cụ đọc biến css miễn phí
- kiểm tra biến css bị thiếu
- quản lý hệ token màu css
