Quy ước tên cho CSS sẽ giúp bạn tiết kiệm thời gian khi debug

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.

Bạn đã từng như vậy phải không?

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

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

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

Đừng bao giờ:

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

Đâ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.

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:

Đó là quy tắc BEM.

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: