- vừa được xem lúc

Tìm hiểu về BEM trong 15 phút

0 0 15

Người đăng: ngocyen

Theo Viblo Asia

Tài liệu BEM do mình soạn thảo https://docs.google.com/document/d/1r7E_M03LZp_0LJFD6E7Qcdg74mP-ue76E2GzlIMe4Uk/edit

1. BEM là gì :

  • Là một quy ước đặt tên cho các class trong HTML và CSS
  • BEM là viết tắt của từ Block, Element, Modifier.
  • BEM được tạo bởi team của Yandex.

2. Quy ước đặt tên

 .block {} /* Block */ .block__element {} /* Element */ .block--modifier {} /* Modifier */

.block Thành phần cấp to nhất của abstraction hoặc component. .block__element Thành phần con bên trong của block .block--modifier Là 1 phiên bản # của block. Hay những thay đổi style khác so với style ban đầu

3. Giải Thích về BEM qua ví dụ

Một ví dụ về HTML sử dụng BEM

1. Modifier

 <a class="btn btn--green" href="#"> </a>

Ở đây btn là block .btn---green là modifier. Style của chúng ta như sau

 .btn { background: gray; border: 0; border-radius: 3px; box-shadow: none; padding: 5px 20px; color: #fff; font-size: 18px; line-height: 1.5; } /* style .btn--green */ .btn--green { background: green; }
  • Modifire: Các bạn cứ hiểu như là những thay đổi về style của .btn có 1 số điểm style khác so với .btn ban đầu. Ở đây btn--green thay đổi background từ màu xám sang màu xanh. Các bạn có thể thay đổi màu background, font-size, padding .... Tùy vào cách đặt của các bạn

2. Element

<div class="info"> <div class="info__title"> </div> <div class="info__description"> </div>
</div>
  • Ở đây info__title, info__description là thành phần con bên trong info.
 .info { background: #f2f4f7; margin-top: 23px; padding-bottom: 30px; &__description { font-size: 15px; font-family: "Kozuka Gothic Pr6N", sans-serif; } &__title { font-size: 20px; font-family: "Kozuka Gothic Pr6N", sans-serif; font-weight: bold; } }

4. Tại sao sử dụng BEM

  • Các bạn có bao giờ đau đầu suy nghĩ với việc nên đặt class html ra sao không? BEM là giải pháp giúp các bạn dễ dàng trong việc đặt class
  • Giúp code viêt đơn giản, dễ hiểu hơn, dễ sửa chữa. Đôi khi bạn style xong bạn còn chả biêt nó nằm ở đâu muốn sửa thì làm sao, nhưng với cách viết BEM bạn sẽ biết vị trí các thành phần HTML nằm đâu thông qua của nó rùi sửa. Với cách viết thông thường bạn sửa lại sợ ảnh hưởng đến chỗ khác.

5. Biến thể của BEM

  • Khi thay đổi về style modifier chúng ta sẽ thêm thuộc tính # chèn lên thuộc tính cũ. Nhưng với nhiều thay đổi chả lẽ bạn lại viết tất cả như thế này sao
<a class=" btn btn--primary btn--large btn--font-12 ....">
  • Nên chúng ta có biến thể về BEM cho việc viết đơn giản mà cung cấp cho chúng ta sự linh hoạt để cấu hình bất kỳ module nhất định. Nó phù hợp cho module với nhiều sửa đổi. Điều này rất có ích cho các phần tử tạo lên giao diện người dùng. Ví dụ như các button, icon, typography(kiểu chữ). Các bạn có thể đọc link sau https://webuild.envato.com/blog/chainable-bem-modifiers/

  • Biến tấu mới sẽ như sau:

 <a class="block -modifier">

ví dụ:

 <!-- Icon --> <i class="e-icon -icon-envato -color-green -size-xl -margin-right"></i> <!-- Typography --> <h2 class="t-heading -size-m -color-light">Heading</h2> <p class="t-body -size-s">Paragraph</p> <!-- Inputs --> <input class="f-input -type-string -width-full"> <!-- Notifications --> <div class="alert-box -type-success"> <div class="alert-box__icon"> <i class="e-icon -icon-ok"></i> </div> <div class="alert-box__message"> <p class="t-body -size-m h-remove-margin">Success!!</p> </div> </div> <!-- Button --> <button class="btn -color-green -bg-blue"></button>

Với style scss cho nó chúng ta chỉ cần viết như sau

.btn { .... &.-color-green { .... } &.-bg-blue { ... }
}
  • Vì vậy, đó là BEM (hoặc một biến thể nhẹ của nó), một quy ước đặt tên rất hữu ích, mạnh mẽ và đơn giản để làm cho code của bạn dễ đọc ,rõ ràng hơn và nghiêm ngặt hơn nhiều.

6. Các bước áp dụng BEM khi làm dự án Front-end thực tế

  • Khi bắt đầu 1 dự án chúng ta cần xem rõ guide và style những component dùng chung để có thể tái sử dụng được và tồn tại độc lập với các component khác. Chúng ta hãy xem các component của bootstrap một ví dụ tốt về component

  • Tên selector của component thì đặt là namespace

  • Áp dụng quy tắc BEM ở trên vào xây dựng website

     <div class="component -modifier"> <div class="component__subcomponent -subcomponent-modifier"></div> </div> 
     .component { &.-modifier {} } .component__subcomponent { &.-subcomponent-modifier {} } 

Chú ý : 1 element thì chỉ kế thừa từ 1 component

 ``` html <!-- NG --> <button class="grid button -center"> … </button> // -center ko thể kế thừa component của cả grid và button ``` ``` html <!-- OK --> <div class="grid -center"> <button class="button"> … </button> </div> ```

Kết Luận

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 373

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 689

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 334

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 417

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413