前端开发--代码规范篇:

一.知名大公司总结:

※前端在HTML & CSS的考核相对来说比较偏向于UI界面方面，重点需要考虑的是上游的设计和交互，以及需要考虑下游开发人员对于HTML结构的利用。

※从产品需求的角度去考虑，还要注意各种不同设备、不同浏览器中的兼容性问题，并且能够展现一个良好地用户体验。

1.审核方向

（1）HTML基本语法以及合理标准化；

（2）CSS类名命名规则以及属性的使用规则；

（3）代码风格以及图片格式选择优化；

（4）浏览器以及各设备的兼容性；

（5）第三方CSS文件引用；

（6）页面性能；

2.扣分项

2.1 HTML基本语法以及合理标准化

（1）基本语法嵌套错误，不合理；例如：嵌套错误；

（2）依赖浏览器对HTML标签的默认样式，而不注重HTML标签的语义；例如：该是标题的部分并未使用h1-h6中的某个标签，而使用其他标签，通过样式修改；

（3）缺少DTD文档类型声明；

（4）缺少页面编码声明、移动端未对viewport进行声明处理；

（5）编码的缺失或者不统一；

（6）同一个项目中存在多种缩进方式；

（7）过于简化的形式单一的类名，例如：class=“fl“；

2.2 图片格式的选择以及是否压缩

（1）未选择较优的图片格式，根据不同的图片色彩选择不同图片格式，以获得最小容量的图片；

（2）图片未进行二次压缩处理；

（3）可以考虑合并的图片，但并未合并；

（4）图片质量过差，影响页面浏览效果；

（5）图片容量过大，导致页面加载过慢，最大容量建议在150K之内；

2.3 请求量过多

（1）过多的CSS文件请求，一般1个公共样式和1个当前频道页面样式；

（2）过多的图片请求，可以适当考虑合并图片；

（3）过多的其他外部文件请求；

2.4 CSS耗性能属性是否使用过度

（1）使用expression样式脚本；

（2）过多或者大面积使用filter、box-shadow、text-shadow等耗性能的属性；

3.兼容性的考虑

（1）未考虑项目的设备、浏览器需求，在部分规定内的设备、浏览器中出现兼容问题；

（2）过多的CSS Hack；

（3）使用某个技术点时，未考虑兼容性问题；例如：webp图片格式的兼容性、flex的兼容性、grid的兼容性、filter的兼容性等；

（4）HTML5中的标签兼容性考虑；

4.代码冗余

（1）可简化的HTML结构却写的过于冗余，嵌套过多；

（2）CSS中重复的代码过多，并未利用好CSS的层叠、继承特性；

（3）CSS中可去除浏览器前缀的属性并未去掉相对应的前缀；

（4）使用base64图片；

（5）使用CSS属性时，存在重复的特性，例如：元素设置了position后，还定义display: block;属性；

5.公共样式的侵入修改

（1）在需要使用原公司公共样式的频道、页面中并未调用公共样式；

（2）调用了公共样式后，又随意修改公共样式，或者通过CSS权重覆盖公共样式；

（3）调用第三方样式导致与原公司公共样式冲突；

6.HTML的DOM结构嵌套

（1）特定的HTML结构必须符合，例如：

（2）等标签的嵌套规则；

（3）以及中应该存在的标签就不应该出现在其他位置；

7.大范围使用!important

（1）在CSS中!important 的权重值很高，过多使用导致权重计算混乱；

（2）在HTML标签style属性中使用!important；

8.基本写法错误

（1）属性值缺少引号，HTML中可缺省的属性值除外；

（2）HTML与XHTML标签混用，例如：标签中的编码定义；

（3）使用SASS等预处理器后并未转为CSS，导致CSS与预处理器混用；

（4）HTML与CSS基本语法错误；

（5）外链文件存在404；

9.代码的注释

（1）毫无注释的HTML或者CSS；

（2）过于累赘的注释说明；

（3）滥用HTML的条件注释；

（4）未处理掉的SASS等预处理器中的注释出现在CSS中；

10.混乱的表单元素操作体验

（1）tabindex的滥用，引起表单输入跳转混乱；

（2）input类型未根据实际需要进行选择；

（3）过多的使用模拟的表单元素；

11.加分项

（1）通过CSS的方式减少JS等脚本的判断；

（2）结合CSS选择符的优势减少HTML的结构复杂度；

12.良好的复用性

（1）CSS共用属性归类良好，复用性高；

（2）HTML和CSS具有良好的模块分类；

13.较优地使用CSS的继承性

（1）善用CSS中的继续属性值；

（2）清晰了解并使用CSS的继承特性，例如：color属性的运用；

14.良好的用户操作体验

（1）在页面中能考虑障碍性用户；