css 的 BEM 约定

Question

我是 BEM 公约的初学者。我看了很多关于它的视频，但是在编码方面我有点困惑。

这是网站的 header 部分：

<header class="header">
            <div class="header__logo-box">
                <img src="images/logo.png" alt="" class="header__logo">
                <h1 class="header__tittle">Happy Years</h1>
            </div>
            <nav class="header__navbar">
                <ul class="header__navbar-list">
                    <li class="header__navbar__item">
                        <a href="" class="header__navbar__link">More Us</a>
                    </li>
                    <li class="header__navbar__item">
                        <a href="" class="header__navbar__link">How it works</a>
                    </li>
                </ul>
            </nav>
        
   </header>

所以我有带有 h1 和 2 链接的徽标。 BEM 约定在这里可以吗？

谢谢

Answer 1

使用这段代码是正确的 BEM 结构

<header class="header">
            <div class="header__logo-box">
                <img src="images/logo.png" alt="" class="header__logo">
                <h1 class="header__title">Happy Years</h1>
            </div>
            <nav class="header__navbar">
                <ul class="header__navbar-list">
                    <li class="header__navbar-item">
                        <a href="" class="header__navbar-link">More Us</a>
                    </li>
                    <li class="header__navbar-item">
                        <a href="" class="header__navbar-link">How it works</a>
                    </li>
                </ul>
            </nav>
   </header>

css 的 BEM 约定

BEM Convention for css

html

css

frontend

conventions