Hướng dẫn cách đặt tên css

Đã đăng vào thg 1 19, 2018 2:28 CH 2 phút đọc

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

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:

    
 Chi Pu 
    // 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à:

    
 Chi Pu 
    // 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: //www.freecodecamp.org, //getbem.com/

All rights reserved

1. GIỚI THIỆU BEM

Trên các trang web nhỏ, cách bạn tổ chức các style của mình thường không phải mối quan tâm lớn. Tuy nhiên, đối với các dự án lớn hơn, phức tạp hơn, cách bạn tổ chức code của mình là chìa khóa để đạt được hiệu quả cao hơn, nó sẽ ảnh hưởng đến việc bạn mất bao lâu để viết code, bạn sẽ phải viết bao nhiêu code và trình duyệt của bạn sẽ phải tải bao nhiêu. Điều này trở nên đặc biệt quan trọng khi bạn làm việc với nhóm các lập trình viên chuyên nghiệp và khi hiệu suất cao là điều cần thiết.

Có nhiều phương pháp nhằm mục đích giảm lượng CSS, giúp bảo trì cơ sở mã CSS lớn tốt hơn và hỗ trợ cho việc hợp tác giữa các lập trình viên hiệu quả hơn, như OOCSS, AMCSS, SMACSS, SUITCSS, BEM, Atomic,…

Tại sao nên chọn BEM?

Cho dù bạn chọn sử dụng phương pháp nào trong các dự án của mình, thì việc dùng CSS và UI có cấu trúc hơn cũng sẽ mang lại lợi ích cho bạn.

“Lý do tôi chọn BEM mà không phải các phương pháp khác là do BEM ít gây nhầm lẫn hơn các phương pháp khác [SMACSS] nhưng vẫn cung cấp cho chúng ta cấu trúc tốt mà chúng ta muốn [OOCSS] với một thuật ngữ dễ nhận biết.” – theo Mark McDonnell trong “Maintainable CSS with BEM”.

BEM là gì?

BEM là tên viết tắt của: Block, Element, Modifier, là một phương pháp giúp bạn tạo ra các components có thể tái sử dụng và chia sẻ code trong phát triển front-end.

Tên class BEM bao gồm 3 thành phần: block, element và modifier [có thể hiểu là: khối, phần tử và sửa đổi]. Trong bài này, tên các thành phần của BEM sẽ được giữ nguyên tên theo tiếng Anh cho dễ hình dung.

Nếu cả ba được dùng chung thì tên class BEM sẽ như thế này: block__element--modifier

Định nghĩa block, element, modifier

2. QUY TẮC ĐẶT TÊN

Chỉ có hai vấn đề khó khăn trong Khoa học máy tính: vô hiệu hóa bộ đệm và đặt tên cho mọi thứ.

_Phil Karlton_

Thực tế là, hầu hết các cơ sở mã CSS đôi khi được phát triển mà không có bất kỳ cấu trúc hoặc quy ước đặt tên cụ thể nào. Điều này dẫn đến việc cơ sở mã CSS không thể khắc phục được trong thời gian dài.

BEM đảm bảo rằng tất cả những người tham gia phát triển một trang web đều hoạt động với một cơ sở mã duy nhất và dùng cùng một ngôn ngữ. Sử dụng cách đặt tên phù hợp sẽ giúp bạn có chuẩn bị tốt hơn cho những thay đổi trong thiết kế của trang web sau này.

Quy tắc, cách sử dụng BEM đối với block, element, modifier

BLOCK

Quy tắc đặt tên

• Tên block có thể bao gồm các chữ cái Latinh, chữ số và dấu gạch ngang.
• Tạo CSS class: thêm một tiền tố vào phía trước. VD: .block

HTML

• Bất kỳ node [nút] DOM nào cũng có thể là một block nếu nó có một class name.
• VD: 

...

Cách dùng trong CSS

• Chỉ sử dụng bộ chọn class
• Không dùng tên tag [thẻ] hoặc id
• Không phụ thuộc vào các block/element khác trên một trang
• VD:

