Mẹo quy ước tên cho CSS giúp bạn rút ngắn 2/3 thời gian khi debug!

Tác giả: Emmanuel Ohans

Tôi đã nghe không ít developer nói rằng họ ghét CSS. Với kinh nghiệm của mình, đây là kết quả cho việc không dành thời gian để học CSS.

CSS không phải là “ngôn ngữ” đẹp nhất, nhưng nó đã thành công trong việc làm front-end cho các website trong hơn 20 năm nay. Tuy nhiên, khi bạn viết nhiều CSS, bạn sẽ nhận ra được thấy một nhược điểm lớn. Quá khó để developer có thể maintain CSS.

Các CSS tệ sẽ nhanh chóng trở thành một cơn ác mộng đối với các lập trình viên. Dưới đây là một số quy ước tên sẽ giúp bạn giảm vô số giờ để debug.

Có thể bạn muốn xem:

  Responsive HTML bằng một dòng CSS
  Roadmap Frontend Developer - "Con đường tắt" để trở thành cao thủ Frontend Developer

Sử dụng dấu phân cách “-“

Nếu bạn sử dụng nhiều JavaScript

var redBox = document.getElementById('...')

Vấn đề là cách đặt tên này không phù hợp với CSS.

Đừng bao giờ:

.redBox {
  border: 1px solid red;
}

Thay vì vậy, hãy làm như thế này:

.red-box {
   border: 1px solid red;
}

Đây là một tiêu chuẩn đặt tên cho CSS. Và điều này được cho là dễ đọc hơn.

Ngoài ra, nó cũng phù hợp với thuộc tính của CSS.

// Correct
.some-class {
   font-weight: 10em
}
// Wrong
.some-class {
   fontWeight: 10em
}

Qui ước đặt tên BEM

Các team có cách tiếp cận khác nhau để viết CSS selector. 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 một cách đặt tên có cấu trúc hơn gọi là BEM.

Nhìn chung, có 3 vấn đề mà qui tắc này giải quyết:

  1. Để biết 1 selector làm cái gì, chỉ cần nhìn vào tên của nó
  2. Để có một ý tưởng về nơi mà một selector được sử dụng, chỉ cần nhìn vào nó
  3. Để biết mối quan hệ giữa các các class name, chỉ cần nhìn vào chúng

Bạn đã bao giờ nhìn thấy class name được viết như sau:

.nav--secondary {
  ...
}
.nav__header {
  ...
}

Đó là quy tắc BEM.

Video: Tối ưu Front-end để web của bạn load dưới 5 giây

Giải thích BEM

BEM cố gắng phân chia giao diện người dùng tổng thể thành các component nhỏ có thể tái sử dụng.

Hãy quan sát hình ảnh dưới đây:

Hình này biểu diễn một component, chẳng hạn như một khối thiết kế.
Bạn có thể dễ đoán được B trong BEM là viết tắt của ‘Block’.
Trong thực tế, ‘block’ này đại diện cho điều hướng trang, tiêu đề, chân trang hoặc bất kỳ khối thiết kế khác.
Theo thực tiễn được giải thích ở trên, một class name lý tưởng cho component này sẽ là stick-man.
Component nên theo kiểu sau:
.stick-man {
  
 }

Chúng ta đã sử dụng các chuỗi giới hạn ở đây. Thật tuyệt vời!

E là viết tắt của “Elements”

E trong ‘BEM’ là viết tắt của Elements.

Khối thiết kế hiếm khi bị cô lập.

Ví dụ, stick-man phải có đầu, hai cánh tay và chân.

head, feet và arms là tất cả các element bên trong component. Chúng có thể được xem như các component con, nghĩa là con của component bố mẹ nó.
Sử dụng quy tắc BEM, các element  của class name đượ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ử.
Ví dụ:
.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M là “Modifiers”

M trong ‘BEM’ viết tắt của Modifiers.

Điều gì sẽ xảy ra nếu stick-man ông bị sửa đổi và chúng ta có một stick-man có màu xanh hoặc đỏ?

Thực tế, đây có thể là nút đỏ hoặc nút màu xanh. Đây là những sửa đổi của component được đề cập.

Sử dụng BEM, các modifier class name được lấy ra bằng cách thêm hai dấu nối sau tên của phần tử.

Ví dụ:

.stick-man--blue {
}
.stick-man--red {
}

Ví dụ cuối cùng cho thấy các component cha mẹ đang được sửa đổi. Nhưng không phải lúc nào cũng như vậy.

