前端编码规范：style(scss)编码规范

前端编码规范：Git使用规范前端编码规范：style(scss)编码规范前端编码规范：HTML结构规范前端编码规范:Vue最佳实践前端编码规范：Javascript编码规范css/scss命名的原则是：通俗易懂，尽量不要重复（冲突），尽量不要使用id。我更喜欢bootstrap风格的目录结构和类命名方式。推荐bootstrap风格框架的编码规范，结合BEM命名规范，灵活使用。类命名类名只能以小写字符和破折号（dashe）出现（不能是下划线，也不是驼峰命名）。破折号应该用于相关的类名（类似于命名空间）（例如，.btn和.btn-danger）。避免过于随意的速记。.btn代表按钮，但.s不代表任何东西。类名应尽可能短且明确。使用有意义的名称。使用有条理或有目的的名称，而不是表象名称。根据最近的父类或基类为新类添加前缀。使用.js-*类来识别行为（与样式相对），并且不要将这些类包含到CSS文件中。在命名Sass和Less变量时，您也可以参考上面列出的规范。/*不好的例子*/.t{...}.red{...}.header{...}/*好的例子*/.tweet{...}.important{...}.tweet-header{...}代码组织以组件为单位组织代码段。制定一致的注解规范。使用一致的空格将代码分成块，这有助于扫描更大的文档。如果使用多个CSS文件，将它们拆分为组件而不是页面，因为页面将被重组而组件只会被移动。您可以克隆bootstrap-sass目录结构并研究它。BEM命名约定的架构如下：.block{}.block__element{}.block--modifier{}.block表示更高级别的抽象或组件。.block__element代表.block的后代，用于整体组成一个完整的.block。.block——修饰符代表.block的不同状态或不同版本。参考原来的BEM命名规范BEM的关键是获得更多的描述和更清晰的结构，从名字就可以知道某个标记的含义。因此，通过查看HTML代码中的class属性，就可以知道元素之间的关系。关于BEM命名约定的思考一般来说，BEM的使用应该是适当的，适合于模块化的html结构。不能通篇使用，会导致类命名冗余。我认为应该避免这种方式。预处理器拼接的类名会生成.article__body__xxx__xxx。在维护代码时，定位代码极其不便。标准也要进化，适合的才是最好的。~而且，CSS一般都是用LESS/SASS等预处理器语言编写的，利用它的语言特性编写起来要容易得多。~.article{最大宽度：1200px；&__body{内边距：20px;}&__button{内边距：5px8px；&--primary{background:blue;}&--success{background:green;}}}