Quy Ước Đặt Tên Trong CSS - Stolennguyen Website

Các Quy Ước Đặt Tên Trong CSS (Phần 1)

quy ước đặt tên trong css

quy ước đặt tên trong css

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 thấy một nhược điểm lớn. 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ố Các Quy Ước Đặt Tên Trong CSS sẽ giúp bạn giảm vô số giờ để debug.

Sử dụng dấu gạch ngang và dấu cách

Nếu bạn viết rất nhiều JavaScript, thì việc viết các biến bằng cú pháp camel là thực tế phổ biến ?

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

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

Đừng bao giờ viết như thế này:

.redBox {
  border: 1px solid red;
}

Thay vào đó, hãy viết thế này :

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

Đây là quy ước đặt tên CSS khá chuẩn. Nó được cho là dễ đọc hơn.

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
}

Quy ước đặt tên BEM

Các nhóm có cách tiếp cận khác nhau để viết bộ chọn CSS. Một số nhóm sử dụng dấu gạch nối, dấu gạch ngang, trong khi các nhóm khác thích sử dụng quy ước đặt tên có cấu trúc hơn được gọi là BEM.

Nhìn chung, có 3 vấn đề mà các quy ước đặt tên CSS cố gắng giải quyết:

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

Bạn đã bao giờ thấy tên class được viết như thế này chưa?

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

Đó là quy tắc BEM

Giải thích về BEM

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

BEM - quy ước đặt tên trong css

Stick-man đại diện cho một thành phần, chẳng hạn như một khối thiết kế..

B for Block

Bem là gì? Có lẽ bạn có thể đã đoán B ở 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 web, đầu trang, chân trang hoặc bất kỳ khối thiết kế nào khác.

Sau khi thực hành giải thích ở trên, một tên lớp lý tưởng cho thành phần này sẽ là stick-man.

Thành phần phải được tạo kiểu như sau:

.stick-man {
 }

Chúng tôi đã sử dụng các chuỗi phân tách ở đây.

B for Block

E for Elements

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

Khối thiết kế tổng thể hiếm khi sống trong sự cô lập.

Ví dụ, người đàn ông có đầu, hai cánh tay và bàn chân.

E for Elements

Đầu, chân và cánh tay là tất cả các yếu tố trong thành phần. Chúng có thể được xem là thành phần con, tức là con của thành phần tổng thể.

Sử dụng quy ước đặt tên BEM, tên lớp phần tử được bắt nguồn bằng cách thêm hai dấu gạch dưới, theo sau là tên phần tử

Ví dụ:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M for Modifiers

Chữ M trong ‘BEM’ là viết tắt của Modifiers.

M for Modifiers

Điều gì sẽ xảy ra nếu người đàn ông bị biến đổi và chúng ta có thể có một người đàn ông màu xanh dương hay một người đàn ông màu đỏ?

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

Sử dụng BEM, tên lớp của trình sửa đổi được bắt nguồn bằng cách thêm hai dấu gạch ngang, sau đó là tên phần tử.

Ví dụ:

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

Ví dụ cuối cùng cho thấy thành phần cha được sửa đổi. Đây không phải là luôn luôn như vậy.

Điều gì sẽ xảy ra nếu chúng ta có những người đàn ông có kích thước đầu khác nhau?

quy ước đặt tên trong css

Lần này 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 chứa tổng thể.

Người .stick-man đại diện cho Block, .stick-man__head phần tử.

Như đã thấy trong ví dụ trên, các dấu gạch ngang kép 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 dấu gạch ngang kép trong ví dụ trên. Điều này được sử dụng để biểu thị một công cụ sửa đổi.

Đó là cơ bản cách thức hoạt động của quy ước đặt tên BEM.

Cá nhân, tôi có xu hướng chỉ sử dụng tên lớp gạch nối dấu 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 nhiều hơn.

Xem tiếp phần 2:

Các quy ước đặt tên CSS giúp bạn rút ngắn thời gian khi Debug! (Phần 2)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *