CSS编码规范
来源:互联网 发布:spring 事务源码 编辑:程序博客网 时间:2024/05/22 03:31
公用文件
协作开发过程中,会引入默认的base.css(里面包括了css reset、常用的css间距,css字体,css大小等,详细参见 base.css)。
书写风格规范
1. 每一条规则的大括号 { 前加空格;
2. 多个selector共用一个样式集,则多个selector以逗号+空格隔开;
3. 每行写一个属性;
4. 属性名冒号之前不加空格,冒号之后加空格;
5. 每一个属性值后必须添加分号+空格。
例如:
div.test { width: 100px; height: 200px; }a:focus, a:hover { position: relative; right: 1px; }其他书写风格规范
1. 使用单引号,不允许使用双引号;
2. 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加,标准属性写在最后,并且属性名称要对齐,例如:
div.animation-demo { -webkit-animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; -o-animation: mymove 5s infinite; animation: mymove 5s infinite;}
命名规则书写规范
1. 规则命名中,一律采用小写字母、数字及中划线组合,不允许使用大写字母或下划线;
2. 命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合;
3. 命名注意缩写,但是不能盲目缩写;
4. 不允许通过1、2、3等序号进行命名;
5. 避免class与id重名;
6. id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id;
7. class用于标识某一个类型的对象,命名必须言简意赅;
8. 尽可能提高代码模块的复用,样式尽量用组合的方式;
9. 规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名;
10. 除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置,例如:
div { width: 200px; font-size: 16px;}11. 每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性。
属性编写顺序
1. 显示属性
display/list-style/position/float/clear
2. 自身属性(盒模型)
width/height/margin/padding/border
3. 背景
background
4. 行高
line-height
5. 文本属性
color/font/text-decoration/text-align/
text-indent/vertical-align/white-space/content
6. 其他
cursor/z-index/zoom
7. CSS3属性
transform/transition/animation/box-shadow/border-radius
8. 链接的样式请严格按照如下顺序添加
a:link -> a:visited -> a:hover -> a:active(LoVeHAte)
性能优化
1. 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置;
2. 注意选择器的性能,不要使用低性能的选择器,例如:
div > * {}ul > li > a {}body.profile ul.tabs.nav li a {}
3. 禁止在css中使用*选择符;
4. 除非必须,否则,一般有class或id的,不需要再写上元素对应的tag,例如:
div#test { width: 100px;}
5. 0后面不需要单位,比如0px可以省略成0,0.8ps可以省略成.8px;
6. 如果是16进制表示颜色,则颜色取值应该小写;
7. 如果可以,颜色尽量用三位字符表示,例如#aabbcc写成#abc;
8. 如果没有边框时,不要写成border: 0,应该写成border: none;
9. 尽量避免使用AlphaImageLoader;
10. 在保持代码解耦的前提下,尽量合并重复的样式;
11. background、font等可以缩写的属性,尽量使用缩写形式。
其他规范
1. 字体名称请映射成对应的英文名,例如:黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei),如果字体名称中有空格,则必须加单引号;
2. 背景图片请合理使用csssprites,按照模块、业务、页面来划分均可;
3. css背景图片的文件类型,请按照以下原则来保存:
① 如果背景图片有动画,则保存成gif;
② 如果没有动画,也没有半透明效果,则保存成png-8;
③ 如果有半透明效果,则保存成png-24;
4. 不要在html中加入标签来清理浮动,通过在浮动元素的父元素上添加.clearfix来清除浮动;
5. 为了SEO和页面可用性,请使用text-indent来隐藏文本内容;
6. 制作css sprites时,尽量把颜色相近的图标放在一起,存储为png8格式,存储完以后还能用一些压缩工具进行无损压缩;
7. 避免过小的背景图片平铺;
8. 尽量少用!important;
9. 避免使用非一次性expression。
原文出处:http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120141195042367/
- [css] CSS编码规范
- 编码规范系列:css规范
- CSS编码规范
- HTML CSS 编码规范
- CSS编码规范【整理】
- HTML&CSS编码规范
- CSS编码规范(二)
- css编码规范(一)
- CSS编码规范
- bootstrap css编码规范
- CSS编码规范
- HTML&&CSS编码规范
- CSS编码规范
- css编码规范
- 前端css编码规范
- CSS编码规范总结
- CSS(CS3)编码规范
- html/css 编码规范
- Java中static的用法归纳
- 转:关于C++ const 的全面总结
- swift2 控制流
- JBoss调优(四)web服务器线程池调优
- linux i2c总线协议(一)
- CSS编码规范
- Java多线程服务端与客户端的交互小实例
- 面试中的红黑树问题
- hdu1513 Palindrome
- 【Android】Android客户端以线程的方式从服务器的PHP读取Mysql
- rop 入门(五)
- leetcode longestCommonPrefix
- curl 命令使用
- Objective-C中的NSValue的详解