码迷,mamicode.com
首页 > 其他好文 > 详细

我使用的Bem的习惯

时间:2018-11-20 13:20:05      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:color   block   状态   span   com   img   一个   alt   led   

在基于BEM命名思想的基础上,我整理一些实用的点:

BEM,B即block(块),E即element(元素),M即modifier(修饰符)

块:最顶层,可包含块和元素

元素:被块包含,通常为最终被包含项,即无子代,当然,也有例外,它有时也会包含其他,如:

<div class="media">
  <img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
  <div class="media__body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </div>
</div>

应注意的,它内部的东西class单独命名,最好不要有层级关系

修饰符:可修饰块和元素,表示一种状态

 

注意,不是所有时候都用BEM,当你觉得一个DOM结构符合使用BEM的条件时,你就可以用

完整的class名结构如下:

block-name__element-name--modifier

我使用的Bem的习惯

标签:color   block   状态   span   com   img   一个   alt   led   

原文地址:https://www.cnblogs.com/ww01/p/9988142.html

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