BEM trong front end cho người mới - Quy tắc BEM trong css SASS SCSS

2021-03-25 1816 lượt xem

Mục lục [ hide ]

BEM là gì?

BEM là viết tắt của Block-Element-Modifier, là một tiêu chuẩn quy ước đặt tên cho các tên lớp CSS. BEM giúp cho việc code Frontend dễ đọc và dễ hiểu hơn, dễ làm việc và dễ mở rộng cũng như bảo trì khi làm việc với CSS.

Lưu ý BEM chỉ là 1 nguyên tắc, nó chỉ giúp clean hơn trong 1 project chứ không ảnh hưởng quá nhiều đến bạn.

Tại sao nên sử dụng BEM?

Bạn cứ tưởng tưởng khi làm 1 project có rất nheieuf ngừoi cùng làm. Chúng ta không sợ địch mạnh như hổ, chỉ sợ đồng đội viết code như l.... 😄 BEM giúp cho cả team làm việc với nhau dễ dàng. Cũng như 1 năm sau đọc lại code của mình còn hiểu chỗ đó hồi xưa mình ý đồ gì.

Tóm gọn thì chỉ là clean hơn thôi mà.

Cấu trúccơ bản của BEM

Block__Element--Modifier

đây là ảnh mình hoạ khi dùng BEM trong SASS

Một ví dụ khi SASS biên dịch ra file CSS với quy tắc BEM sẽ như sau:

/* class định nghĩa một block */
.product {  }
/* class định nghĩa element của block */
.product__title {  }
.product__description {  }
.product__image {  }
/* class định nghĩa các "biến thể" của block */
.product--style-1 {  }
.product--big {  }
.product--small {  }
.product__title--style-1 {  }

chủ đề