CSS如何使用BEM命名规范

这篇文章将为大家详细讲解有关CSS如何使用BEM命名规范，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

优势

• 避免样式冲突

• 减小名称长度

• 提高可阅读性

• 增加样式重用

怎么使用BEM

Block

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

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

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

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

Element

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

元素全名的结构为block-name__element-name

<!--块`search-form`-->
<formclass="search-form">
<!--`inputbutton`元素在`search-form`块中-->
<inputclass="search-form__input">
<buttonclass="search-form__button">Search</button>
</form>

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

<!--
good
遵循`block-name__element-name`
-->
<formclass="search-form">
<divclass="search-form__content">
<inputclass="search-form__input">
<buttonclass="search-form__button">Search</button>
</div>
</form>

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

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

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

<formclass="search-form"></form>
<!--
bad
元素不在块search-form的里面
-->
<inputclass="search-form__input">
<buttonclass="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

<formclass="search-formsearch-form_focused">
<inputclass="search-form__input">

<!--'disabled'是'button'的元素-->
<buttonclass="search-form__buttonsearch-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

<formclass="search-formsearch-form_theme_islands">
<inputclass="search-form__input">

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

<formclass="search-form
search-form_theme_islands
search-form_theme_lite">
<inputclass="search-form__input">

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

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

<!--
good
-->
<formclass="search-formsearch-form_theme_islands">
<inputclass="search-form__input">
<buttonclass="search-form__button">Search</button>
</form>

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

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

• 有助于减少一个块的元素和修饰符对另一个块的实现的影响

• 可更清楚的知道修饰符应用于该DOM节点上的哪个实体

• 唯一名称使查找代码或文件系统中的实体变得更加容易

什么时候应该用 BEM 格式

• 使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。

• 并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。

• 比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：

.hide{
display:none!important;
}

命名规范

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

• 名称以小写拉丁字母书写。

• BEM实体名称中的单词由连字符（-）分隔。

• 元素名称与块名称之间用双下划线（__）分隔。

• 布尔修饰符用双连字符（--）与块或元素的名称分隔。

• 修饰符的值与其名称之间用双连字符（--）分隔。

• （重要提示：注释（--）中的双连字符可能会在HTML文档验证期间导致错误。）

CamelCase styleblockName-elemName_modName_modVal

• 名称以拉丁字母书写。

• 名称中的每个单词都以大写字母开头。

• 块，元素和修饰符名称的分隔符与标准方案中的相同

React命名范式BlockName-ElemName_modName_modVal

• 名称以拉丁字母书写。

• 块和元素的名称以大写字母开头。修饰符的名称以小写字母开头。

• 名称中的每个单词都以大写字母开头。

• 元素名称与块名称之间用单个连字符（-）分隔。

• 修饰符的名称和值之间的分隔符与标准方案中的相同。

没有命名空间样式_available

• 名称以拉丁字母书写。

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

常用的CSS命名

例子

vant 组件 css 命名

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

<divclass="van-doc">
<divclass="van-doc-header">
<divclass="van-doc-row">
<divclass="van-doc-header__top">
<aclass="van-doc-header__logo">搜索</a>
<ulclass="van-doc-header__top-nav">
<liclass="van-doc-header__top-nav-item">
<aclass="van-doc-header__logo-link">
</li>
</ul>
</div>
</div>
</div>
<divclass="van-doc-containervan-doc-rowvan-doc-container--with-simulator">
......
</div>
</div>

weui 组件 css 命名

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

<divclass="pagebuttonjs_show">
<divclass="page__hd">
<h2class="page__title">Button</h2>
<pclass="page__desc">按钮</p>
</div>
<divclass="page__bd">

<divclass="button-sp-area">
<aclass="weui-btnweui-btn_primary">页面主操作</a>
<aclass="weui-btnweui-btn_loading">页面主操作</a>
<aclass="weui-btnweui-btn_disabled>页面主操作</a>
<aclass="weui-btnweui-btn_default">页面次要操作</a>
<aclass="weui-btnweui-btn_warn">警告类操作</a>
</div>
....
<divclass="button-sp-areacell">

关于“CSS如何使用BEM命名规范”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。