摘要：前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂，尽量保持不重复冲突，尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称，会生成。
前端编码规范之：Git使用规范
前端编码规范之：样式（scss）编码规范
前端编码规范之：HTML结构规范
前端编码规范之：Vue最佳实践
前端编码规范之：Javascript编码规范
css/scss命名的原则是：通俗易懂，尽量保持不重复（冲突），尽量不要用id。
我比较推崇bootstrap的样式目录结构，class命名方式。推荐bootstrap样式框架的编码规范，同时结合BEM命名规范，灵活使用。
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 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。
可以把bootstrap-sass目录结构 clone下来，研究一番。
什么是BEM命名约定的模式如下：
.block{}
.block__element{}
.block--modifier{}
.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block--modifier代表.block的不同状态或不同版本。
参考原文
BEM命名规范BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。
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;}
}
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114015.html
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
摘要：杂项用代替里一定要有的判断不要在内置对象的原型上添加方法，如不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量变量不要先使用后声明不要在一句代码中单单使用构造函数，记得将其赋值给某个变量不要在同个 决定综合网上的规范整出一套自己的开发规范出来，以后代码的风格均按照要求来编排，方便管理维护 一、 命名规范 项目命名：全部采用小写方式， 以下划线分隔，例：my_pro...
导语: 随着业务的增长和开发团队的成员快速增加，其中很多新人来自于五湖四海各大门派，在编码的风格和习惯中也出现各异。 通常在相互 codereview 时发现很多代码上的问题，久而久之代码出现了代码难以维护的问题，甚至还会出现低级错误。 因此，我尝试在前端代码质量的管控上做了些探索，也总结了一些经验分享给大家。 作者：郑振波 本文大纲介绍 编码规范 冗余文件与代码 1. 编码规范 在一些老项...
阅读 1729·2023-04-25 23:43
阅读 907·2021-11-24 09:39
阅读 712·2021-11-22 15:25
阅读 1709·2021-11-22 12:08
阅读 1084·2021-11-18 10:07
阅读 2066·2021-09-23 11:22
阅读 3337·2021-09-22 15:23
阅读 2468·2021-09-13 10:32
