😀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>

3🌟 Selectors

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

4🌟 Nested selectors

5 🌟 Naming

6 🌟Single responsibility principle

Correct:

Incorrect:

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

Last updated

Was this helpful?