skyrim mod

Skyrim nothing impossible

Viết CSS theo quy tắc BEM

author photo

ByNghệ Sĩ Ưu Tú

-
BEM-.png 

Bài này mình cũng tình cờ đọc được trên mạng , thấy hay hay nên copy lên trang làm tư liệu.


BEM(viết tắc của Block, Element, Modifier) là qui tắc đặt tên thông dụng cho class trong HTML và CSS. Được tạo ra bởi team ở Yandex, mục đích là để giúp các lập trình viên hiểu được mối quan hệ giữa HTML và CSS trong 1 project.


Sau đây là ví dụ mà lập trình viên CSS viết CSS theo kiểu BEM




/* Block component */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}


Trong phương pháp này, block là thành phần trừu tượng cấp trên cùng của 1 component mới, ví dụ như button: .btn {}. element là item con trong block, được thể hiện bằng 2 dấu gạch dưới ngay sau tên block như .btn__price { }. modifier dùng để chỉnh sửa lại block hay element, cho phép chỉnh sửa lại theme hay kiểu mà không ảnh hưởng gì đến các component có sẳn, tạo modifier bằng các thêm 2 gạch giữa ngay sau tên block như .btn--orange


code HTML có dạng như sau.




<a class="btn btn--big btn--orange" href="http://css-tricks.com">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>


Nếu 1 lập trình viên nào khác viết ra code trên, và chúng ta không quen làm với CSS, thì ta vẫn có thể hiểu được class nào chịu trách nhiệm cho việc gì, và chúng phụ thuộc nhau như thế nào. Lập trình viên có thể tạo component và chỉnh sửa các block sẳn có để phù hợp với nội dung của họ. Không cần viết nhiều CSS, các lập trình viên có thể viết nhiều dạng khác nhau của các button chỉ bằng các đơn giản là đổi class trong html như sau



Lúc đầu nhìn vào, syntax này trông có vẻ dài dòng hơn so với việc tạo class mới cho mỗi kiểu button, nhưng nó có 1 số điểm lợi như sau.


Tại sao chúng ta nên quan tâm đến BEM



  1. Nếu chúng ta muốn tạo một kiểu mới cho component, chúng ta có thể dể dàng thấy các modifier và class con đang có sẵn. Chúng ta có thể không cần viết thêm CSS, vì đã tồn tại modifier phù hợp với yêu cầu.

  2. Nếu chúng ta chỉ đọc HTML, chúng ta vẫn có thể nhanh chóng hình dung được element nào phụ thuộc vào element nào(ở ví dụ trước chúng ta thấy .btn__price phụ thuộc vào .btn, thâm chí chúng cũng ko cần biết cụ thể CSS chúng làm gì).

  3. Người thiết kế và lập trình viên có thể đặt tên các component một cách cố định nhằm làm dể dàng trong trao đổi giữa các thành viên trong nhóm, BEM cung cấp cho mọi người trong project một syntax khai báo mà họ có thể share với nhau.


Harry Roberts chỉ ra một lợi ích chính khi dùng syntax giống như BEM là nó làm cho lập trình viên nâng cao sự tự tin


Đây chính làm nguyên nhân chúng ta không muốn làm việc với những source code lớn, đầy mối quan hệ chằng chịt và CSS không rõ ràng. Chúng ta thiếu tự tin trong làm việc cùng và thay đổi kiểu đã tồn tại từ trước bởi vì ta sợ hậu quả của tác động toàn cục CSS. Chúng ta không dám thay đổi vì không chắc ảnh hưởng của thay đổi này sẽ đi đến đâu.


Cũng tương tự như vậy, Philip Walton cũng cho rằng vấn đề này có thể giải quyết được nếu lập trình viên theo các nguyên tắc của BEM:


Không có code nào mà 100% có thể dự đoán được, vì vậy điều quan trọng là bạn phải hiểu được những đánh đổi gây ra bởi nguyên tắc do bạn chọn. Nếu bạn tuân theo đúng nguyên tắc BEM, bạn có thể cập nhật, thêm CSS trong tương lai với tất cả sự tự tin là các thay đổi này sẽ không có ảnh hưởng phụ.


Vì vậy nếu lập trình viên có thể làm việc một cách tự tin, thì chắc chắn họ sẽ ra quyết định thông minh hơn về cách thức các component được sử dụng. Phương pháp này có thể không phải là giải pháp hoàn hảo cho tất cả các khó khăn trong việc đặt tên class CSS, nhưng nó chắc chắn cung cấp cho lập trình viên một tiêu chuẩn để viết, và kiểm soát code tốt hơn trong tương lai.


Một phần thú vị của BEM nữa là mọi cái đều là class và không lồng nhau. Điều này làm độ riêng biệt của CSS trở nên phẳng và thấp(ít lồng nhau, và phụ thuộc lẫn nhau). Có nghĩa là bạn không phải chiến đấu với chính mình về độ riêng biêt(sự phân biệt, độ ưu tiên của CSS)


Hãy xem một vài vấn đề gặp phải khi dùng BEM…


Những vấn đề với BEM CSS


Dĩ nhiên không ai cản trở bạn nếu bạn không tuân theo các nguyên tắc của BEM. Bạn vẫn có thể viếc CSS giống như sau




.nav .nav__listItem .btn--orange {
background-color: green;
}


Code trên trông giống BEM, nhưng nó không phải là BEM. Nó có selector lồng nhau, và modifier không mô tả chính xác chuyện gì đang xảy ra. Nếu làm vậy, chúng ta đã bỏ đi tính phẳng của sự riêng biệt, phần rất có ích của BEM.


Một block(như .nav) không bao giờ được đè lên kiểu của block khác hay modifier(như .btn--orange). Mặt khác, cách viết này làm cho không thể đọc được code HTML và hiểu được component này làm gì; trong qui trình làm việc chúng ta phải thúc đẫy các lập trình viên khác tự tin trong thao tác với code. Bạn sẽ nghĩ gì khi thấy source code sau




<a class="btn" href="http://css-tricks.com">
class="nav__listItem">Item one

class="nav__listItem">Item two

</a>


Vấn đề ở đây là element đang nằm trong block không có liên quan. Điều này gây sự rối rắm khác thường và không nhất quán trong source code, vì vậy nên hết sức tránh. Tóm tắc cho vấn đề này là:



  1. Không overriding modifier trong block không có liên quan.

  2. Tránh tạo các thành phần cha khi thành phần này có thể tồn tại độc lâp.
Share