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、使用有意义的名称。使用有组织或者目的明确的名称,不要使用表现形式