class 命名技巧

class 命名技巧

CSS Modules 的命名规范是从 BEM 扩展而来。BEM 把样式名分为 3 个级别，分别是：

• Block：对应模块名，如 Dialog
• Element：对应模块中的节点名 Confirm Button
• Modifier：对应节点相关的状态，如 disabled、highlight

综上，BEM 最终获得的 class 名为 dialog__confirm-button--highlight。使用双符号__ 和 -- 是为了和区块内单词间的分隔符区分开来。虽然看起来有点奇怪，但 BEM 被很是多的大型项目和团队采用。咱们实践下来也很承认这种命名方法。

 

下划线模式在选择器名称下应该只能出现一次。BEM表明Block__Element--Modifier,并非 Block__Element__Element--Modifier 。 所以，须要避免多个元素级别命名。这时若是你存在多层嵌套，你可能就须要从新审视你的组件结构了。

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Title text here</h2>
    </div>

    <div class="c-card__body">

        <img class="c-card__img" src="some-img.png" alt="description">
        <p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="c-card__text">Adipiscing elit.
            <a href="/somelink.html" class="c-card__link">Pellentesque amet</a>
        </p>

    </div>
</div>