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

Posted on by mtoplistChuyên mục:Top List

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 tên class 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ài này mình giới thiệu sơ qua về BEM, cách sử dụng của nó. Áp dụng nó vào dự án thực tế. Để hiểu thêm về nó các bạn có thể tìm hiểu qua google hoặc 1 số link dưới đây
    • https://webuild.envato.com/blog/chainable-bem-modifiers/
    • https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
    • http://apollo13.vn/lap-trinh/css/bem-la-gi.html
  • Tài liệu BEM cho các bạn đọc thêm do mình soạn thảo https://docs.google.com/document/d/1r7E_M03LZp_0LJFD6E7Qcdg74mP-ue76E2GzlIMe4Uk/edit?usp=sharing

mtoplist