Open Samgao0312 opened 2 years ago
在读element源代码的时候, 了解到了BEM的命名风格.
BEM是Block(块)、Element(元素)、Modifier(修饰符)的简写。它是一种组件化的 CSS 命名方法和规范。
BEM 规范视图将整个用户界面分解成一个个小的可重复使用的组件。
使用BEM主要是为了将用户界面划分成独立的块,使开发更为简单和快速,有利于团队协作,方便维护。
Block是一个功能独立的页面组件,可重复使用,也支持嵌套。我们可以认为网页都是由 ”块“ 构成的。
示例:
<div class="top"> <!--top块中的search-for块--> <form class="search-form"> <!--在search-form块中的input元素--> <input class="search-form__input"> <!--在search-form块中的button元素--> <button class="search-form__button">搜索按钮</button> </form> </div>
对应css代码:
.search-form .search-form__input{...} .search-form .search-form__button{...}
修饰符可以与块、元素一起工作。我们经常需要在已经定义好的块或者元素上,做一些小调整来满足特定的小功能。通常是外观或行为有些许改变,这时可以使用修饰符来处理。注意,修饰符不能单独使用,而且必须绑定在对应的块或元素上,不能混搭。
为什么修饰符一定要包含块名或元素名呢?
<div class="banner__btn"> <button class=".button .banner__btn--red"></button> <button class=".button .banner__btn--green"></button> <button class=".button .banner__btn--blue"></button> <button class=".button .banner__btn--yellow"></button> </div>
css代码:
.banner__btn--red { background-color: red; } .banner__btn--green { background-color: green; } .banner__btn--blue { background-color: blue; } .banner__btn--yellow { background-color: yellow; }
BEM命名规则 : block-neme__elment-name--modifier-name, 也就是 模块名 + 元素名 + 修饰器名
block-neme__elment-name--modifier-name
使用 BEM 命名规范,理论上讲,每行 css 代码都只有一个选择器。 BEM代表 “块(block),元素(element),修饰符(modifier)”,我们常用这三个实体开发组件。 在选择器中,由以下三种符号来表示扩展的关系:
- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。 -- 双中划线线:用来描述一个块或者块的子元素的一种状态 __ 双下划线:双下划线用来连接块和块的子元素 type-block__element--modifier
其实说穿了,BEM保证样式不冲突的核心就是:在元素名中加入唯一的标识
在读element源代码的时候, 了解到了BEM的命名风格.
一、什么是 BEM
BEM是Block(块)、Element(元素)、Modifier(修饰符)的简写。它是一种组件化的 CSS 命名方法和规范。
BEM 规范视图将整个用户界面分解成一个个小的可重复使用的组件。
使用BEM主要是为了将用户界面划分成独立的块,使开发更为简单和快速,有利于团队协作,方便维护。
Block
Block是一个功能独立的页面组件,可重复使用,也支持嵌套。我们可以认为网页都是由 ”块“ 构成的。
Element
示例:
对应css代码:
Modifier
修饰符可以与块、元素一起工作。我们经常需要在已经定义好的块或者元素上,做一些小调整来满足特定的小功能。通常是外观或行为有些许改变,这时可以使用修饰符来处理。注意,修饰符不能单独使用,而且必须绑定在对应的块或元素上,不能混搭。
为什么修饰符一定要包含块名或元素名呢?
示例:
css代码:
二、BEM可以帮助我们解决什么问题
三、命名规则
BEM命名规则 :
block-neme__elment-name--modifier-name
, 也就是 模块名 + 元素名 + 修饰器名使用 BEM 命名规范,理论上讲,每行 css 代码都只有一个选择器。 BEM代表 “块(block),元素(element),修饰符(modifier)”,我们常用这三个实体开发组件。 在选择器中,由以下三种符号来表示扩展的关系:
四、BEM的缺点
其实说穿了,BEM保证样式不冲突的核心就是:在元素名中加入唯一的标识
参考阅读