CSS最佳实践团队开发

 你有过多少次接手别人开发过的项目,却发现做者的代码思路一团糟吗?或是你跟几个团队成员合做开发,他们每一个人都有本身书写代码的方式吗?或是你从新回顾你多年前开发的项目,不记得当初是怎么想的? javascript

  我老是遇到这种事情。事实上,我最近在修复供应商提供facepalm-inducing的css上花费了将近300个小时。这300个小时,使我充满了挫败感,不只是由于我本身,还有个人团队成员的缘由。并且他占用了本应该花费在新项目上的宝贵时间和资源 php

  若是供应商在他的css中已经遵循了一些基本的指导方针。那么将会为他节省宝贵的时间和金钱,更不用说我会已更好的状态去对待他。在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工做。 css

  结构化 html

  书写好的css的基础是有良好的结构。这样的css能够帮助我以及任何未来要更新这段代码的人,更好的理解并快速定位到要找的样式上。 前端

  在开始写样式前,我先定义了一个css文件结构,根据页面中不一样内容部分划分的区块。一般,这些结构是每一个网站通用的: java

  1.Header web

  2.Navigation 数组

  3.Main content 浏览器

  4.Sidebar app

  5.Footer

  在个人样式文件里,我添加了必要的注释,以标明每一个部分的样式从哪里开始

?
1
2
3
4
5
6
  /*---GLOBAL---*/
  /*---HEADER---*/
  /*---NAV---*/
  /*---CONTENT---*/
  /*---SIDEBAR---*/
  /*---FOOTER---*/

  注意第一个注释global的部分,他不是针对于网站的特定内容,而是针对网站上的通用样式,例如布局结构,以及标题、段落、列表和连接等基础样式。

  在样式头部设置通用的样式,有助于全站更好的继续共有样式,并在须要时覆盖便可。

  越多的css就须要越多的组织

  在建立超大型的网站,处理至关多的css时,我就会给每一个区块里添加二级注释。例如,在global里我定义这样的二级结构分类:

?
1
2
3
4
5
6
7
8
9
10
11
12
/*---GLOBAL---*/
  /*--Structure--*/
  /*--Typographic--*/
  /*--Forms--*/
  /*--Tables--*/
/*---HEADER---*/
/*---NAV---*/
  /*--Primary--*/       
  /*--Secondary--*/  
  /*---CONTENT---*/  
/*---SIDEBAR---*/  
/*---FOOTER---*/

  一样你也看到了我给NAV也添加了二级注释,分别为主导航和次导航。

  事实上,对于不多css的小型网站,我一般是不使用二级注释的。可是对于大型的css文件,二级注释被证明是很管用的。

  自由格式化

  你使用的注释格式彻底取决于你。以上你看到的例子是我和个人团队很钟爱的方式。也有些人喜欢用两行定义他们的注释格式:

?
1
2
/*   HEADER      
------------------------------*/

  另外一些人使用特殊字符如‘=’,做为搜索字符的标记:

?
1
2
/*   =Header      
------------------------------*/

  一些人不使用二级注释,他们用一种彻底不一样的结构,不是根据页面内容划分,而是用元素的类型划分如:headers,images,lists等等。关键是用你喜欢的格式去定义并一直这么使用。

  想根据内容元素划分?没问题。想要小写注释,那就去作。不想使用二级注释缩进?那就不用.不喜欢连字符想用时间?ok。你只须要作对于你和你的团队最有意义的事情就好。

  交流注释用法

  咱们已经了解了注释的结构,可是你应该就这如何使用注释的问题跟你团队的同事交流一下。

  什么时间,谁作了什么

  做为团队成员的一份子,颇有必要在团队成员之间交流已经写好的css文件的相关细节。在个人团队里,咱们在css文件的头部添加了一些css文件建立和更新信息的摘要注释。

?
1
/*----TITLE: Main screen styles | AUTHOR: EPL | UPDATED: 03/23/10 by EPL----*/

  在处理多个样式表时,头部的信息是有用的。如一个屏幕,一个用于打印,一个用于移动甚至是关于ie的hack写法。做者的信息让团队成员知道一旦css出了问题应该去找谁。而更新信息让团队了解谁最后作的更新以及更新时间。

  至于你的摘要注释,仅须要包含对你团队有用的信息。若是你不须要做者信息,跳过。若是想要版权声明加上。我甚至见过摘要里面有地址和联系信息的。

?
1
/*---- IE6 screen styles (ie6.css)  Company ABC 1234 Avenue of the Americas New York, NY 10020 http://companyabc.com  Updated: 03/23/10 by EPL ----*/

  颜色值

  我遇到过的最有用的css注释之一是网站用到的颜色值。