Điều gì sẽ xảy ra nếu chúng ta có những stick-man có kích cỡ đầu khác nhau?

Lúc này các element đã được sửa đổi. Hãy lưu ý, element là một component con trong khối  tổng thể.

Các .stick-man đại diện cho Block , .stick-man__head element

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 {
}

Hãy lưu ý việc sử dụng các dấu gạch nối đôi trong ví dụ trên. Điều này biểu thị một modifier.

Đây là điều cơ bản về cách quy tắc BEM hiệu quả như thế nào.

Cá nhân tôi có xu hướng chỉ sử dụng các class name dùng phân cách gạch ngang cho các dự án đơn giản và BEM cho các giao diện người dùng có liên quan.

Tại sao sử dụng các quy ước đặt tên?

Đặt tên là một việc cực kì khó. Chúng tôi đang cố gắng làm mọi việc dễ dàng hơn và tiết kiệm thời gian cho chúng tôi trong tương lai với code có thể duy trì nhiều hơn.

Đặt tên đúng cách trong CSS sẽ làm cho code của bạn dễ đọc và dễ dàng hơn.

Đặt đúng tên trong CSS sẽ giúp bạn dễ đọc và duy trì code hơn.

Nếu bạn chọn sử dụng quy tắc BEM, nó sẽ trở nên dễ dàng hơn để xem mối quan hệ giữa các component của bạn/khối chỉ bằng cách nhìn vào đánh dấu.

Đặt tên CSS với JavaScript Hooks

VD ta được chuyển giao code HTML trông như sau:

<div class="siteNavigation">
</div>

ta đã đọc bài này và nhận ra rằng đây không phải là cách tốt nhất để đặt tên cho những thứ trong CSS. Vì vậy, ta tiếp tục code và tái cấu trúc các codebase trước:

<div class="site-navigation">
</div>

Một nơi nào đó trong JavaScript code, có sử dụng class mà ta chưa rename, siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

Vì vậy, với sự thay đổi class name, biến nav biến thành null.

Để ngăn chặn các trường hợp này, developer đã đưa ra các chiến lược khác nhau.

1.Sử dụng js- class names

Một cách để giảm thiểu các lỗi như vậy là sử dụng class name js-* để biểu thị mối quan hệ với DOM element đang được đề cập.

Ví dụ:

<div class="site-navigation js-site-navigation">
</div>

Và JavaScript code:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

Theo một quy ước, bất kỳ ai nhìn thấy js-site-navigation class name sẽ hiểu rằng có mối liên hệ với DOM element đó trong mã JavaScript.

2. Sử dụng thuộc tính Rel

Bạn có nhận ra điều này?

<link rel="stylesheet" type="text/css" href="main.css">

Về cơ bản, thuộc tính rel xác định mối quan hệ mà tài nguyên đã liên kết đến resource mà nó được tham chiếu.

Trong ví dụ trước, những người đề xướng kỹ thuật sẽ làm việc này:

<div class="site-navigation" rel="js-site-navigation">
</div>

Và với JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

Tôi có nghi ngờ về kỹ thuật này, nhưng bạn có thể bỏ qua nó trong một số codebases. Yêu cầu ở đây là “có một mối quan hệ với Javascript, vì vậy tôi sử dụng thuộc tính rel để biểu thị điều đó”.

Web là một nơi lớn với rất nhiều “phương pháp” khác nhau để giải quyết cùng một vấn đề.

3. Không sử dụng data attribute

Một số developer sử dụng các data attributes như JavaScript Hooks. Điều này là không đúng. Theo định nghĩa, data attributes được sử dụng để lưu trữ dữ liệu tùy chỉnh.

Tip: Thêm các CSS comments

Điều này không liên quan gì đến các quy ước đặt tên, nhưng cũng sẽ giúp bạn tiết kiệm được nhiều thời gian.

Trong khi rất nhiều nhà phát triển web cố gắng không viết các bình luận JavaScript hoặc viết đại loại, tôi nghĩ bạn nên viết comment cho CSS.

Vì CSS không phải là “ngôn ngữ” thân thiện nhất, nếu có comment chi tiết rõ ràng thì bạn sẽ tiết kiệm thời gian khi bạn hoặc ai đó sau này xem lại code của mình.

Tham khảo thêm các vị trí tuyển dụng lập trình CSS lương cao cho bạn

Bài viết gốc được đăng tải tại Freecodecamp