1背景介绍
编码规范
1正确的书写css样式不仅易于查看,并且也属于css样式优化的一种方式。
2规范的书写可以促进团队的合作
3可以减少处理bug的一些麻烦
4养成良好的书写规范习惯,有助于自身的成长
编码规范的基本准则
符合标准,符合语义化,代码要求简洁明了,尽可能的减少服务器的负载,保证最快的解析速度
2知识剖析
1css命名规范
2所有的命名最好都小写
3尽量使用英文命名原则
4尽量不缩写,除非一看就明白的单词
5如果遇到不常用的,可以借助翻译工具进行翻译取其英文命名。
常用的css样式命名
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
标志 logo ------------------- 用于标志
版权 copyRight ------------------- 最底部的版权声明
css的样式一般用外联的方式连接到html中
常用的CSS样式文件命
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
css编写顺序
显示属性:display/list-style/position/float/clear …
自身属性(盒模型):width/height/margin/padding/border
背景:background
行高:line-height
文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
其他:cursor/z-index/zoom/overflow
CSS3属性:transform/transition/animation/box-shadow/border-radius
如果使用CSS3的属性,如果有必要加入浏览器兼容性前缀,则按照 -webkit- / -moz- / -ms- / -o- /std的顺序进行添加,标准属性写在最后。
3常见问题
排版问题
4解决方案
单行形式的排版书写
每一条规则的大括号 { 前后加空格 ;
每一条规则结束的大括号 } 前加空格;
属性名冒号之前不加空格,冒号之后加空格;
每一个属性值后必须添加分号; 并且分号后空格;
多行形式的排版书写
每一条规则的大括号 { 前添加空格;
多个选择器共用一个样式集,则多个选择器必须写成多行形式 ;
每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 ;
属性名冒号之前不加空格,冒号之后加空格;
属性值之后添加分号;
5编码实战
6拓展思考
代码性能优化
属性的简写合并,比如margin、padding、borde
选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。
禁止在css中使用*选择符。
0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px
如果是16进制表示颜色,则颜色取值应该大写。
如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC
7参考文献
8更多讨论
问:为什么要规范的编写代码
答:
1正确的书写css样式不仅易于查看,并且也属于css样式优化的一种方式。
2规范的书写可以促进团队的合作
3可以减少处理bug的一些麻烦
问:规范的编写代码有什么要求
答:符合标准,符合语义化,代码要求简洁明了,尽可能的减少服务器的负载,保证最快的解析速度
问:遇到不常用的属性该如何命名
答:如果遇到不常用的,可以借助翻译工具进行翻译取其英文命名。