html css 编写规范

html 规范

一 语法

　　1、用两个空格带她tab，

　　2、嵌套的元素应该缩进一次，即两个空格是最好

　　3、属性定义，全部使用双引号，尽量避免单引号。

　　4、不要在自闭和标签尾部添加闭合标签。

　　5、可选得结束标签，尽量不要省略

二 html5 dectype

　　1、每个html页面添加标准膜式的声明，以保证在每个浏览器的展示效果一致

三 字符编码

　　1、尽量使用UTF-8编码       <meta charset="UTF-8">

四  引入css 和js 文件

　　1、引入css js 时候可以不去声明type属性。因为text/css   text/javascript 是他们的默认属性

五  实用为王         　　

　　1、尽量遵守HTML标准和语义化。尽量减少标前，保持最小的复杂度

六 属性顺序

　　1、HTML属性应按照以下顺序，确保代码易读性

　　　　class------id，name ------- data-  ------ src，for，type，href  ---------- title

　　2、 class 用于标示 高度可复用组件，置于首位。id用于标示具体组件，谨慎使用

七 布尔值

　　1、布尔值属性声明时可以不赋值，

八 减少标签的数量

　　1、尽量减少多余的父元素

九 尽量减少js动态生成的标签

　　1、js生成的标签，让内容变得不易查找，编辑，且减低性能

css规范

一 语法

　　1、用两个空格代替tab键

　　2、为选择器分组时，尽量将单独的选择器单独放在一行

　　3、为了代码的易读性，在每个声明块的左边花括号家一个空格

　　4、声明块的右花括号应该单独成行

　　5、每条声明语句的 ： 后面都应该添加一个空格

　　6、为了获取更准确地错误报告，每个声明独占一行

　　7、所有的声明语句，都应以分好结尾

　　8、不要在rgb(),rgba(),等的内部的逗号后面加入空格，

　　9、对于属性值或者颜色参数，省略小于一的小树前面的0，

　　10、16进制的值都应该小写，如#fff

　　11、尽量用简写形式的十六进制，用#fff代替#ffffff

　　12、为选择器中的属性添加双引号。如input[type="text"]

　　13、避免为0的值指定单位

二 声明顺序

　　1、相关声明应该归为一组，并且按照如下顺序    position--------box model

　　　　　　因为定位可以从正常的文档流中移除元素，且能够覆盖盒子模型，因策排在首位

三 不要使用@import

　　1、@import指令和<link>相比要慢很多。并且会增加请求次数

　　　　可以使用多个<link>标签。　　

　　　　更好的是使用sass。less等css预处理器

三 媒体查询的位置

　　1、尽量将媒体查询放在相关规则的位置，不要单独房子一个文件里面，容易遗忘

四 带前缀的属性

　　1、档使用厂商前缀时，尽量采用缩进的方式。让每个属性的值垂直对齐

　　　　　.selector{

　　　　　  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);

　　　　　　           box-shadow: 0 1px 2px rgba(0,0,0,.15);

　　　　　}　　　　　

五 单行规则声明

　　1、对于只包含一条声明的样式，为了易读和便于快捷编辑，建议放在同一行。多调皮声明的样式，建议将声明分为多行

六 简写形式的属性声明

　　1、在需要显示的设置所有值的情况下，应尽量的采用简写形式的属性声明。但是应避免滥用简写属性声明的情况。有些没必要重复声明的属性应该避免，以免不必要的属性覆盖带来意外的副作用

七 less和sass中的嵌套

　　1、避免非必要的嵌套。在样式必须限制在父元素内，并且存在多个需要嵌套的元素时，才使用嵌套。

八 calss 命名

　　1、class 名称中只能出现小写字符和破折号（不是下划线，也不是驼峰式命名法）。

　　2、避免过度任意的简写　　

　　3、class名称尽可能短，并且意义明确

　　4、使用有意义的名称。使用有组织或者目的明确的名称，不要使用表现形式