码迷,mamicode.com
首页 > Web开发 > 详细

CSS 中 BEM命名方式

时间:2018-01-17 00:59:57      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:命名   div   不可   icon   highlight   pos   --   span   body   

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是一种CSS Class 命名方法。

类似于:

.block{}
.block__element{}
.block--modifier{}
__双下划线代表B和E连接例如 menu__item
_单下划线代表B和M或E和M的连接 例如 menu_active 或 menu__item_active
-中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,就使用中划线

了解什么是 B.E.M

Block
将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个icon一个logo也是block
block可以相互嵌套

Element
一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block
所以 BEM 最多只有 B+E+M 三级,不可能出现 B+E+E+..+E+M 超长class名,也要求E不能同名

Modifier
之前我们经常写的 .current .active 等表达状态



CSS 中 BEM命名方式

标签:命名   div   不可   icon   highlight   pos   --   span   body   

原文地址:https://www.cnblogs.com/anyun/p/8297640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!