前端HTML/CSS代码规范（新手总结）

1.不要在自闭合的元素尾部添加斜线（h5规范）。

2.为每一个html页面的第一行添加标准模式。

3.为根元素制定lang属性,为文档设置正确的语言

4.IE兼容模式，通过标签来确定当前页面所采用的ie版本，最好设置为edge mode

5.标签声明文档字符编码

6.尽量使用最少的标签并保持最小的复杂度

7.布尔型属性可以在声明中不赋值

8.为了代码的易读性，每个声明块的左花括号前添加一个空格，右花括号应该单独一行

9.每条声明语句后面应加一个空格

10.对于逗号分隔的属性，每个逗号后面都应该插入一个空格

11.十六进制值应该全部小写，并且尽量使用简写形式的十六进制值

12.为选择器的属性添加双引号，实例：input[tyep="text"]

13.使用@media进行浏览器响应式设计

14.css兼容浏览器的前缀：-ms- IE, -moz- Firefox, -webkit- Safari Chrome ,-o- Opera

15.class名称中只能出现小写字符和破折号1

6.基于最近的父class或基本class作为新class的前缀

17.选择带有语义的合适的标签

18.表单的正确写法：

表单域通过fieldset标签包起来，并用legend标签说明表单的用途。

19.表格的正确写法：

20.标签语义化，尽量少用无语义标签div和span，既可以用p也可以用div的地方尽量用p

21.组织CSS的方法：base（精简通用、原子类）、common（模块化、封装）、page（根据页面配上注释、分块编写、易于维护、通过命名规则避免冲突）

22.在编写float属性时，应该将display：inline加入，可以避免由于浮动引入的bug

23.将块元素居中时，应该设定元素的宽度。

24.css样式命名：骆驼命名法用于区别不同单词，划线用于表明从属关系。

25.多个人合作写css时，规定命名前缀用于避免样式冲突。（如：小明：xm_  小花：xh_）

26.通过css  spirit技术解决图片加载问题（只能合并用于背景的图片）

27.推荐使用一行式的编码风格

28.进行css样式设计的时候尽量使用class，少用id

29.通过css  hack技术 选择前缀法、样式前缀法解决浏览器兼容性问题。IE条件注释解决ie浏览器问题

30.行内元素的padding-top padding-bottom margin-top margin-bottom不会产生效果

31.优秀的代码可维护性：代码的松耦合、高内聚，将页面的元素视为一个个模块，相互独立；良好的注释；注意代码的弹性，在性能和弹性的选择上，一般以弹性为优先考虑对象；严格按照规范编写代码。

32.命名规则：公共组件因为高度重用，命名从简，不加前缀；各栏目的相应代码，需加前缀，前缀为工程师姓名拼音的首字母；模块组件化，组件中的class或id采用骆驼命名法和下划线相结合的方式，单词之间的分隔靠大写字母分开，从属关系靠下划线分隔；命名清晰，不怕命名长，就怕命名冲突；命名要有意义，尽量使用英文命名，不要使用拼音。

33.注释规则：文件徒步加上注释说明：文件用途、作者姓名、联系方式、制作日期；模块注释方法：代码用途；小注释：代码说明（一行）