当你看到一个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
到此这篇关于CSS使用BEM命名规范实践的文章就介绍到这了,更多相关CSS BEM命名规范内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
Dreamweaver中的代码想要插入注释,该怎么添加呢?下面我们就来看看详细的教程。...
在做网站的时候,希望网页能实现一个效果,就是可以弹出一个网页窗口,用来显示...
基本语法 text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap...
在使用HTML表的时候有时候需要我们改变行距,但是改变margin,padding,collapse...
公司项目需求,要实现任务卡片在不同任务列表之间进行拖拽实现任务类别的更改。...
注 :目前比较流行的前端框架有Bootstrap、Foundation,这两都有着常用的网页设...
1.我不会挽留任何一个企图离开我的人,你是例外。 2.有些记忆,注定无法抹去,...
测试试一下!...
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: ...
各位小伙伴们好,今天我们来聊一聊JavaScript 中的“类型系统”。 但是在开始之...