Giới thiệu / nền tảng: Các thành phần CSS
Đối với một trang web tương đối lớn, chúng tôi đang làm việc với SASS và cố gắng quản lý CSS trong các thành phần. Ý tưởng cơ bản của các thành phần là một thành phần sẽ trông giống nhau ở mọi nơi, độc lập với các thành phần chứa hơn nữa trong DOM.
Vì vậy, chúng tôi muốn tránh những thứ như thế này (SASS):
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}Thay vào đó, nếu chúng ta muốn hình ảnh người dùng trông khác trên frontpage, nó sẽ phải là một thành phần khác. Ví dụ: với thừa kế SASS hoặc với mixin:
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}Sau đó, chúng ta cần điều chỉnh html trên frontpage, để nó sử dụng phiên bản khác nhau của hình ảnh người dùng.
Càng xa càng tốt. Tôi đã đăng ở trên như một minh họa về sự hiểu biết hiện tại của tôi về các thành phần CSS là gì.
Câu hỏi: Lớp sửa đổi - thực hành tốt?
Bây giờ chúng ta đang gặp phải một vấn đề: Một số trang có nền tối (đen) và do đó, văn bản, đường viền và nội dung cần phải có màu trắng.
Điều này bằng cách nào đó vượt ra ngoài các thành phần: Thành phần tương tự nên có văn bản tối theo mặc định, nhưng văn bản màu trắng nếu nó nằm trong một thùng chứa có nền tối.
Vì vậy, chúng tôi có ý tưởng tuyệt vời này:
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}Vì vậy, chúng ta có một lớp "sửa đổi" hoặc "bối cảnh" bên ngoài white-on-blackđể sửa đổi cách các phần tử bên trong được hiển thị.
Động lực là chính thành phần đó không chịu trách nhiệm cho nền của một phần tử container tiếp theo trong DOM.
Những công việc này. Vấn đề duy nhất là nếu chúng ta có một thùng chứa nền trắng trong thùng chứa nền tối. Nhưng điều này sang một bên, nó hoạt động ok.
Câu hỏi đặt ra là liệu đây có phải là một thực hành tốt về mặt kiến trúc hay không, với nền tảng là cố gắng giữ cho các thành phần độc lập với nhau.
Thay thế sẽ là có một thành phần khác, ví dụ my-component-on-dark-bg, kế thừa từ my-componentvà có màu khác nhau cho văn bản và đường viền. Nhưng ở đây, mã (ví dụ PHP) tạo ra thành phần html cần biết về bên ngoài, nghĩa là liệu có sử dụng bg tối hay không. Giả sử rằng mã PHP kết xuất thành phần tách biệt với mã PHP kết xuất vùng chứa. Cái này vẫn có thể quản lý được, nhưng có thể là một đối số cho mẫu với lớp sửa đổi, như được mô tả ở trên.
Ghi chú
Chúng tôi thực sự đang tiền tố các lớp CSS của chúng tôi với một tiền tố dành riêng cho dự án. Tôi chỉ để nó ở đây cho đơn giản, và vì đó không phải là công việc mà tôi đang thực hiện dự án :).