添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 建站教程 > DIV+CSS >

网页制作CSS命名规范整理(2)

时间:2014-09-21      来源:lanrentuku.com     

  四、书写规范

  1、排版规范

  (1)使用4个空格,而不使用tab或者混用空格+tab作为缩进;

  (2)规则可以写成单行,或者多行,但是整个文件内的规则排版必须统一;

  单行形式书写风格的排版约束

  如果是在html中写内联的css,则必须写成单行;

  每一条规则的大括号 { 前后加空格 ;

  每一条规则结束的大括号 } 前加空格;

  属性名冒号之前不加空格,冒号之后加空格;

  每一个属性值后必须添加分号; 并且分号后空格;

  多个selector共用一个样式集,则多个selector必须写成多行形式 ;

  多行形式书写风格的排版约束

  每一条规则的大括号 { 前添加空格;

  多个selector共用一个样式集,则多个selector必须写成多行形式 ;

  每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 ;

  属性名冒号之前不加空格,冒号之后加空格;

  属性值之后添加分号;

  2、属性编写顺序

  显示属性: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的顺序进行添加,标准属性写在最后。

  链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active

  3、规则书写规范

  使用单引号,不允许使用双引号;

  每个声明结束都应该带一个分号,不管是不是最后一个声明;

  除16进制颜色和字体设置外,CSS文件中的所有的代码都应该小写;

  除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置;

  每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性;

  4、代码性能优化

  合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。

  选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。

  注意选择器的性能,不要使用低性能的选择器。

  禁止在css中使用*选择符。

  除非必须,否则,一般有class或id的,不需要再写上元素对应的tag。

  0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px。

  如果是16进制表示颜色,则颜色取值应该大写。

  如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC 。

  如果没有边框时,不要写成border:0,应该写成border:none 。

  尽量避免使用AlphaImageLoader 。

  在保持代码解耦的前提下,尽量合并重复的样式。

  background、font等可以缩写的属性,尽量使用缩写形式 。

  5、CSS Hack的使用

  请不用动不动就使用浏览器检测和CSS Hacks,先试试别的解决方法吧!考虑到代码高效率和易管理,虽然这两种方法能快速解决浏览器解析差异,但应被视为最后的手段。在长期的项目中,允许使用hack只会带来更多的hack,你越是使用它,你越是会依赖它!

  推荐使用下面的:
 

   网页制作CSS命名规范整理-【科e互联】
 

  6、字体规则

  为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei,几个单词中间有空格组成的必须加引号)

  字体粗细采用具体数值,粗体bold写为700,正常normal写为400

  font-size必须以px或pt为单位,推荐用px(注:pt为打印版字体大小设置),不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值

  为了对font-family取值进行统一,更好的支持各个操作系统上各个浏览器的兼容性,font-family不允许在业务代码中随意设置

 

  五、其他规范

  不要轻易改动全站级CSS和通用CSS库。改动后,要经过全面测试。

  避免使用filter

  避免在CSS中使用expression

  避免过小的背景图片平铺。

  尽量不要在CSS中使用!important

  绝对不要在CSS中使用”*”选择符

  层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比。

  背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可。

 

  六、测试规范

  1、了解浏览器特效支持

  为了页面性能考虑,如果浏览器不支持CSS3相关属性的,则该浏览器的某些特效将不再支持,属性的支持情况如下表所示(Y为支持,N为不支持):
 

   网页制作CSS命名规范整理-【科e互联】
 

  2、 设定浏览器支持标准
 

   网页制作CSS命名规范整理-【科e互联】
 

  A级-交互和视觉完全符全设计的要求

  B级-视觉上允许有所差异,但不破坏页面的整体效果

  C级-可忽略设计上的细节,但不防碍使用

  3、常用样式测试工具

  W3C CSS validator:http://jigsaw.w3.org/css-validator/

  CSS Lint:http://csslint.net/

  CSS Usage:https://addons.mozilla.org/en-us/firefox/addon/css-usage/

相关文章

大家都在看

最新更新