Quy ước tên cho CSS

Sử dụng dấu phân cách “-“
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;
}
Hãy làm như thế này:
.red-box {
   border: 1px solid red;
}
Ngoài ra, nó cũng phù hợp với thuộc tính của CSS.
.some-class {
   font-weight: 10em
}

Qui ước đặt tên BEM
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
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.

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

E 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

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ử.
.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M là “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 đỏ?

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ụ 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?

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.

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
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.
<div class="site-navigation js-site-navigation">
</div>
Và JavaScript 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']")

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.

NextHiệu ứng đẹp dùng ngày cho website (ok)

Last updated 1 year ago

Was this helpful?

Sử dụng dấu phân cách “-“ 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; } Hãy làm như thế này: .red-box { border: 1px solid red; } Ngoài ra, nó cũng phù hợp với thuộc tính của CSS. .some-class { font-weight: 10em }

Qui ước đặt tên BEM 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 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.

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ử. .stick-man__head { } .stick-man__arms { } .stick-man__feet { }

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ụ 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?

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.

Đặ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 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. <div class="site-navigation js-site-navigation"> </div> Và JavaScript 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']")

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.