CSS使用BEM命名规范实践

当你看到一个class的时候，你想得到什么信息？

这个class用在什么地方，作用 是什么 ？ 是否 在其他地方也有使用该class，修改会不会引起其他地方的样式问题？ class 是否在js中被使用？ .. ....

此时，你最想一眼看到这个class就解决以上所有的问题，而BEM你值得拥有

什么是BEM

BEM（块，元素，修饰符）是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。

优势

避免样式冲突 减小名称长度 提高 可阅读性 增加样式重用

怎么使用BEM

Block

一个功能独立的页面组件，可以重复使用

块不应影响其环境，这意味着您不应设置块的外部几何形状（ 边距 ）或位置

<!--
    good
-->
< div  class = "header" > </ div >

<!--
    bad
     red  -t ext 是描述 外观 
-->
< div  class = "red-text" > </ div >

Element

块的复合部分，不能单独使用

元素全名的结构为block-n am e__element-name

<!-- 块 `se Arch -form` -->
<form class="search-form">
    <!-- `input button` 元素 在 `search-form` 块中 -->
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

一个元素始终是块的一部分，而不是另一个元素，因此元素名称不可定义为 block__elem1__elem2 的层次结构

<!--
    good
    遵循 `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input">
        <button class="search-form__button">Search</button>
    </div>
</form>

<!--
    bad
    ' search-form__content__button ' 不遵循 `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__content__input">
        <button class="search-form__content__button">Search</button>
    </div>
</form>

元素始终是一个块的一部分，您不 应该 与该块分开使用

<form class="search-form">
    <!-- 
        good
        元素在块 search-form 的里面
     -->
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

<form class="search-form"></form>
<!--
    bad 
    元素不在块 search-form 的里面
-->
<input class="search-form__input">
<button class="search-form__button">Search</button>

Modifier

定义块或元素的外观，状态或行为的实体

修饰符的两种类型

Boolean

修饰符全名的结构遵循以下模式：

block-name_modifier-name block-name--modifier-name block-name_element-name_modifier-name block-name_element-name--modifier-name

<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- 'disabled' 是 'button' 的元素 -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

Key-value

修饰符全名的结构遵循以下模式：

block-name_modifier-name_modifier-value block-name_modifier-name--modifier-value block-name__element-name_modifier-name_modifier-value block-name__element-name_modifier-name--modifier-value

<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <!-- 
        good
        `button` 的修饰符 `size` 的值是 `m` 
    -->
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

<form class="search-form
             search-form_theme_islands
             search-form_theme_l IT e">
    <input class="search-form__input">

    <!-- 
        bad
        不可同时使用两个不同值的相同修饰符 
    -->
    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
   </button>
</form>

不能将修饰符与修饰的块或元素隔离使用。修饰符应更改实体的外观，行为或状态，而不是替换它

<!--
    good
-->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

<!-- 
    bad
    缺少了块名称 'search-form' 
-->
<form class="search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

在修饰符和元素名称中添加块名称的好处

有助于减少一个块的元素和修饰符对另一个块的实现的影响 可更清楚的 知道 修饰符应用于该DOM节点上的哪个实体 唯一名称使查找代码或文件系统中的实体变得更加容易

什么时候应该用 BEM 格式

使用 BEM 的诀窍是，你要知道什么时候 哪些 东西是应该写成 BEM 格式的。 并不是每个地方都应该使用 BEM 命名方式。当需要 明确 关联性的模块关系时，应当使用 BEM 格式。 比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：

.hide {
    dis play : none !important;
}

命名规范

双下划线风格
block-name__elem-name--mod-name--mod-val

名称以小写拉丁字母书写。 BEM实体名称中的单词由连字符（-）分隔。 元素名称与块名称之间用双下划线（__）分隔。 布尔修饰符用双连字符（--）与块或元素的名称分隔。 修饰符的值与其名称之间用双连字符（--）分隔。 （ 重要 提示：注释（--）中的双连字符可能会在HT ML 文档验证期间导致错误。）

CamelCase style
blockName-elemName_modName_modVal

名称以拉丁字母书写。 名称中的每个单词都以大写字母开头。 块，元素和修饰符名称的分隔符与标准 方案 中的相同

React命名范式
BlockName-ElemName_modName_modVal

名称以拉丁字母书写。 块和元素的名称以大写字母开头。修饰符的名称以小写字母开头。 名称中的每个单词都以大写字母开头。 元素名称与块名称之间用单个连字符（-）分隔。 修饰符的名称和值之间的分隔符与标准方案中的相同。

没有命名空间样式
_av ai lable

名称以拉丁字母书写。 修饰符之前不包括块或元素的名称。此命名方案限制了 mixs 的使用，因为它无法确定修饰符属于哪个块或元素。

常用的CSS命名

例子

vant 组件 css 命名

使用的命名是双下划线风格：block-name__element-name--modifier-name

<div class="van-doc">
    <div class="van-doc-header">
        <div class="van-doc-row">
            <div class="van-doc-header__top">
                <a class="van-doc-header__ LOG o">搜索</a>
                <ul class="van-doc-header__top-nav">
                    <li class="van-doc-header__top-nav -i tem">
                        <a class="van-doc-header__logo-link">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="van-doc-container van-doc-row van-doc-container--with -s imulator">
        ......
    </div>
</div>

weui 组件 css 命名

使用的命名是 React命名风格：block-name__element-name_modifier-name

<div class="page button js_show">
    <div class="page__hd">
        < h1  class="page__title">Button</h1>
        <p class="page__desc">按钮</p>
    </div>
    <div class="page__bd">

        <div class="button-sp-area">
            <a class="weui- BT n weui-btn_ Primary ">页面主操作</a>
            <a class="weui-btn weui-btn_loading">页面主操作</a>
            <a class="weui-btn weui-btn_disabled>页面主操作</a>
            <a class="weui-btn weui-btn_default">页面次要操作</a>
            <a class="weui-btn weui-btn_warn">警告类操作</a>
        </div>
        ....
        <div class="button-sp-area cell">

校验 BEM 规范工具

stylelint-selector-bem-pattern

到此这篇关于CSS使用BEM命名规范实践的 文章 就介绍到这了,更多相关CSS BEM命名规范内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS使用BEM命名规范实践 全部内容，希望文章能够帮你解决 CSS使用BEM命名规范实践 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS使用BEM命名规范实践的详细内容...