Tiết kiệm thời gian với quy ước đặt tên CSS

CSS (Cascading Style Sheet) không khó để học, tuy nhiên cần phải tìm hiểu thêm những kỹ thuật đi kèm để sử dụng một cách tối ưu nhất. Trong lập trình thì việc đặt tên cho biến với hàm khá tốn thời gian :v

1. Không đặt tên theo kiểu camelCase

• Dùng dấu - để phân cách
• Luôn dùng .red-text thay cho .redText
• Bởi vì để tránh lẫn lộn với các biến trong JavaScript (Đã sử dụng kiểu camelCase)

2. Quy ước BEM

BEM là một phương pháp đặt tên class cho HTML và CSS, được phát triển tại Yandex. Giúp lập trình viên tiết kiệm thời gian viết code và debug. BEM là viết tắt của:

• Block ––– Khu vực của đối tượng cần viết CSS.
• Element – Các phần tử bên trong của Block.
• Modifier – Tính chất của phần tử.

Khi đặt tên cho Class ta thường cố gắng để chỉ cần nhìn vào tên Class có thể biết được ngay:

• Class đó được sử dụng ở đâu.
• Class đó có nhiệm vụ gì.
• Quan hệ với các Class thế nào.

Quy tắc BEM giải quyết được cả 3 vấn đề trên => Vì vậy nó đang được sử dụng trong những thư viện CSS lớn. (Bootstrap...)

// Một Block độc lập
.stick-man {}
// Element head (Block con) phụ thuộc vào Block stick-man
.stick-man__head {}
// Tính chất của Block stick-man
.stick-man--red {}
// Tính chất của Block stick-man__head
.stick-man__head--blue {}

==> Ý nghĩa các dấu phân cách: - ::: 1 gạch ngang : Ngăn cách tên (Phần 1) __ : 2 gạch dưới :::: Đặt trước block con -- : 2 gạch ngang : Đặt trước thuộc tính

Ngoại hình nó tuy khó nhìn nhưng khả năng mà nó đem lại vô cùng lớn