😀CSS with BEM (ok)

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.

<body class="page">
    <!-- header and navigation-->
    <header class="header page__header">...</header>

    <!-- footer -->
    <footer class="footer page__footer">...</footer>
</body>

.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).

<body class="page">
    <div class="page__inner">
      <!-- header and navigation-->
      <header class="header">...</header>

      <!-- footer -->
      <footer class="footer">...</footer>
    </div>
</body>

.page__inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}

3🌟 Selectors

BEM không sử dụng bộ chọn thẻ và ID.

<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

.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 {}

<button class="button button_theme_islands">
    <span class="button__icon"></span>
    <span class="button__text">...</span>
</button>

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

.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

<header class="header">
    <button class="button header__button">...</button>
</header>

.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;
}

PreviousHTML with BEM (ok)Next=== END Tutorials Classical BEM stack ===

Last updated 2 years ago