# 代码格式
每个人都有自己的方式方法。你现在掌握的工具和技术可能是自己反复试验得来的,也可能是从别人那里学来的。我开始开发的时候,我使用的是Dreamweaver。Dreamweaver有很多特性,可以让我快速地构建静态HTML网站。当我看到我的一个同事使用Ultraedit,并且看到他使用Ultraedit很快的完成工作,我开始学习Ultraedit丰富我的工具集。这其实对于编码来说是一样的,我看到某种技术或者是别人使用的样式,我会将这些技术纳入我自己的工作体系。
在代码格式这一章,我会简单介绍我的代码格式,希望在我的代码能够被大家读懂。
# 单行与多行
有很长一段时间,我使用单行方法 (opens new window)来编写我的CSS。也就是说所有的规则属性我都写在同一行里。这样我可以快速扫描左侧的选择器,因为对我来说快速查看选择器可比排列整齐的属性重要多了。几年以前,规则集的属性列表大多数是比较小的,所以我可以找到我想要的选择器,而且所有属性都会显示在屏幕上。
随着CSS3的到来,属性有了无数的厂商前缀,上述方法很快就不能应付了。况且在一个大型团队中,一个选择器里的规则很可能是多个人编写的。
/* CSS3有太多的厂商前缀,如果属性都在一行里,会变得难以阅读 */
.module {
display: block;
height: 200px;
width: 200px;
float: left;
position: relative;
border: 1px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
font-size: 12px;
text-transform: uppercase;
}
这个例子中,有11个属性被定义了,如果我们再定义一两个属性,可能还会规则集还会更大。如果所有这些属性都在一行里,那么我们只能在屏幕上看到一部分属性,其他属性需要我们滚动屏幕才能看到。这会让我们查看属性变得十分困难。
这个例子中还有一些需要注意的点:
- 分号后面有一个空格
- 每个属性前有四个空格(不是tab)
- 属性按类型分类
- 开始括号和选择器在同一行上
- 颜色使用简短的格式
以上都是有好处的,当然使用完全不同的方法也没问题。这些只是让我感觉起来自然,且有意义的编写方法。
# 属性分组
有些人按照字母顺序来对属性进行分组,有些人根本不进行分组,还有些人可能使用一些比较随意的系统性分组。我就是最后一类人。不过注意这不是完全随意的,我其实是按重要程度分组的,但是如何区分样式的重要程度呢?
我按照以下顺序组织我的样式
- Box
- Border
- Background
- Text
- Other
Box包含了影响显示和位置的属性,例如,display
, float
, position
, left
, top
, height
, width
等等。对我来说,这些是最重要的属性,因为它们能够影响文档的其他部分。
Border则包括了border
,border-radius
,以及不常使用的border-image
。
Background排在第三。因为CSS渐变的出现,背景的定义可以变得非常复杂,而厂商前缀则会使得定义更加复杂。
/* CSS3定义多个背景 */
background-color: #6d695c;
background-image: url("/img/argyle.png");
background-image:
repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
我们虽然可以用CSS3渐变创造复杂的模式,但是却不得不定义冗长的背景声明,何况我们这个例子还没有包括CSS3的前缀,所以我们可以想象如果加上前缀,背景的定义会变得怎样的冗长。
Text包括font-family
font-size
text-transform
letter-spacing
以及其他影响显示类型的CSS属性。
其他不属于上述分类的属性一般都放在最后面。
# 颜色定义
提到颜色定义大家可能觉得没什么好讲的,不过我看到不同的开发者却有着不同的定义。一些人可能使用类似black
,white
这样的关键词,但是我却会尽可能地使用3位或是6位的哈希值。#000
和#FFF
不仅短,而且能和关键词对应。我也不会使用rgb
或是hsl
,因为和哈希值相比还是太长了。当然rgba
和hsla
没有哈希格式,我们只能使用它们。
← 录屏 避免上下文内容特定 资源 →