scss 编写规范

遵守BEM规则

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

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

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

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

使用BEM命名法

推荐写法风格

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

//对应的HTML结构如下：

  
  

推荐使用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;
    }
  }
}