class 命名技巧

最新推荐文章于 2024-04-17 18:21:37 发布

weixin_34402408

最新推荐文章于 2024-04-17 18:21:37 发布

阅读量456

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/1791915/blog/784658

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/u/1791915/blog/784658