?
1
/*---COLORS: Green #b3d88c | Blue #0075b2 | Light Gray #eee | Dark Gray #9b9e9e | Orange #f26522 | Teal #00a99d | Yellow #fbc112---*/

  颜色值在开发阶段颇有用,节省你测试颜色和从其余样式里查找的时间。你不须要知道这个十六进制值是否是蓝色,你只须要找到这个颜色值,而后复制粘贴便可。

  在个人团队里,咱们在css文件头部添加通用的颜色值,要在全部样式声明和注释前,摘要注释后面添加。咱们也尝试保持关键字尽量简单方便维护,可是他到底有多复杂彻底取决于你。

  格式也全取决于你。你可让全部定义的颜色值放在一行显示,也能够把他们分红多行显示:

?
1
2
3
4
5
6
7
8
9
/*---COLORS      
Green #b3d88c      
Blue #0075b2      
Light Gray #eee      
Dark Gray #9b9e9e      
Orange #f26522      
Teal #00a99d      
Yellow #fbc112 
---*/

  一样,找到一个最好的有利于你须要的格式,一旦定义好就要保持他的一致性。

  开发和调试

  有时候在我开发的过程当中,不得不徘徊在个人css 和团队其余成员之间。而这时注释就派上用场了。当我有时左思右想为何css在ie下会有这样的bug,我就只须要走开便可。

  你或是你的同事作个笔记,包括可能的样式,和没有解决的困惑:

?
1
2
3
4
5
6
7
8
9
/*--//--Styling for link states is pending new changes from designer, please don't edit | EPL 03/23/10--\\--*/ 
a, a:link, a:visited {    
  color:#0075b2;     
  text-decoration:none;
}  
   
a:hover, a:focus, a:active {    
  color:#b3d88c;
}
  为了让他们不同凡响,我一般用一种不一样于其余注释的格式,同时让他们尽量的详细。仍是使用最适合你的格式。</span>

  不过记住,一旦你完成开发和调试工做,这些注释就没有用了。他们既不跟你的工做有关,也不跟你的css有关,他们的存在只会增大你的文件体积。

  样式重置

  样式重置已经很流行。他们出如今样式文件的头部,用来设置html元素在跨浏览器显示的基本样式:

?
1
2
3
4
5
6
7
8
9
10
11
12
/*---RESET---*/ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong,sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,caption, tbody, tfoot, thead, tr, th, td {    
  margin:0;    
  padding:0;    
  border:0;    
  outline:0;    
  font-weight: inherit;    
  font-style: inherit;    
  font-size:100%;    
  font-family: inherit;    
  vertical-align:baseline; 
}

  以上的例子摘自Eric Meyer的重置文档,这个我也常常用。可是我倾向于去掉我用不到的标签,我也建议你这样作。好比个人团队构建的网站里面几乎没有<kbd>,也没有<iframe>,<applet>或是包含以上的一些元素。

  因此,我去掉这些元素选择器。虽然在页面加载或是文件体积上只有很小的不一样,可是我感受这样有助于,避免团队成员间对于不使用的标签的困扰。

  若是我不想要覆盖浏览器的内置样式,我也能够编辑重置样式表,例如如何处理无序列表。在这种状况下,我确保这些元素不包含在样式表声明里。

  不过,我应该澄清一下,css重置并不适用于全部人。你有不少不使用他的理由,这由你决定。若是你要重置样式,要保持你的重置样式表尽可能干净和特殊。

  命名约定

  最头疼的事情之一是,遇到其余人写的css,并且是定义的类名和id名毫无心义的那种。例如像下面这样:

?
1
2
3
4
5
6
.f23{    
  background:#fff;    
  border:1pxsolid#ff0;    
  font-weight:bold;    
  padding:10px; 
}

  我根本不知道.f23是什么意思。甚至更糟的是都没有任何形式的注释。我不知道.f23表明什么内容。是标题?主要内容?仍是导航?

  这种状况,尤为是对于大型网站,就可能浪费大量的时间去查找出现这个类名的标签位置。若是做者用一个约定好的名字命名,如那些有意义的,那些基于内容的样式的:

?
1
2
3
4
5
6
.alert {    
  background:#fff;    
  border:1pxsolid#ff0;    
  font-weight:bold;    
  padding:10px;
}

  如你所见,类名.alert提供的上下文信息要比用一个随机数组成的类名提供的信息多。

  不只仅是上下文,有语意的命名还能够节约时间。考虑到一个公司品牌的频繁更换,若是你开发的css使用表现的类名而不是语义化的类名和id名,那么在寻找、维护css时,你将比预期花费更多的时间。

  例如,若是你给网站上一块内容,定义一个bluebox的类名,使用了公司logo的蓝色基调。而后公司重组了,他们如今用红色基调的logo,这时你的.blueBox就没有意义啦。因此你不只须要更新样式表的十六进制颜色值,还须要修改标签中的全部引用到blueBox的地方。

  相反若是你用callOut做为类名(或是一样有意义的名字),你会省去手头的不少工做量。

  类名滥用

  在css 的使用中,我倾向于能少则少的原则。不能由于你能够给每一个元素指定类名,就意味着你就应该给每一个元素指定类名。

  在我修复供应商糟糕的css过程当中,发现类名被滥用了,出如今许多原本不须要的地方。例如每个lable标签就定义一个lable类名,每个form就定义一个form。可是咱们的设计和结构中只须要给一个form元素设置样式,它里面也只包含一个label元素。

