如何写出优雅的前端代码

最近越来越觉得自己项目中的代码结构很差，收集这篇文章，希望可以时刻提醒自己注意代码的可维护性

1. 项目结构

1. 不同的文件进行分类，有一个一眼明了的结构，想找什么文件心里就能大概明白在什么地方

2. JAVASCIPT

1. 一定要避免重复代码，如果是可以通用的代码写在一个独立的 JS 文件中；
2. 一个方法实现一个功能，这个很重要；
3. 避免代码带来的副作用，不要在 Array 之类的全局对象的原型链上添加方法，尽量不要定义全局方法和变量； 

3. HTML

1. 代码结构和视觉顺序基本保持一致
2. 结构层、表现层、行为层分开，避免内联，使用 script 引入  JS ，使用
 link 引入 css ；
3. 每一个块级元素都另起一行；
4. 不同的 部分之间使用空行，比如 header，main，footer，在一个模块内不要使用多余空行（遵循设计中的亲密性原则）；

4.CSS

1. css 分类：
   公共型样式——标签的充值和设置默认值（消除不同浏览器之间的差异）、统一的调用背景图和清除浮动活其他需要统一处理的长样式、网站通用布局、通用模块以及元件和其扩展、功能性样式、皮肤类样式；
   特殊型样式——某个维护率比较高的栏目或者其他与网站整体差异较大的页面独立引入一个特殊样式表；
2. 命名尽量使用类选择器，避免使用 ID 选择器（无法重用），这样可以使表现和行为分开；
3. 选择器、属性和值都是用小写；
4. 单行写完一个选择器定义；
5. 省略值为 0 的单位；
6. 使用 16 进制表示延颜色值，并尽量缩小，如：#FFF ，具有易读性，且有利于压缩，缩小可以减少不必要的字节；
7. css 内部根据不同结构分开写；

本文持续更新...