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...)

Ví dụ sử dụng ký pháp BEM (stick-man) :

// 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

3. Class liên quan đến JavaScript

Giả sử Hưng (chỉ code HTML + CSS) và bạn cùng làm chung 1 dự án. Bạn có viết 1 đoạn code:

    <h3 class="human--handsome"> Chi Pu </h3>
    // CSS code
    .human--handsome {
        color: red;
    }
    // Javasript code
    var name = document.querySelector('.human--handsome');
    getMoneyByName(name);

Và sau đó Hưng thấy code của bạn, tự dưng nổi hứng sửa lại là:

    <h3 class="human--beautiful"> Chi Pu </h3>
    // CSS code
    .human--beautiful {
        color: red;
    }

Nhưng do không ngờ rằng Class "human--handsome" đang được sử dụng trong file JavaScript.
Hậu quả lúc này hàm getMoneyByName() của bạn sẽ trả về 0đ @@

Khắc phục

Sử dụng "js-" thêm vào trước tên Class.
Lúc này sẽ là: "js-human--handsome" => Không sửa linh tinh => getMoneyByName() OK

4. Sai lầm hay mắc phải khi sử dụng BEM

Vấn đề này tôi sẽ tổng hợp đầy đủ trong 1 bài viết tiếp theo. またね。。。

nguồn: https://www.freecodecamp.org, http://getbem.com/