时间戳

首页 > 解决方案 > css 的 BEM 约定

html - css 的 BEM 约定

问题描述

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

这是网站的标题部分：

<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约定在这里好吗？

谢谢

标签： htmlcssfrontendconventions

解决方案

使用此代码是正确的 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>

推荐阅读