跳到主要内容

Day 2 - BEM

BEM 命名规范

BEM 是什么？​

BEM：

  • 来源：Yandex 团队提出的一种前端 CSS 命名方法论
  • 缩写：块（Block）、元素（Element）、修饰符（Modifier）的简写
  • 优点：作为一种简洁的命名约定，有利于团队协作 —— 让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮、明确，以及更加严密
  • 缺点：命名方式长而难看

符号说明​

  • -- 双中划线：修饰器
  • - 单中划线：连字符
  • __ 双下划线：子元素

_ 单下划线？—— 无（有些规范会拿来当双下划线使用）

用法：

  • block--modifier
  • block__element
  • block__element--modifier
  • long-block-name__element--modifier
  • block__long-element-name--modifier
  • block__element--long-modifier-name

使用示例​

DEMO 1：

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>
/* block */
.form { }
/* block--modifier */
.form--theme-xmas { }
/* block--modifier */
.form--simple { }
/* block__element */
.form__input { }
/* block__element */
.form__submit { }
/* block__element--modifier */
.form__submit--disabled { }

DEMO 2：

.article {
    max-width: 1200px;
    /* block__element */
    &__body {
        padding: 20px;
    }
    /* block__element */
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

参考​