scss 编写规范

遵守BEM规则

- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

.block {}   代表最高级的组件

.block__element {}  代表 .block 的后代，用于形成一个完整的 .block 的整体。

.block--modifier {}    代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。

使用BEM命名法

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

推荐写法风格

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

//对应的HTML结构如下：
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

推荐使用sass等css预处理

form模块则下面是该模块的相关样式
.form {
  &--theme-xmas {
    //代表 .form 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。
    background: blue;
  }
  &--simple {
    background: blue;
  }
  &__input {
    //代表 .form 的后代，.form中的input组件
    background: blue;
  }
  &__submit {
    //.form 的后代，.form中的submit组件的不同状态（disabled状态）
    background: blue;
    &--disabled {
      background: blue;
    }
  }
}