?
1
2
3
4
5
6
7
8
9
10
11
12
form.form {    
  float:right;    
  margin:0;    
  padding:5px; 
  
label.label {    
  clear:both;    
  float:left;    
  text-align:right;    
  width:145px;
}

  由此产生的css自己和他形成的冗余并不可怕,可怕的是他形成的困惑。做为一个设计师看到了这个form类,可能猜测是否是其余样式表里也定义了叫form的类名,而后去查找根本不存在的样式,这就是我时间浪费的缘由。

  类名不等于特异性

  上面只是一个简单的例子。一个我遇到的有关类名更疯狂的例子是渴望给予元素特殊性

?
1
2
3
4
5
6
<div id="feature">  
  <ul>     
    <li><a href="#newServices">New Services</a></li>     
    <li><a href="#newProducts">New Products</a></li>  
  </ul> 
</div>

  注意到tabs的类名应用到了上面结构中的每个标记?致使以下的css目录列表:

?
1
2
3
4
5
div.tabs ul.tabs li.tabs {    
  float:left;    
  font-weight:bold;    
  padding:3px; 
}

  对于li最简便的解决方法应该是这样:

?
1
2
3
4
5
#feature li {    
  float:left;    
  font-weight:bold;    
  padding:3px;
}

  若是你的元素定义样式不须要类名,那就不要用。用的太多类名,不只使你的结构和css很臃肿,也失去了他们在css 中的意义。

  你也许注意到了在最后的例子中,我仅使用了# feature做为选择器而不是div#feature。只有在为了区别其余选择器的状况下,添加div才合适,不然只会给你的团队带来负担。并且尽可能少用特殊的声明,也为往后覆盖任何样式提供方便。

  多类

  最后一点,我不喜欢多类,你也许还有印象。虽然我不提倡使用没必要要,多余的类名,可是对于经过多类保持元素表现的共用,我但是一个忠实的粉丝,然而可能有一些理解的不一样之处:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.announcement {    
  background:#eee;    
  border:1pxsolid#007b52;
  color:#007b52;    
  font-weight:bold;    
  padding:10px;
}  
  
.newsAnnouncement {    
  background:#eee;    
  border:1pxsolid#007b52;
  color:#007b52;    
  float:right;    
  font-weight:bold;    
  padding:10px; 
}

  上面的两个声明,除了.newsAnnouncement多了一个浮动外,都彻底同样。因此我大可像下面这样而不是重复写相同的样式:

?
1
2
3
4
5
6
7
8
9
10
11
.announcement {    
  background:#eee;    
  border:1pxsolid#007b52;
  color:#007b52;    
  font-weight:bold;    
  padding:10px;
}  
  
.floatR {    
  float:right; 
}

  而后给个人新闻内容添加两个类名

?
1
<div class="announcement floatR">

  可是且慢,我不是说过要根据约定好的名字而不是根据表现命名吗?没错,可是凡事总有个例外。

  是的,.floatR是一个表现类名,可是他适用于这种状况,并且能够用于其余须要多类的状况,因此这是个人团队常用的方法。

  分组选择器

  在个人300个小时的折磨里,遇到的另外一个问题是彻底相同的样式出如今多个样式表里,而惟一的区别就是声明他们的选择器不一样:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#productFeature {    
  background:#fff;    
  border:1pxsolid#00752b;    
  float:left;    
  padding:10px; 
}  
  
#contactFeature {    
  background:#fff;    
  border:1pxsolid#00752b;    
  float:left;    
  padding:10px; 
}
  
#serviceFeature {    
  background:#fff;    
  border:1pxsolid#00752b;    
  float:left;    
  padding:10px; 
}

  这不只使得css文件体积过于臃肿,也使维护成了噩梦。解决方法就是合并他们成一个样式声明:

?
1
2
3
4
5
6
#productFeature, #contactFeature, #serviceFeature {    
  background:#fff;    
  border:1pxsolid#00752b;    
  float:left;    
  padding:10px; 
}

  如今若是要更新样式只须要修改一个声明而不是三个。

  一行仍是多行书写?

  本文中出现的全部css实例都是用的多行的格式,每一对属性和值占单独一行。这个是普遍使用的约定,不只是在css文件中,也多出如今书里和文章里。许多人认为他的可读性很好,这也就是什么我在本文使用他的缘由。

  然而在和团队的工做中,尤为是大型的css文件,我是将样式写成一行:

?
1
.alert {background:#fff;border:1pxsolid#ff0;font-weight:bold;padding:10px;}

  就我我的和个人团队而言,以为单行的可读性更好。当你查找css时多行样式就变得很麻烦,相比较而言单行查找更容易。

  对于你和你的团队,选择最合适你的团队的格式,并一直使用他。

  须要依照字母顺序排列吗?

  一些人建议将每一个声明按照字母表的顺序排列,方便快速查找一个属性。之前我对这样的事情并不在乎,可是通过处理供应商混乱的css以后,我意识到将一些思想应用到样式声明的组织中是个很好的主意。

  尽管我发现按照字母表排序颇有用,可是我仍是会根据上下文来组织哪些属性放在一块儿。好比,我喜欢将全部的盒模型属性放在一块儿。若是我使用了绝对定位,我就把这些属性放在一块儿:

?
1
2
3
4
5
6
7
8
#logo {    
  border:1pxsolid#000;    
  margin:0;    
  padding:0;    
  position:absolute;    
  top:5px;    
  right:3px; 
}

  这里没有对错之分,仅仅是决定用哪一种属性的排序并一直用它就行了。

  使用简写

  使用css简写一直是认为能够提升你的css水平的方法。他同时也适用于团队,它不只能够有助于浏览,并且能够方便设置你们遵照的标准。这样就减小了花费在思考和书写样式的时间。

  0值

  若是你使用0值,没有必要给他指定单位:

?
1
margin:2px3px0px4px

  变成

?
1
margin:2px3px04px

  颜色模式

  十六进制颜色值若是是由三对数组成,能够从每组中抽出一个数组成该颜色值的简写:

?
1
color:#ff0000

  写成

?
1
color:#f00

  盒模型属性

  盒模型中的margin,padding,border若是四边值相同,能够合并:

?
1
padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px

  合并成

?
1
padding:5px

  若是上下,左右值同样,你只须要写两个就够了:

?
1
padding:5px10px5px10px

  合并成

?
1
padding:5px10px

  字体属性

  多条字体属性能够合并成一条

?
1
font-style:italic;font-weight:bold;font-size:90%;font-family:Arial,Helvetica,sans-serif;

  合并成

?
1
font:italicbold90%Arial,Helveticasans-serif

  背景色属性

  背景属性也是能够合并的

?
1
background-color:#fff;background-image:url(logo.png);background-repeat:no-repeat;background-position:010%;

  合半成

?
1
background:#f00url(logo.png)no-repeat010%

  请注意最后两个例子,字体和背景属性。属性值的声明顺序要按照w3c的标准来。

  验证,验证,再验证

  虽然一些人认为验证css须要指定一个很好的验证规则,这一点我不强求可是他绝对是有要求的。验证可以确保你的工做,是否准备好分享给团队的其余成员,因此他应该知足下面要求:

  1.容易开发和故障排除

  2.保证如今和将来的浏览器显示一致

  3.保证页面的快速加载

  4.做为可访问性的一部分

  5.把他正确的写出来

  我建议使用W3C CSS验证服务

  压缩工具

  若是你的团队关心文件大小,页面加载和带宽的话,你应该考虑使用一个压缩工具。它主要是用来去除没必要要的注释,空格。这里有一些压缩工具能够考虑:

  1.CSS Compressor

  2.CSS Optimizer

  3.Code Beautifer

  4.CSS Tidy

  我不建议在开发的过程当中压缩文件,由于压缩能够减少你的文件大小,同时也削弱了你和团队之间协同开发和处理css 的能力。由于他去掉了具备可读性的全部注释和空格,因此应该把压缩做为产品上线的最后一道工序。

  冰山一角

  本文中提到的只是少数基础实践,他们能够帮助你和团队高效的工做。遵循这些准则能够进一步完善你的css。若是你很感兴趣的话,我推荐你阅读下面的文章:

  1.Different Ways to Format CSS

  2.Unique Pages, Unique CSS Files

  3.Single-line vs. Multi-line CSS

  4.CSS Property Order Convention

  5.On HTTP: Page Load Times, Multiple File Requests and Deferred JavaScript

  6.Don’t Use @import

  7.Efficient CSS with shorthand properties

  8.CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

  9.Object Oriented CSS

  遵照黄金定律

  无论你是工做在一个团队中,仍是做为外包或是做为团队的惟一成员,这些css准则将为你往后成为一个优秀的团队成员打好坚实的基础,它不只节约你的开发时间,也避免了没必要要的沮丧情绪。

  译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了我的对技术的理解。若是翻译有不对之处,还烦请同行朋友指点。谢谢!

  英文原文:http://msdn.microsoft.com/en-us/magazine/ff679957.aspx

相关文章
相关标签/搜索