Đừng nghĩ các lớp css là các lớp hướng đối tượng, hãy nghĩ về chúng như một công cụ trong số các bộ chọn khác để chỉ định các lớp thuộc tính mà một phần tử html được tạo kiểu. Hãy nghĩ về mọi thứ giữa các dấu ngoặc là lớp thuộc tính và các bộ chọn ở phía bên trái cho biết các phần tử mà chúng chọn để kế thừa các thuộc tính từ lớp thuộc tính . Thí dụ:
.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
Khi một yếu tố được đưa ra thuộc tính class="foo", nó rất hữu ích để nghĩ về nó không phải là kế thừa các thuộc tính từ lớp .foo, nhưng từ thuộc tính lớp Một và lớp thuộc tính B . Tức là, biểu đồ kế thừa sâu một cấp, với các phần tử xuất phát từ các lớp thuộc tính và các bộ chọn xác định vị trí của các cạnh và xác định mức độ ưu tiên khi có các thuộc tính cạnh tranh (tương tự như thứ tự phân giải phương thức).
Ý nghĩa thực tiễn cho lập trình là thế này. Giả sử bạn có style sheet đưa ra ở trên, và muốn thêm một lớp mới .baz, nơi mà nó nên có cùng font-sizenhư .foo. Giải pháp ngây thơ sẽ là thế này:
.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}
Bất cứ khi nào tôi phải gõ một cái gì đó hai lần, tôi rất tức giận! Tôi không chỉ phải viết nó hai lần, bây giờ tôi không có cách nào để lập trình chỉ ra điều đó .foovà .baznên có cùng một điều đó font-size, và tôi đã tạo ra một sự phụ thuộc ẩn! Mô hình trên của tôi sẽ gợi ý rằng tôi nên trừu tượng hóa font-sizethuộc tính khỏi lớp thuộc tính A :
.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}
Việc khiếu nại chính ở đây là bây giờ tôi cần phải nhập lại mỗi selector từ thuộc tính hạng A một lần nữa để xác định rằng các yếu tố họ nên chọn nên thuộc tính này cũng kế thừa từ lớp cơ sở thuộc tính A . Tuy nhiên, các lựa chọn thay thế là phải nhớ chỉnh sửa mọi lớp thuộc tính nơi có các phụ thuộc ẩn mỗi khi có gì đó thay đổi hoặc sử dụng công cụ của bên thứ ba. Lựa chọn đầu tiên làm cho chúa cười, thứ hai khiến tôi muốn tự sát.