> For the complete documentation index, see [llms.txt](https://learnhtml.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnhtml.gitbook.io/project/untitled.md).

# 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
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://learnhtml.gitbook.io/project/untitled.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.