https://en.bem.info/methodology/css/
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.
Copy <body class="page">
<!-- header and navigation-->
<header class="header page__header">...</header>
<!-- footer -->
<footer class="footer page__footer">...</footer>
</body>
Copy .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).
Copy <body class="page">
<div class="page__inner">
<!-- header and navigation-->
<header class="header">...</header>
<!-- footer -->
<footer class="footer">...</footer>
</div>
</body>
Copy .page__inner {
margin-right: auto;
margin-left: auto;
width: 960px;
} 3🌟 Selectors
BEM không sử dụng bộ chọn thẻ và ID.
Copy <header class="header">
<!--
`header__button` — block element `header`;
`button` — block;
`button_theme_islands` — modifier.
-->
<button class="header__button button button_theme_islands">...</button>
</header> 4🌟 Nested selectors
Copy .button_hovered.button__text {
text - decoration: underline;
}
.button_theme_islands.button__text {
line - height: 1.5;
} 5 🌟 Naming
Copy .button {}
.button__icon {}
.button__text {}
.button_theme_islands {}
Copy <button class="button button_theme_islands">
<span class="button__icon"></span>
<span class="button__text">...</span>
</button>
Copy <!-- `logo` block -->
<div class="logo logo_theme_islands">
<img src="URL" alt="logo" class="logo__img">
</div>
<!-- `user` block-->
<div class="user user_theme_islands">
<img src="URL" alt="user-logo" class="user__img">
...
</div>
Copy .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
Copy <header class="header">
<button class="button header__button">...</button>
</header>
Copy .button {
font-family: Arial, sans-serif;
border: 1px solid black;
background: #fff;
} Correct:
Copy .header__button {
margin: 30px;
position: relative;
} Incorrect:
Copy .header__button {
font-family: Arial, sans-serif;
position: relative;
border: 1px solid black;
margin: 30px;
}