BEM--CSS命名规范

2020-09-12  本文已影响0人  虾米不是鱼

什么是BEM?

BEM代表块(Block),元素(Element),修饰符(Modifier)。
BEM是一种书写CSS的一种命名规范好处:
1.统一的规范便于维护
2.结构清晰容易后来的人对结构和代码的理解
3.利于团队之间的协作

BEM(或BEM的变体)是一个非常有用,强大,简单的命名约定,以至于让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确而且更加严密。


<div class="header header--skin">
  <div class="header__left header__left--sikn"></div>
  <div class="header__right"></div>
</div>

上面是一个基础模式

header 代表一个模块(或者说一个组件)

以--为连接的是对模块的装饰

以__为连接的是模块的子元素(可能是一个button可能是一个P标签)

上一篇下一篇

猜你喜欢

热点阅读