CSS规范 - 代码格式

转载 2015年07月06日 21:07:27
选择器、属性和值都使用小写

在xhtml标准中规定了所有标签、属性和值都小写,CSS也是如此。

单行写完一个选择器定义

便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别。去除多余空格,使代码紧凑减少换行。

如果有嵌套定义,可以采取内部单行的形式。

1
2
3
4
5
6
7
8
9
10
11
/* 单行定义一个选择器 */
.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}
/* 这是一个有嵌套定义的选择器 */
@media all and (max-width:600px){
    .m-class1 .itm{height:17px;line-height:17px;font-size:12px;}
    .m-class2 .itm{width:100px;overflow:hidden;}
}
@-webkit-keyframes showitm{
    0%{height:0;opacity:0;}
    100%{height:100px;opacity:1;}
}
最后一个值也以分号结尾

通常在大括号结束前的值可以省略分号,但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。

省略值为0时的单位

为节省不必要的字节同时也使阅读方便,我们将0px、0em、0%等值缩写为0。

1
.m-box{margin:0 10px;background-position:50% 0;}
使用单引号

省略url引用中的引号,其他需要引号的地方使用单引号。

1
2
.m-box{background:url(bg.png);}
.m-box:after{content:'.';}
使用16进制表示颜色值

除非你需要透明度而使用rgba,否则都使用#f0f0f0这样的表示方法,并尽量缩写。

1
.m-box{color:#f00;background:rgba(0,0,0,0.5);}
根据属性的重要性按顺序书写

只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。

显示属性 自身属性 文本属性和其他修饰
  display width font
  visibility height text-align
  position margin text-decoration
  float padding vertical-align
  clear border white-space
  list-style overflow color
  top min-width background
1
.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}

如果属性间存在关联性,则不要隔开写。

1
2
/* 这里的height和line-height有关联性 */
.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}
私有在前,标准在后

先写带有浏览器私有标志的,后写W3C标准的。

1
.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}
注释格式:/* 注释文字 */

对选择器的注释统一写在被注释对象的上一行,对属性及值的注释写于分号后。

注释内容两端需空格,已确保即使在编码错误的情况下也可以正确解析样式。

在必要的情况下,可以使用块状注释,块状注释保持统一的缩进对齐。

原则上每个系列的样式都需要有一个注释,言简意赅的表明名称、用途、注意事项等。

1
2
3
4
5
6
7
8
9
/* 块状注释文字
 * 块状注释文字
 * 块状注释文字
 */