.block { color: #042; }

ELEMENT

Quy tắc đặt tên

• Tên element có thể bao gồm các chữ cái Latinh, chữ số, dấu gạch ngang và dấu gạch dưới. 
• Tạo class CSS: tên block cộng với hai dấu gạch dưới, cộng với tên element.
• VD: .block__elem

HTML

• Bất kỳ node DOM nào trong một block đều có thể là một element.
• Trong một block nhất định, tất cả các element đều bằng nhau về mặt ngữ nghĩa.
• VD: 

            ...
   

Cách dùng trong CSS

• Chỉ sử dụng bộ chọn class
• Không dùng tên tag [thẻ] hoặc id
• Không phụ thuộc vào các block/element khác trên một trang
• VD: 

- Nên: 

.block__elem { color: #042; }

- Không nên: 

.block .block__elem { color: #042; }

div.block__elem { color: #042; }

MODIFIER

Quy tắc đặt tên

• Tên của modifier có thể bao gồm các chữ cái Latinh, chữ số, dấu gạch ngang và dấu gạch dưới. 
• Tạo class CSS: tên block hoặc element cộng với hai dấu gạch ngang, cộng với tên modifier.
• Dấu cách trong các modifier dài [chứa 2 tiếng trở lên] được thay thế bằng dấu gạch ngang.
• VD: 

.block--mod { }
.block__elem--mod { }
.block--color-black { }
.block--color-red { }

HTML

• Modifier là tên class mà bạn thêm vào node DOM block/element. 
• Tăng thêm các modifier class vào các block/element mà chúng ta cần sửa đổi và giữ lại class ban đầu của block/element đó.
• VD:

- Nên [thêm các class mới có chứa modifier, và giữ nguyên class cũ .block]:

...
...

- Không nên [thay thế class cũ]:

...

Cách dùng trong CSS

• Sử dụng modifier class làm bộ chọn CSS. VD:

.block--hidden { }

• Thay đổi các element dựa trên block có chứa modifier. VD: 

.block--mod .block__elem { }

• Element có modifier. VD:

.block__elem--mod { }

3. CÁC VÍ DỤ

VD1:Giả sử bạn có một block là form với modifier [phần bạn muốn sửa đổi] là theme: "xmas" và simple: true.

Trong block form chứa các element là input và submit. Trong đó, element submit có modifier của riêng nó là disabled: true [mục đích là không cho phép gửi form đi khi chưa được điền], thì HTML và class CSS khi đó được viết như sau:

HTML

CSS

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

VD2: Hãy xem cách một phần tử cụ thể trên trang được triển khai trong BEM như thế nào. Chúng ta sẽ lấy ví dụ từ button [nút] trên GitHub:

Chúng ta có thể có một button bình thường [Normal button] cho các trường hợp thông thường và hai trạng thái khác cho các trường hợp khác nhau [Success button, Danger button]. Chúng ta có thể tạo ra các button bằng cách sử dụng bất kỳ tag [thẻ] nào chúng ta muốn [button, a hoặc thậm chí là div], sau đó chúng ta style cho block bằng bộ chọn class với BEM. 

Theo quy tắc đặt tên của BEM, chúng ta sử dụng cú pháp block--modifier-value.

HTML

Normal button
Success button
Danger button

CSS

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
    background-image: linear-gradient[#EEE, #DDD];
    font: 700 13px/18px Helvetica, arial;
}

.button--state-success {
	color: #FFF;
    background: #569E3D linear-gradient[#79D858, #569E3D] repeat-x;
	border-color: #4A993E;
}

.button--state-danger {
	color: #900;
}

LƯU Ý QUAN TRỌNG KHI SỬ DỤNG BEM

BEM không có mục đích phản ánh cấu trúc lồng nhau của các block, các element.
Giả sử: Một block chứa element 1, element 1 chứa element 2, element 2 chứa element 3. Khi đó, tên class của block và element nên đặt như sau:

HTML

CSS

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Đặt class như vậy, sẽ làm cho các element chỉ phụ thuộc vào block. Sau này, nếu bạn muốn thay đổi giao diện, bạn có thể dễ dàng di chuyển vị trí của các element trong block, cấu trúc của block DOM lúc này tuy đã thay đổi nhưng bạn không phải lo sửa code CSS ban đầu.

4. LỢI ÍCH KHI SỬ DỤNG BEM

Tham khảo: getbem.com