网页制作 发布日期：2024/11/12 浏览次数：1
当你看到一个class的时候，你想得到什么信息？
此时，你最想一眼看到这个class就解决以上所有的问题，而BEM你值得拥有
什么是BEM
BEM（块，元素，修饰符）是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。
优势
怎么使用BEM
Block
一个功能独立的页面组件，可以重复使用
块不应影响其环境，这意味着您不应设置块的外部几何形状（边距）或位置
<!--
good
-->
< div class = "header" > </ div >
<!--
bad
red-text 是描述外观
-->
< div class = "red-text" > </ div >
Element
块的复合部分，不能单独使用
元素全名的结构为block-name__element-name
<!-- 块 `search-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
修饰符全名的结构遵循以下模式：
<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
修饰符全名的结构遵循以下模式：
<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_lite">
<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>
在修饰符和元素名称中添加块名称的好处
什么时候应该用 BEM 格式
.hide {
display: none !important;
}
命名规范
双下划线风格
block-name__elem-name--mod-name--mod-val
CamelCase style
blockName-elemName_modName_modVal
React命名范式
BlockName-ElemName_modName_modVal
没有命名空间样式
_available
常用的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__logo">搜索</a>
<ul class="van-doc-header__top-nav">
<li class="van-doc-header__top-nav-item">
<a class="van-doc-header__logo-link">
</li>
</ul>
</div>
</div>
</div>
<div class="van-doc-container van-doc-row van-doc-container--with-simulator">
......
</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-btn 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