Quy ước đặt tên trong CSS mà sẽ giúp bạn tiết kiệm hàng giờ debugging

 Dịch từ: CSS Naming Conventions that Will Save You Hours of Debugging

Sử dụng dấu gạch nối để phân định chuỗi

Nếu bạn viết rất nhiều code JavaScript thì bạn sẽ quen với cách đặt tên biến theo kiểu camel case.

Vấn đề là kiểu đặt tên như vậy không đúng khi mình đặt tên trong CSS.

Không nên:

Thay vào đó thì hãy:

Đây là chuẩn đặt tên đẹp trong CSS. Nó dễ đọc.

Hơn nữa, nó cũng đồng nhất với tên thuộc tính trong CSS

Quy ước đặt tên BEM

Mỗi người sẽ có những cách tiếp cận đến selector trong CSS khác nhau. Một vài người sử dụng dấu gạch nối, những người còn lại thích sử dụng quy ước đặt tên theo cấu trúc gọi là BEM hơn.

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

1.     Để biết đó selector đó làm gì, chỉ cần nhìn tên là biết

2.     Để biết nên sử dụng selector đó ở đâu, chỉ cần nhìn nó là biết

3.     Để biết mối quan hệ giữa các class name với nhau, chỉ cần nhìn chúng.

Có bao giờ bạn nghĩ class name được viết như thế này:

Đó chính là quy ước đặt tên BEM

Giải thích BEM cho một đứa trẻ 5 tuổi

BEM chia một user interface thành những thành phần nhỏ có thể sử dụng lại được.

Hãy xem xét cái hình dưới đây

Người que này đại diện cho một component, như là một block của design.

Bạn có thể đoán trước được là B trong BEM được hiểu là ‘Block’

Giống như giải thích ở trên, tên class cho component này là stick-man

E được hiểu là Elements

Thường thì tổng thể một block sẽ hiếm khi nào tách biệt nhau

Ví dụ, người que này có đầu (head), có hai cánh tay lực lưỡng (arms), và đôi chân (feet).

Cái đầu (Head), cái chân (feet) và cái tay (arms) là những thành phần đi cùng với component này. Nó có thể là những component con của component cha là stick-man.

Sử dụng quy luật đặt tên BEM, tên element class được lấy bằng cách thêm hai dấu gạch dưới sau tên của element.

Ví dụ:

M được hiểu là Modifiers (chỉnh sửa)

Sẽ như thế nào nếu người que này có màu xanh hoặc màu đỏ nhỉ ?

Trong thực tế thì có thể là button màu xanh hoặc button màu đỏ. 

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

Ví dụ:

Ví dụ cuối cùng sẽ cho thấy không phải lúc nào cũng chỉ thay đổi component cha.

Sẽ như thế nào nếu chúng ta có thêm một người que khác và người que đó cái đầu kích cỡ khác?

Lần này là element bị chỉnh sửa. Hãy nhớ lại, element là một component con của nguyên cái block. .stick-man là đại diện cho một Block, .stick-man__head là element. 

Cũng như ví dụ ở trên, sử dụng hai dấu gạch nối như thế này:

Một lần nữa, ghi nhớ lại cách sử dụng của hai dấu gạch nối trong ví dụ trên có nghĩa là biểu thị là có chỉnh sửa.

Bây giờ bạn đã hiểu nó.

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