前端编码规范之：样式（scss）编码规范

时间 2019-11-06

原文原文链接

前端编码规范之：Git使用规范
前端编码规范之：样式（scss）编码规范
前端编码规范之：HTML结构规范
前端编码规范之：Vue最佳实践
前端编码规范之：Javascript编码规范

css/scss命名的原则是：通俗易懂，尽可能保持不重复（冲突），尽可能不要用id。
我比较推崇bootstrap的样式目录结构，class命名方式。推荐bootstrap样式框架的编码规范，同时结合BEM命名规范，灵活使用。css

class 命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（相似于命名空间）（例如，.btn 和 .btn-danger）。
避免过分任意的简写。.btn 表明 button，可是 .s 不能表达任何意思。
class 名称应当尽量短，而且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 做为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），而且不要将这些 class 包含到 CSS 文件中。
在为 Sass 和 Less 变量命名是也能够参考上面列出的各项规范。

/* Bad example */
    .t { ... }
    .red { ... }
    .header { ... }
    
    /* Good example */
    .tweet { ... }
    .important { ... }
    .tweet-header { ... }

代码组织

以组件为单位组织代码段。
制定一致的注释规范。
使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
若是使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，由于页面会被重组，而组件只会被移动。html

能够把bootstrap-sass目录结构 clone下来，研究一番。前端

什么是BEM

命名约定的模式以下：git

.block{}
    .block__element{}
    .block--modifier{}

.block 表明了更高级别的抽象或组件。
.block__element 表明.block的后代，用于造成一个完整的.block的总体。
.block--modifier表明.block的不一样状态或不一样版本。github

参考原文bootstrap

BEM命名规范

BEM的关键是，能够得到更多的描述和更加清晰的结构，从其名字能够知道某个标记的含义。因而，经过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。sass

BEM命名规范框架

思考

总的来讲，BEM使用应该适量，适用于模块化的html结构。不能全篇使用，会致使class命名冗余。
我以为应该避免出现出现这种方式,用预处理器拼接出来的class名称，会生成.article__body__xxx__xxx。在维护代码的时候，定位代码及其不方便。
规范也要进化，适合的才是最好的。模块化

~~~并且，通常来讲会使用经过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单不少。~~~

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