BEM 命名规范

作者:赵金添 分类: 前端 发布于:2017-1-16 14:15 ė995次浏览 60条评论
参考:
http://luolinfeng.com/2016/12/19/css_module/

简介:
BEM是由Yandex团队提出的一种CSS Class 命名方法,旨在更好的创建CSS/Sass模块。
BEM的意思就是块(block)、元素(element)、修饰符(modifier)。
block: 可以理解为一个区域、一个组件或者一个块级元素,具体如何区分需要根据实际情况具体分析;
block__element: 就是一个上面的block里面的元素,比如说导航(nav:block)里面有a标签(a: element)就是一个元素, block与element使用两个下划线链接;
block__element--modifier: 我的理解是状态或属性。比如element里面的a标签,它有active、hover、normal三种状态,这三种状态就是modifier。midifier是使用两个“-”中横线连接。

代码:
<!-- HTML结构 -->
<nav class="nav">
  <a href="#" class="nav__item nav__item--active">当前页:active</a>
  <a href="#" class="nav__item nav__item--hover">假设鼠标在这里要加个hover的class</a>
  <a href="#" class="nav__item nav__item--normal">假设需要加个normar的状态</a>
</nav>

// SASS写法
.nav{
  &__item{
    &--active{
      <!-- active样式 -->
    }
    &--hover{
      <!-- hover样式 -->
    }
    &--normal{
      <!-- normal样式 -->
    }
  }
}

本文出自 赵金添的前端博客@福州软件外包公司,转载时请注明出处及相应链接。

0
分享本文至:

发表评论

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部