(编辑:jimmy 日期: 2024/10/30 浏览:2)
当你看到一个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