Tôi đã làm việc thông qua bài viết này để tổ chức mã mặt trước của mình. Nó tham khảo các bài viết về BEM / SMACSS, lần lượt tham khảo các bài viết khác.
Tôi thực sự đang cố gắng để hiểu các thực tiễn tốt nhất là gì ... Tôi có một vài ngày để đưa ra "tiêu chuẩn" này, và sau đó phải đốt cháy một dự án dòng thời gian có mức độ ưu tiên cao / khả năng hiển thị cao / giới hạn. Như vậy, tôi muốn đảm bảo rằng tôi bắt đầu với một nền tảng sẽ mở rộng như ứng dụng của tôi.
Đưa ra một thành phần có tên segment... Tôi đang tạo các trang sẽ có ~ 10 segmentsmỗi trang. Mỗi người segmentsẽ chia sẻ cùng một lớp cơ sở. Tuy nhiên, nhất định segmentssẽ có sửa đổi trên chúng (màu nền khác nhau). Hơn nữa, các phần tử trong mỗi khối (theo cách tiếp cận BEM) cũng sẽ có các sửa đổi. Để chứng minh, đây là một triển khai đơn giản (chỉ có một yếu tố duy nhất arrow, trong khi trang web đầy đủ của tôi sẽ có 4-5 yếu tố trong mỗi segment):
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow--orange {
@extend .segment__arrow;
background-image: url('/images/arrow_orange.png');
}
.segment__arrow--white {
@extend .segment__arrow;
background-image: url('/images/arrow_white.png');
}
Vì vậy, đây là cách tiếp cận đơn lớp:
<div class="segment__arrow--white"> ... </div>Ngoài ra, tôi có thể đi theo cách tiếp cận đa lớp:
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow--orange {
background-image: url('/images/arrow_orange.png');
}
.segment__arrow--white {
background-image: url('/images/arrow_white.png');
}
Nơi đánh dấu của tôi sẽ là:
<div class="segment__arrow segment__arrow--white"> ... </div>Thứ ba, tôi có thể làm:
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow.orange {
background-image: url('/images/arrow_orange.png');
}
.segment__arrow.white {
background-image: url('/images/arrow_white.png');
}
Và sau đó lớp def của tôi sẽ là
<div class="segment__arrow orange"> ... </div>Có lẽ thậm chí đặt tên màu cam với một cái gì đó như sa_orangeđể tránh các bộ chọn lỏng lẻo.
Kết quả cuối cùng mà tôi đang tìm kiếm là ít mã hơn / dễ bảo trì hơn (có thể loại trừ cách tiếp cận lớp đơn (tùy chọn 1), như được mô tả trong bài viết tuyệt vời này về kiến trúc có thể mở rộng. Cách tiếp cận đa lớp (tùy chọn 2) dẫn đến rất nhiều chi tiết (đặc biệt là trong HTML của tôi), nhưng cực kỳ rõ ràng. Thứ ba sử dụng cách tiếp cận đa lớp, nhưng không sử dụng các công cụ sửa đổi được đặt tên (như .seribution__arrow), do đó ít dài dòng hơn (nhưng cũng ít rõ ràng hơn & cao hơn tiềm năng va chạm).
Có ai có kinh nghiệm trong thế giới thực với công cụ này có bất kỳ phản hồi nào về cách tốt nhất để tiếp cận điều này không?
.orangekhông có ý nghĩa như một sửa đổi một mình. Tôi không thấy một vấn đề lớn trong việc sử dụng.segment__arrow--orangecùng với phương pháp đa kính của bạn. Tất nhiên trong các dự án lớn hơn, HTML của bạn có thể mất kiểm soát một chút (rất nhiều lớp).