1.背景介绍
1、好的编码规范可以尽可能的减少一个软件的维护成本,并且几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护;
2、好的编码规范可以改善软件的可读性,可以让开发人员尽快而彻底地理解新的代码;
3、好的编码规范可以最大限度的提高团队开发的合作效率;
4、长期的规范性编码还可以让开发人员养成好的编码习惯,甚至锻炼出更加严谨的思维。
2.知识剖析
基本准则
符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
html规范
1、页面的第一行添加标准模式声明<!DOCTYPE html>
2、页面title是极为重要的不可缺少的一项
3、按照从上至下、从左到右的视觉顺序书写html结构
4、代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小)
5、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外,其他都为小写,css类都为小写
6、建议为html根元素指定lang属性,从而为文档设置正确的语言lang="zh-CN"
7、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">
8、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部
9、尽可能减少div嵌套
10、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中
11、对于属性的定义,确保全部使用双引号,绝不要使用单引号
12、背景图片请尽可能使用sprite技术,减小http请求
13、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能
14、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
CSS规范
排版规范
1、如果是在html中写内联的css,则必须写成单行
2、每一条规则的大括号{前后加空格
3、属性名冒号之前不加空格,冒号之后加空格
4、每一个属性值后必须添加分号,并且分号后加空格
5、多个selector共用一个样式集,则多个selector必须写成多行形式
class命名
1、规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或_
2、命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合
3、不允许通过1、2、3等序号进行命名;避免class与id重名
4、class用于标识某一个类型的对象,命名必须言简意赅
5、尽可能提高代码模块的复用,样式尽量用组合的方式
6、规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名
CSS书写规范
1、CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
2、去掉小数点前的“0”
3、简写命名——很多用户都喜欢简写类名,但前提是要让人看懂你的命名。
4、16进制颜色代码缩写——有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。
5、长名称或词组可以使用中横线来为选择器命名。
6、不要随意使用Id——id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
7、有多个选择器时,选择器必须独占一行
8、选择器的嵌套层级不应该大于三级,位置靠后的限制条件应该尽可能的准确。
书写顺序:
布局方式、位置(position, top, right, z-index, display, float等)
尺寸(width, height, padding, margin)
文本相关(font, line-height, letter-spacing, color- text-align等)
视觉效果(background, borde,animation, transition)
以提高代码的可读性。
3.常见问题
如何高效精简的命名CSS?
4.解决方案
参考:张鑫旭网站: http://www.zhangxinxu.com/wordpress/?p=1098
对于CSS,为了避免样式冲突,我们总会给其赋予相当特殊的命名,或是在选择符上添加HTML标记,或是使用层级。但这样弄很容易造成代码的冗余。
1.面向属性的命名方法。
2.“无层级、无标签”命名
精简高效的CSS命名之三无原则:
无ID、无层级、无标签
5.编码实战
6.拓展思考
CSS样式分离之再分离
总结这一节的核心观点,其实不难理解,就是“构成的基本元素越是独立,越是最简,其组合的可能性,元素的利用率越是高!”,CSS样式越是分离,其样式的利用率和覆盖率就越高,CSS代码就越精简!
样式越是拆分的彻底,CSS代码越是精简,CSS代码的重用率以及单个页面CSS样式的覆盖率都会相当惊人
单不是所有的都可以,比如复杂的UI效果(列如圆角自适应导航)。
7.参考文献
张鑫旭:http://www.zhangxinxu.com/wordpress/?p=1098
简书:https://www.jianshu.com/p/24d4c7108c69
8.更多讨论
糟糕的命名对渲染性能造成的影响?
问:什么时候建议使用@import?
不建议使用@import,link标签除了可以加载CSS外,还可以做许多别的的事故,例如界说RSS,界说rel连结属性等,@import就只能加载CSS了。
问:font的缩写顺序是什么?
问:class命名有什么常用方式?
原子类命名规则
将复用性高的单条属性直接命名成类
.ml5{margin-left:5px;}
模块命名规则
按照职能划分命名规则,例如,模块是nav,便可以命名nav-tittle、nav-left
BEM
BEM思想是由于项目开发中,每个组件都是唯一无二的,其名字也是独一无二的,组件内部元素的名字都加上组件名,并用元素的名字作为选择器,自然组件内的样式就不会与组件外的样式冲突了。这是通过组件名的唯一性来保证选择器的唯一性,从而保证样式不会污染到组件外。