😀HTML with BEM (ok)

https://en.bem.info/methodology/html/#binding-blocks-to-a-dom-node

1 😁 Binding blocks to a DOM node

Để chỉ định rằng một khối, một phần tử hoặc một công cụ sửa đổi nằm trên một nút DOM, tên của nó được viết trong thuộc tính class.

Một nút DOM duy nhất tương ứng với một khối duy nhất:

<span class="menu"></span>

2 😁 Several blocks on one DOM node

Để kết hợp các kiểu và hành vi của một số thực thể BEM, hãy đặt chúng trên cùng một nút DOM. Để thực hiện việc này, hãy thêm tên của các thực thể BEM được phân tách bằng dấu cách trong thuộc tính lớp. Cách tiếp cận này được gọi là hỗn hợp.

<span class="menu menu_theme_bright"></span>

3😁 Nesting of elements

Quy ước đặt tên không cho phép phân cấp trong tên phần tử (block__elem1__elem2). Nhưng bạn có thể lồng các phần tử HTML vào nhau. Độ sâu không bị giới hạn.

<ul class="menu">
    <li class="menu__item">
        <a class="menu__link" href="https://">...</a>
    </li>
</ul>

4😁 Using HTML wrappers

Phương pháp BEM không khuyến nghị sử dụng trình bao bọc HTML để định vị một khối so với khối khác hoặc định vị các khối trong khối khác. Đối với những mục đích này, hãy luôn sử dụng hỗn hợp.

5😁 Positioning a block relative to other blocks

Để định vị một khối so với các khối khác, hãy 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>

6 😁 Positioning HTML elements inside a block

Để định vị các phần tử HTML bên trong một khối, hãy sử dụng một phần tử khối bổ sung (ví dụ: button__inner).

<button class="button">
    <span class="button__inner">
        <span class="icon"></span>
    </span>
</button>

Previous=== START Tutorials Classical BEM stack ===NextCSS with BEM (ok)

Last updated 2 years ago