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

Tìm hiể về BEM
1. BEM là gì?
Làm 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
2. Quy ước đặt tên
.block {} /*Block*/
.block__element {} /*Element*/
.block--modifier {} /*Modifire*/
......................
.block là thành phần cấp to nhất của abstraction hoặc component. 
.block__element là thành phần con bên trong của block.
.block--modifier là phiên bản khác của block.
3. Giải thích về BEM qua ví dụ
3.1 Ví dụ về HTML sử dụng BEM
<a href="#"> calss="btn btn--green"</a>
Ở đây btn là block và btn--grenn là modifier
Style của chúng ta như sau:
3.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. 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 ...."></a>
Biến tấu mới sẽ như sau
<a class="block -modifier"></a>
4.1 MỘt số 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 {
    ...
  }
}
5. Các bước áp dụng BEM khi làm dự án Front-end thực tế
Bước 1:  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.
Bước 2: Tên selector của component thì đặt là namespace
Bước 3:  Á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>
#1 
Tài Liệu BEM
https://docs.google.com/document/d/1r7E_M03LZp_0LJFD6E7Qcdg74mP-ue76E2GzlIMe4Uk/edit
#2
Tìm hiểu về BEM - Giới thiệu
https://viblo.asia/p/tim-hieu-ve-bem-gioi-thieu-qzaGzNMzGyO
#3
We build Envato
https://webuild.envato.com/blog/chainable-bem-modifiers/
#4
dat_ten_id_class.txt
https://gist.github.com/buihuynhhung/71e5f6b1a74e4723b668b1557f2d0640
#5
Tiết kiệm thời gian với quy ước đặt tên CSS
https://viblo.asia/p/tiet-kiem-thoi-gian-voi-quy-uoc-dat-ten-css-maGK78PMZj2
#6
BEM theo ví dụ
https://techmaster.vn/posts/34580/bem-theo-vi-du
#7
Sử dụng ký pháp BEM cho CSS
https://int3ractive.com/2015/12/ky-phap-bem-trong-css.html