[css] 第79天 说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些?
haizhilin2013 opened this issue · comments
第79天 说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些?
BEM:block(块)、element(元素)、modifier(修饰符),一种命名约定,可以让代码更易理解
如:
.card
.card__body
.card__button--primary
BEM是比较好的CSS规范,应该也是得到大家认可最多的CSS规范
OAMC是WeUI根据BEM改造来的
object-area-meta-control
还有OOCSS,面向对象的CSS书写规范。
不管哪种,解决问题,同时团队大家共同维护遵守的,才是好的规范和执行。
1 .团队开发更规范
2 .通过css的命名就知道各个元素之间的关系
再放出一个之前收藏赠予诸位。
http://luopq.com/2016/01/05/css-optimize/
@jiamianmao 你会了吗?只要你会就好,这类的东西网上资料特别多,估计大家一搜就能搜到不少!
CSS BEM规范
好的样式手册能够显著提高开发速度,debug速度以及在原有代码上添加新功能的效率。规范标准我们都熟知并或多或少的应用于项目中,然而不幸的是在以往大多数css代码开发过程中很少很使用到命名规范,从长远看这会导致最后产生的CSS代码库很难维护,可移植性不高。
BEM方法确保开发项目的每一个人,基于一套代码规范去开发,这样非常有利于团队成员理解彼此的代码,而且对于后续接手项目的开发人员来说,也是一件好事。BEM - Block Element Modifier 它可以快速创建出可复用的前端组件和前端代码。
BEM是Block Element Modifier的缩写
- Block, 代表了一个独立的块级元素,可以理解为功能组件块,一个Block就是一个独立的功能区块,比如头部是一个block,表单功能输入框也可以是一个block。block功能可大可小。
- Element, 是Block的一部分不能独立来使用,所有的Element都是与Block紧密关联的。例如一个带有icon的输入框,那么这个icon就是输入框block的一个element。
- Modifier,是用来修饰Block的一个Element,表示block或者element在外观或者行为上的改变。例如前文提到的输入框Block,当鼠标悬停时边框高亮,那么这个高亮的效果就应该用Modifier来实现。
BEM命名
- 尽量使用类名选择器,不要使用tag或者id选择器
- 使用小写字母、数字或者- ,多个单词描述时采用-来连接,例如el-input
- 使用两个
_
来连接Block和Element ,Block__Element
, 例如el-input__icon
- 使用两个
-
来连接MOdifier和Element或Block,Block__Element--modifier
或者Block--modifier
, 例如el-input--color-primary
,el-inpu__icon--size-small
<form action="" class="form form--theme-xmas form--simple">
<input type="text" class="form__input">
<input type="text" class="form__submit form__submit--disabled">
</form>
<style>
.form {}
.form--thema-xmas {}
.form--simple {}
.form__input {}
.form__submit {}
.form__submit--disabled {}
</style>
1 .团队开发更规范
2 .通过css的命名就知道各个元素之间的关系