如何优雅的编写前端代码

代码千万行，注释第一行。命名不规范，同事泪两行。

锵锵锵！今天萌芽跟大家一起来讨论讨论编码规范问题，可不要小看注释哦！在多人项目的时候注释可是非常重要的，你是否有觉得自己页面排版不够好？经常自己都不知道自己的这个class或者id用在哪里？或者因为偷懒写一大把css选择器导致布局一改还要再调？这都是编码规范问题！自己都看不懂自己的代码的话就更别想让别人看得懂了。先做个小总结：

HTML语义化
CSS约束与样式规范
JavaScript命名规范

HTML语义化

遵守HTML语义化约束，在不同的地方使用相应的标签更有效地开发并且有助于浏览器的读取执行。

如 <em>、<strong>、abbr等。

关于导入资源：Css放在头部javascript放在body里面的最下方，避免浏览器初次渲染过高。

HTML本身就是一门超文本语言，了解语义是非常重要。语义化的编写代码首先能够增强可读性，也有助于我们的机器阅读，他的文本表现力丰富适合引擎搜索有效的爬取更多的信息，极大的提升搜索量根据文章自动生成目录等等。

将你构建的页面当作一本书，将标签的语义对应的其功能和含义；

书的名称：<h1>
书的每个章节标题: <h2>
章节内的文章标题: <h3>
小标题/副标题: <h4> <h5> <h6>
章节的段落: <p>

CSS约束与样式规范

Css编写减少多层嵌套，最多可潜逃三层，命名不要使用驼峰和下划线用 - ，将代码组件化。

遵守编写顺序：

定位（相对定位、绝对定位等|存在覆盖盒模型问题所以排在第一个）

盒模型（高度、宽度、边距等）

文本样式（行高、字体样式等）

颜色背景（文字背景颜色、透明度等）

@medai 媒体查询放到组件附近不要因为省事儿只创建一个把所有的样式都放里面这样会造成混淆。

对于属性值或者颜色参数采取省略措施，属性值0.5rem写成.5rem，颜色能写#FFF就不要写成#FFFFFF。

以组件为单位组织代码段；

制定一致的注释规范；
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；

/* ==========================================================================组件块============================================================================ *//* 子组件块============================================================================ */
.selector {padding: 15px;margin-bottom: 15px;
}/* 子组件块============================================================================ */
.selector-secondary {display: block; /* 注释*/
}.selector-three {display: span;
}

Class 和 ID

使用语义化、通用的命名方式；
使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
避免选择器嵌套层级过多，尽量少于 3 级；
避免选择器和 Class、ID 叠加使用；

声明块格式

选择器分组时，保持独立的选择器占用一行；
声明块的左括号 { 前添加一个空格；
声明块的右括号 } 应单独成行；
声明语句中的 : 后应添加一个空格；
声明语句应以分号 ; 结尾；
一般以逗号分隔的属性值，每个逗号后应添加一个空格；
rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；

声明顺序

相关属性应为一组，推荐的样式编写顺序

Positioning 【定位】
Box model 【盒模型】
Typographic 【文本样式】
Visual 【颜色】
其他

引号使用双引号。

媒体查询放到相关规则附近。

模块组件化

说白了就是把你写的东西分成一个块儿一个块儿的。

JavaScript命名规范

单行注释用： //

多行注释用： /** **/

变量、函数、函数的参数、方法属性、枚举变量采用驼峰命名法: userName

私有变量命名为： _this

常量、枚举的属性、缩写词命名为全部大写： HAPPLE

类名使用名词。

函数名使用动词。

boolean 类型的变量使用 is 或 has 开头。

Promise 对象用动宾短语的进行时表达。

True 和 False 布尔表达式

类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。

下面的布尔表达式都返回 false:

null
undefined
'' 空字符串
0 数字0

但小心下面的, 可都返回 true:

'0' 字符串0
[] 空数组
{} 空对象

不要在 Array 上使用 for-in 循环

for-in 循环只用于 object/map/hash 的遍历, 对 Array 用 for-in 循环有时会出错. 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值。

二元和三元操作符

操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。

var x = a ? b : c;var y = a ?longButSimpleOperandB : longButSimpleOperandC;

二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项。

最后附上原帖地址：https://www.w3cschool.cn/webdevelopment/