Tính độ ưu tiên của CSS selectors
CSS Specificity Calculator của Tấn Phát Digital giúp bạn tính toán và so sánh độ ưu tiên của CSS selectors. Nhập nhiều selectors cùng lúc, công cụ sẽ tính specificity score và sắp xếp theo thứ tự ưu tiên. Hiển thị chi tiết breakdown: inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements. Công cụ thiết yếu để debug CSS conflicts và hiểu CSS cascade. Hoàn toàn miễn phí.
CSS Specificity là một trong những concepts khó hiểu nhất của CSS, nhưng cực kỳ quan trọng. Khi có nhiều CSS rules target cùng một element, browser dùng specificity để quyết định rule nào 'thắng'. Không hiểu specificity dẫn đến: styles không được áp dụng dù code đúng, lạm dụng !important để 'fix' (tạo technical debt), CSS codebase khó maintain và debug. Specificity Calculator giúp bạn visualize và compare selectors, từ đó viết CSS có cấu trúc tốt hơn, tránh specificity wars, và debug issues nhanh chóng.
Specificity được tính theo 4 levels (a,b,c,d): a = Inline styles (style attribute) - weight 1000. b = ID selectors (#id) - weight 100. c = Class selectors (.class), attribute selectors ([type='text']), pseudo-classes (:hover, :focus) - weight 10. d = Element selectors (div, p), pseudo-elements (::before, ::after) - weight 1. Universal selector (*), combinators (+, >, ~), :not() không tính vào specificity (nhưng content bên trong :not() thì tính). Ví dụ: #header .nav a:hover = (0,1,2,1) = 121 points.
Dùng class selectors thay vì IDs cho styling (IDs quá specific). Tránh nested selectors quá sâu (.a .b .c .d .e). Dùng BEM naming convention để flat specificity. Tránh !important trừ utility classes. Đặt base styles với low specificity, component styles với medium. Dùng CSS custom properties (variables) để override dễ dàng. Trong CSS-in-JS hoặc CSS Modules, specificity ít quan trọng hơn vì scoped styles.
!important không thay đổi specificity calculation, nhưng nó tạo một 'layer' riêng. Rules với !important luôn thắng rules không có !important, bất kể specificity. Giữa các rules đều có !important, specificity vẫn quyết định. Nên tránh !important vì tạo cascade khó predict và maintain.
Inline styles (style attribute trên HTML element) có specificity (1,0,0,0) = 1000 points. Chúng thắng hầu hết CSS selectors trừ khi CSS rule có !important. Đây là lý do inline styles khó override và nên tránh trong production code.
:not() pseudo-class bản thân không có specificity, nhưng selector bên trong nó thì có. Ví dụ: div:not(.active) có specificity của 'div' (0,0,0,1) + '.active' (0,0,1,0) = (0,0,1,1). Tương tự với :is() và :where() (nhưng :where() luôn có specificity 0).
Độ dài selector không quyết định specificity. Một ID selector (#id) luôn thắng bất kỳ số lượng class selectors nào. Ví dụ: #header thắng .a.b.c.d.e.f.g.h.i.j vì ID (100 points) > 10 classes (100 points). Đây là lý do nên tránh dùng IDs cho styling.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
Tạo file .env và .env.example cho dự án.
Tạo .gitignore cho Node.js, Python, Java.
Tạo mock JSON data cho API testing.
Format và phân tích API response.
Test REST API: GET, POST, PUT, DELETE.
Chuyển đổi Binary, Hex, Base32.
Mã hóa/giải mã Base64.
Chuyển đổi Decimal, Binary, Hex.
Tạo CSS box-shadow trực quan.
Tính quyền file Linux.
Kiểm tra WCAG accessibility.
Tạo bảng màu ngẫu nhiên.
