CSS的BEM命名规范

BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种CSS命名方法。

其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。

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

规范默认有以下的几个约定，实际使用可自行统一，重在思想：

- 中划线：仅作为连字符使用
-- 双中划线：表示不同状态或不同版本
__ 双下划线：双下划线用来连接块和块的子元素

Block

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

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

<!--good-->
< div  class = "header" > </ div ><!--bad，red-text 是描述外观-->
< div  class = "red-text" > </ div >

Element

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

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

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

<!--遵循 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><!--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>

Modifier

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

修饰符的两种类型

命名空间

.l-: 布局(layouts)

.o-: 对象(objects)

.c-: 组件(components)

.js: js的钩子(JavaScript hooks)

.is-|.has-: 状态类(state classes)

.t1|.s1: 排版大小(typography sizes)

.u-: 实用类(utility classes)

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

CSS的BEM命名规范相关推荐

BEM 命名规范简介
1.什么是 BEM 命名 BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介. ...
转载--让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范
转载--让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤 ...
【前端开发】CSS BEM命名规范
目录 1.BEM 2.实战 Block Element Modifier 3.总结 1.BEM BEM其实是块(block).元素(element).修饰符(modifier)的缩写,利用不同的区块, ...
CSS的类名命名规范
一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin ...
CSS-BEM 命名规范
BEM 中文官方文档 BEM 英文官方文档 BEM 是一种组件化的 CSS 命名方法和规范.让开发更加规范与便捷,利于团队协作和维护. 一.BEM 的核心模块块层( block): 块表示一个功 ...
css 命名规范 BEM
在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...
CSS样式的格式命名,CSS命名规范：BEM
什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写块: 组件元素:块的子节点修饰符:改变某个块的外观的标志,不同状态或不同版本 Yan ...
我认为最节省时间的CSS命名规范
CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...
企业开发团队分享，BEM 代码命名规范实践
背景最近老大在维护别人的代码时,发现我们团队写的样式各有种的想法及风格,这在后续维护会增加一定的难度,所以老大决定统一样式的会名规范,所以就安排我去调研及实践,下面是我调研的结果. 什么是 BEM ...
CSS命名规范-BEM
BEM 什么是BEM BEM命名的好处 BEM命名的问题什么是BEM BEM是一种命名规范.模块名+元素名+修饰器名比如Instagram团队使用的驼峰式 .blockName-elementNa ...

CSS的BEM命名规范

命名空间

CSS的BEM命名规范相关推荐

最新文章

热门文章