Tôi biết rằng có rất nhiều lập trình viên nói rằng họ ghét làm việc với CSS. Với kinh nghiệm của tôi, điều này đến như một kết quả của việc không dành thời gian để học CSS một cách nghiêm túc.
CSS không phải là một ngôn ngữ “đẹp nhất” (prettiest), nhưng nó lại thành công trong việc khiến các trang web trở nên lộng lẫy hơn, đẹp hơn trong suốt 20 năm qua. Điều này cũng đáng phải suy ngẫm chứ nhỉ mấy bạn Web developer?
Tuy nhiên khi bạn viết rất rất nhiều code CSS, bạn sẽ nhanh chóng nhận ra chúng có một nhược điểm lớn.
Nó quá khó để bảo trì LOL.
Một file CSS khi cần được maintain sẽ sớm trở thành cơn ác mộng với mọi lập trình viên.
Dưới đây là một vài quy ước đặt tên sẽ giúp bạn tiết kiệm được một chút căng thẳng và vô số giờ xuống dòng.
Sử dụng dấu – thay vì đặt tên kiểu camel
Thực tế là khi bạn viết rất nhiều JavaScript, sau đó đặt tên các biến theo quy tắc camel
var redBox = document.getElementById('...')
Tuyệt vời, phải không?
Vấn đề là hình thức đặt tên này không phù hợp với CSS.
Chúng ta sẽ không viết CSS thế này:
.redBox {
border: 1px solid red;
}
Thay vào đó, code của chúng ta sẽ trông như thế này:
.red-box {
border: 1px solid red
}
Đây là cách đặt tên theo conventison của CSS. Trông nó dễ đọc hơn đúng không nào?
Ngoài ra, nó phù hợp với tên thuộc tính CSS.
// Correct
.some-class {
font-weight: 10em
}
// Wrong
.some-class {
fontWeight: 10em
}
Cách đặt tên BEM
Các nhóm có cách tiếp cận khác nhau để viết CSS. Một số nhóm sử dụng dấu phân cách, trong khi một số khác lại thích sử dụng quy ước đặt tên có cấu trúc hơn gọi là BEM.
Nói chung, có 3 vấn đề mà cách đặt tên CSS cố gắng giải quyết:
- Để biết các lớp làm gì, chỉ cần nhìn vào tên của nó
- Để có một ý tưởng về nơi mà lớp có thể được sử dụng, chỉ cần nhìn vào nó
- Để biết mối quan hệ giữa các tên lớp, chỉ cần nhìn vào chúng
Bạn đã bao giờ nhìn thấy tên lớp trong CSS được viết như sau:
.nav--secondary {
...
}
.nav__header {
...
}
Đây chính là cách đặt tên BEM khi code CSS.
BEM khá dễ hiểu, bạn có thể giải thích nó cho một đứa trẻ 5 tuổi như sau
BEM cố gắng phân chia giao diện người dùng thành các thành phần nhỏ có thể tái sử dụng.
Hãy xem xét hình ảnh dưới đây:
Stick-man biểu diễn một thành phần, chẳng hạn như một khối thiết kế.
Bạn có thể đã đoán được rằng B trong BEM là viết tắt của ‘Block‘.
Trong thế giới thực, ‘block‘ này có thể đại diện cho điều hướng trang, tiêu đề, chân trang hoặc bất kỳ block khác.
Theo giải thích ở trên, một tên lớp lý tưởng cho thành phần này sẽ là class stick-man.
stick-man class được viết như sau:
.stick-man {
}
Ok ở đây chúng ta sử dụng stick-man để miêu tả block stick-man. Có vẻ ổn nhỉ.
E for Elements
E trong ‘BEM’ đại diện cho Elements.
Để ý rằng một block trong thiết kế sẽ ít khi nào đứng một mình, luôn có các phần tử con kèm theo nó.
Ví dụ, người đàn ông ở trên có đầu gối, hai cánh tay tuyệt đẹp và bàn chân
Đầu, chân và cánh tay là tất cả các yếu tố cấu thành đối tượng stick-man. Chúng có thể được xem như các thành phần con, của thành phần cha.
Sử dụng quy ước đặt tên BEM, các tên lớp phần tử này được lấy ra bằng cách thêm hai dấu gạch dưới, tiếp theo là tên phần tử.
.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}
M đại diện cho Modifiers
Điều gì sẽ xảy ra nếu một ngày đẹp trời khách hàng khó tính của bạn muốn có 2 người đàn ông màu xanh và đỏ?
Trong thế bài toán thực tế, các bạn có thể cần thay đổi một button màu đỏ hoặc xanh lam.
Sử dụng BEM, các tên lớp sửa đổi được lấy ra bằng cách thêm hai dấu nối sau tên của phần tử.
.stick-man--blue {
}
.stick-man--red {
}
Không phải lúc nào các block cha cũng thay đổi tuy nhiên chúng ta sẽ xét đến trường hợp này ở ví dụ dưới.
Điều gì sẽ xảy ra nếu chúng ta có những người đàn ông có kích cỡ đầu khác nhau?
Ở đây các phần tử đã được sửa đổi.
Hãy nhớ rằng, phần tử là một thành phần con trong khối có chứa tổng thể.
Các stick-man đại diện cho Block, .stick-man__head phần tử. Như đã thấy trong ví dụ ở trên, dấu gạch nối đôi cũng có thể được sử dụng như sau:
.stick-man__head--small {
}
.stick-man__head--big {
}
Một lần nữa, lưu ý việc sử dụng các dấu gạch nối đôi trong ví dụ trên.
Trên đây là cơ bản về quy ước đặt tên BEM và cách hoạt động của nó.
Tips: Sử dụng các tên phân cách dấu gạch ngang cho các dự án đơn giản và BEM cho các giao diện phức tạp hơn.