.m-list{width:500px;}
.m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;}
.m-list li a{color:#333;}
/* 单行注释文字 */
.m-list li em{color:#666;}
原则上不允许使用Hack

很多不兼容问题可以通过改变方法和思路来解决,并非一定需要Hack,根据经验你完全可以绕过某些兼容问题。

一种合理的结构和合理的样式,是极少会碰到兼容问题的。

由于浏览器自身缺陷,我们无法避开的时候,可以允许使用适当的Hack。

统一Hack方法

统一使用“*”和“_”分别对IE7和6进行Hack。如下代码所示:

1
2
/* IE7会显示灰色#888,IE6会显示白色#fff,其他浏览器显示黑色#000 */
.m-list{color:#000;*color:#888;_color:#fff;}
建议并适当缩写值

“建议并适当”是因为缩写总是会包含一系列的值,而有时候我们并不希望设置某一值,反而造成了麻烦,那么这时候你可以不缩写,而是分开写。

当然,在一切可以缩写的情况下,请务必缩写,它最大的好处就是节省了字节,便于维护,并使阅读更加一目了然。

缩写方法请查阅css手册。

选择器顺序

请综合考虑以下顺序依据:

  • 从大到小(以选择器的范围为准)
  • 从低到高(以等级上的高低为准)
  • 从先到后(以结构上的先后为准)
  • 从父到子(以结构上的嵌套为准)

以下仅为简单示范:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 从大到小 */
.m-list p{margin:0;padding:0;}
.m-list p.part{margin:1px;padding:1px;}
/* 从低到高 */
.m-logo a{color:#f00;}
.m-logo a:hover{color:#fff;}
/* 从先到后 */
.g-hd{height:60px;}
.g-bd{height:60px;}
.g-ft{height:60px;}
/* 从父到子 */
.m-list{width:300px;}
.m-list .itm{float:left;}
选择器等级

a = 行内样式style。

b = ID选择器的数量。

c = 类、伪类和属性选择器的数量。

d = 类型选择器和伪元素选择器的数量。

选择器 等级(a,b,c,d)
style=”” 1,0,0,0
#wrapper #content {} 0,2,0,0
#content .dateposted {} 0,1,1,0
div#content {} 0,1,0,1
#content p {} 0,1,0,1
#content {} 0,1,0,0
p.comment .dateposted {} 0,0,2,1
div.comment p {} 0,0,1,2
.comment p {} 0,0,1,1
p.comment {} 0,0,1,1
.comment {} 0,0,1,0
div p {} 0,0,0,2
p {} 0,0,0,1

看了此篇, CSS/Style 语法规范基本够用

●为什么要用CSS:  ·一组样式可以调用在多个对象上·语法易学易懂(比HTML的语法还容易学,学了HTML之后,学CSS将非常容易)·丰富的样式效果·是 DHTML 的基础·用css布局的一个好处是...
  • mini_snow
  • mini_snow
  • 2010年04月21日 19:23
  • 4665

Java代码格式规范个人推荐

个人整理Java编码格式规范,也是本人在开发中遵守的规范。代码格式规范,仅是为了体现一种规范和美观,大家可根据各自情况和公司要求遵守自己的规范。 /**  * Java编码格式个人推荐,参考JDK源...
  • huikaixikai1123
  • huikaixikai1123
  • 2016年05月24日 22:55
  • 452

Html、CSS、JS代码注释的规范总结

添加必要的注释,对一个有责任心、有道德模范的前端必须具备的好习惯,可以大大提高代码的可维护性、可读性。 首先熟悉一下html、css、js的注释的写法: 1、HTML注释语法: ...
  • wangjieyunxia
  • wangjieyunxia
  • 2014年11月22日 17:53
  • 1018

web项目开发 之 前端规范 --- CSS编码规范

此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范 文档。供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力。 转载请注明出处;JS前端实用...
  • xllily_11
  • xllily_11
  • 2016年04月26日 11:32
  • 5323

Python 代码规范

前言Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯目录一、简明概述1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况,...
  • Two_Water
  • Two_Water
  • 2017年06月13日 00:44
  • 2131

ACM代码格式

1. 题目没有说明有多少组测试数据 #include int main() { while (scanf("/*输入格式*/") != EOF) { //代码 } } 或 #in...
  • Aloha_Kk
  • Aloha_Kk
  • 2017年12月03日 01:03
  • 33

项目文档编写规范与代码规范

往往越是规模大的公司,其项目工作中的每一个环节都有相应的规范进行管理,这些规范都是都前辈呕心沥血,披荆斩棘所获的的经验总结,而非普通文书工作者的推猜可得。       当然,如果刚刚创业起步的小公司如...
  • z511273571
  • z511273571
  • 2010年10月15日 12:03
  • 1594

svn上传日志规范及开发目录规范

一、背景         虽然现在很多公司都使用Git作为版本控制工具使用,但是svn仍然在很多公司中被广泛使用,尤其在一些规模不大的公司中使用得更广。 二、SVN         SV...
  • hpblovechj
  • hpblovechj
  • 2016年01月13日 11:46
  • 1944

IOS 代码书写风格规范

点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法。   良好的风格: view.backgroundColor =...
  • qingsi00
  • qingsi00
  • 2015年04月17日 18:24
  • 2979

代码注释规范

代码注释规范
  • xu_ya_fei
  • xu_ya_fei
  • 2016年06月23日 17:40
  • 1197
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS规范 - 代码格式
举报原因:
原因补充:

(最多只允许输入30个字)