BEM:block(块)、element(元素)、modifier(修饰符),一种命名约定,可以让代码更易理解
如:
.card
.card__body
.card__button--primary
说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些?
BEM:block(块)、element(元素)、modifier(修饰符),一种命名约定,可以让代码更易理解
如:
.card
.card__body
.card__button--primary
BEM是比较好的CSS规范,应该也是得到大家认可最多的CSS规范
OAMC是WeUI根据BEM改造来的
object-area-meta-control
还有OOCSS,面向对象的CSS书写规范。
不管哪种,解决问题,同时团队大家共同维护遵守的,才是好的规范和执行。
再放出一个之前收藏赠予诸位。
http://luopq.com/2016/01/05/css-optimize/
@jiamianmao 你会了吗?只要你会就好,这类的东西网上资料特别多,估计大家一搜就能搜到不少!
好的样式手册能够显著提高开发速度,debug速度以及在原有代码上添加新功能的效率。规范标准我们都熟知并或多或少的应用于项目中,然而不幸的是在以往大多数css代码开发过程中很少很使用到命名规范,从长远看这会导致最后产生的CSS代码库很难维护,可移植性不高。
BEM方法确保开发项目的每一个人,基于一套代码规范去开发,这样非常有利于团队成员理解彼此的代码,而且对于后续接手项目的开发人员来说,也是一件好事。BEM - Block Element Modifier 它可以快速创建出可复用的前端组件和前端代码。
BEM是Block Element Modifier的缩写
_
来连接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>
学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!)