> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/css-with-bem-ok.md).
# CSS with BEM (ok)
**Positioning a block relative to other blocks**
1🌟 Để đặt vị trí của một khối so với các khối khác, cách tốt nhất thường là sử dụng kết hợp.
```
...
```
```
.page__header {
padding: 20px;
}
.page__footer {
padding: 50px;
}
```
2🌟 **Positioning elements inside a block**
Định vị các phần tử bên trong một khối thường bằng cách tạo thêm một phần tử khối (ví dụ: block\_\_inner).
```
...
```
```
.page__inner {
margin-right: auto;
margin-left: auto;
width: 960px;
}
```
### 3🌟 Selectors
BEM không sử dụng bộ chọn thẻ và ID.
```
```
#### 4🌟 Nested selectors
```
.button_hovered.button__text {
text - decoration: underline;
}
.button_theme_islands.button__text {
line - height: 1.5;
}
```
#### 5 🌟 Naming
```
.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}
```
```
```
```
...
```
```
.logo {} /* CSS class for the `logo` block */
.logo__img {} /* CSS class for the `logo__img` element */
.logo_theme_islands {} /* CSS class for the `logo_theme_islands` modifier */
.user {} /* CSS class for the `user` block */
.user__img {} /* CSS class for the `user__img` element */
.user_theme_islands {} /* CSS class for the `user_theme_islands` modifier */
```
#### 6 🌟Single responsibility principle
```
```
```
.button {
font-family: Arial, sans-serif;
border: 1px solid black;
background: #fff;
}
```
Correct:
```
.header__button {
margin: 30px;
position: relative;
}
```
Incorrect:
```
.header__button {
font-family: Arial, sans-serif;
position: relative;
border: 1px solid black;
margin: 30px;
}
```