英文原文：Be a CSS Team Player: CSS Best Practices for Team-Based Development，编译：w3cplus – D姐
你有过多少次接手别人开发过的项目，却发现作者的代码思路一团糟吗？或是你跟几个团队成员合作开发，他们每个人都有自己书写代码的方式吗？或是你重新回顾你多年前开发的项目，不记得当初是怎么想的？
我总是遇到这种事情。事实上，我最近在修复供应商提供facepalm-inducing的css上花费了将近300个小时。这300个小时，使我充满了挫败感，不仅是因为我自己，还有我的团队成员的原因。而且他占用了本应该花费在新项目上的宝贵时间和资源
如果供应商在他的css中已经遵循了一些基本的指导方针。那么将会为他节省宝贵的时间和金钱，更不用说我会已更好的状态去对待他。在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。
结构化
书写好的css的基础是有良好的结构。这样的css可以帮助我以及任何将来要更新这段代码的人，更好的理解并快速定位到要找的样式上。
在开始写样式前，我先定义了一个css文件结构，根据页面中不同内容部分划分的区块。通常，这些结构是每个网站通用的:
1.Header
2.Navigation
3.Main content
4.Sidebar
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 |
ְ回顾你多年前开发的项目，不记得当初是怎么想的？
我总是遇到这种事情。事实上，我最近在修复供应商提供facepalm-inducing的css上花费了将近300个小时。这300个小时，使我充满了挫败感，不仅是因为我自己，还有我的团队成员的原因。而且他占用了本应该花费在新项目上的宝贵时间和资源 如果供应商在他的css中已经遵循了一些基本的指导方针。那么将会为他节省宝贵的时间和金钱，更不用说我会已更好的状态去对待他。在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。 结构化 书写好的css的基础是有良好的结构。这样的css可以帮助我以及任何将来要更新这段代码的人，更好的理解并快速定位到要找的样式上。 在开始写样式前，我先定义了一个css文件结构，根据页面中不同内容部分划分的区块。通常，这些结构是每个网站通用的: 1.Header 2.Navigation 3.Main content 4.Sidebar 5.Footer 在我的样式文件里，我添加了必要的注释，以标明每个部分的样式从哪里开始
注意第一个注释global的部分，他不是针对于网站的特定内容，而是针对网站上的通用样式，例如布局结构，以及标题、段落、列表和链接等基础样式。 在样式头部设置通用的样式，有助于全站更好的继续共有样式，并在需要时覆盖即可。 越多的css就需要越多的组织 在创建超大型的网站，处理相当多的css时，我就会给每个区块里添加二级注释。例如，在global里我定义这样的二级结构分类：
同样你也看到了我给NAV也添加了二级注释，分别为主导航和次导航。 事实上，对于很少css的小型网站，我通常是不使用二级注释的。但是对于大型的css文件，二级注释被证实是很管用的。 自由格式化 你使用的注释格式完全取决于你。以上你看到的例子是我和我的团队很钟爱的方式。也有些人喜欢用两行定义他们的注释格式：
另一些人使用特殊字符如‘=’，作为搜索字符的标记:
一些人不使用二级注释，他们用一种完全不同的结构，不是根据页面内容划分，而是用元素的类型划分如：headers，images，lists等等。关键是用你喜欢的格式去定义并一直这么使用。 想根据内容元素划分？没问题。想要小写注释，那就去做。不想使用二级注释缩进？那就不用.不喜欢连字符想用时间？ok。你只需要做对于你和你的团队最有意义的事情就好。 交流注释用法 我们已经了解了注释的结构，但是你应该就这如何使用注释的问题跟你团队的同事交流一下。 什么时间，谁做了什么 作为团队成员的一份子，很有必要在团队成员之间交流已经写好的css文件的相关细节。在我的团队里，我们在css文件的头部添加了一些css文件创建和更新信息的摘要注释。
在处理多个样式表时，头部的信息是有用的。如一个屏幕，一个用于打印，一个用于移动甚至是关于ie的hack写法。作者的信息让团队成员知道一旦css出了问题应该去找谁。而更新信息让团队了解谁最后做的更新以及更新时间。 至于你的摘要注释，仅需要包含对你团队有用的信息。如果你不需要作者信息，跳过。如果想要版权声明加上。我甚至见过摘要里面有地址和联系信息的。
颜色值 我遇到过的最有用的css注释之一是网站用到的颜色值。
颜色值在开发阶段很有用，节省你测试颜色和从其他样式里查找的时间。你不需要知道这个十六进制值是不是蓝色，你只需要找到这个颜色值，然后复制粘贴即可。 在我的团队里，我们在css文件头部添加通用的颜色值，要在所有样式声明和注释前，摘要注释后面添加。我们也尝试保持关键字尽可能简单方便维护，但是他到底有多复杂完全取决于你。 格式也全取决于你。你可以让所有定义的颜色值放在一行显示，也可以把他们分成多行显示:
同样，找到一个最好的有利于你需要的格式，一旦定义好就要保持他的一致性。 开发和调试 有时候在我开发的过程中，不得不徘徊在我的css 和团队其他成员之间。而这时注释就派上用场了。当我有时冥思苦想为什么css在ie下会有这样的bug，我就只需要走开即可。 你或是你的同事做个笔记，包括可能的样式，和没有解决的困惑：
|
