s使用css编辑的好处,使用CSS Styleguides提高代码的可读性

原文：Improving Code Readability With CSS

Styleguides

通常情况下，一个项目完成后你差不多就把项目的布局结构，多如牛毛的class，颜色设置等等忘得一干二净，如果你希望后来还能读懂你自己的编码，那你最好使用清晰的编码结构，使编码简单易读易维护。事实上，开发者们创造性地使用注释和文本格式来提高代码的可维护性，下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。

1.分解你的样式

在开始编码前，把一些普通元素分到不同的组，并且给每组安排一个名字.例如，你可以分别将全局样式

(body, paragraphs, lists等), 布局, 标题, 文本样式, 导航,

表单,评论和其他分为几个不同的块来继续工作.

为了清楚的区分编码的不同块你可以使用/,*,-来实现.

在样式表中他们还可以起到标注每组名字的作用,

确保你在浏览编码时能够立刻辨识出每个单独的块。

可是，这种方法在大的项目时可能就力不从心了，因为可能其中一个块就已经大的吓人了。如果是这样的话，你可能就需要把编码分开放入几个文件中了，然后使用主样式表导入。

虽然使用主样式表的方法会增加对服务器的调用，但是能够保证清晰的编码，易于阅读，重用和维护。

对于大的项目或者大的开发团队来说，有一个包括项目重要信息的不断更新的日志是非常有用的。

此外当样式遇到问题的时候，你还可以使用比如

Eric Meyer’s Diagnostic

Styling 作为调试样式表调试代码。

2.建立CSS文件索引

为了能够预览编码结构，你可以在样式表文件的开头定义一个CSS文件索引。可以使用树形结构标明布局中的不同分支的ID和class.为了快速跳到你想要的代码部分，还可以使用一些关键词比如header部分或者内容组什么的。

在项目发布之后你可能还要经常修改某些重要的元素，那与此相关的class

和ID应该放入索引中，这样你就不用看完所有的代码或者记住你曾经使用的class

和ID就能快速找到他们。

…或者像这样:

还有一个方法只是简单的列举出各项没有使用缩排方式，比如下面这个例子，你只要在编码中使用搜索工具查找8.RSS就能立刻跳到RSS部分。这样子简单快捷。

3. 定义颜色和版式

因为目前我们还没有CSS常数，在web开发中我们把颜色和排版视为常量，因为他们在整个网站中出现多次都是使用固定的值。正如Rachel

Andrew 所说,

“一个避免CSS中缺乏常量的方法就是在CSS文件的开头用注释定义一些常量。一个常用的做法是创建一个颜色表.这样你就能快速的查看网站使用的颜色从而避免使用了错误的颜色，当你需要更改颜色时，你也能快速的查找和替换颜色。

对于特定的颜色你可以指出使用这种颜色的部分，也可以针对某个特定的部分指定使用的颜色。

排版也是这样，你可以在CSS文件头部写上一些注释来解释你整个排版的规律.

4.格式化CSS属性

当我们编写代码的时候，使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：

body,

h1, h2, h3,

p, ul, li,

form {

border: 0;

margin: 0;

padding: 0;

}

有些人则喜欢按字母表顺序排序，比如：

body {

background: #fdfdfd;

color: #333;

font-size: 1em;

line-height: 1.4;

margin: 0;

padding: 0;

}

不管你使用哪种格式排序，确保你清楚的定义了格式和表明了你的目标。你的同事一定会感谢你所作的工作，你也会感谢他们也按照你的格式做了排序的。

5. 缩进是个好帮手

为了好浏览，我们可能会考虑把代码写到一行中，但是如果同一个选择器的属性多余3项时就会看起来很乱。

不过，适度地使用这种方法能够很好的区别开使用同一class名的不同元素。当你要在样式表中查找特定元素时这种技术能够很好地提高代码的可读性。

#main-column { display: inline; float: left; width: 30em;

} #main-column h1 { font-family: Georgia, "Times New Roman", Times,

serif; margin-bottom: 20px; } #main-column p { color: #333; }

如果你清楚记得你做过的事情就可以很快回到那里修改，但是如果你那天做了很多改变或者干脆就是什么都不记得了该怎么办呢？Chris

Coyier提出了一个有趣的方法来highlighting你的CSS代码中最近改动过的地方.

只要缩排你最近新写的或改动过的行就行了。你也可以注释一些关键词来提醒，一旦你发现有问题时只要跳回你注释有关键词的地方撤销改动就行。

#sidebar ul li a {

display: block;

background-color: #ccc;

border-bottom: 1px solid #999;

margin: 3px 0 3px 0;

padding: 3px;

}

总结

CSS styleguides

如果使用得当的话将会对你的工作非常有帮助.紧记一点就是那些不能帮助你更好理解代码或者实现一个良好编码结构的styleguide坚决删除不要.避免有太多的styleguides，太多的组，记住你的目标是实现易读和易维护，坚持这一点，你能给你省下很多麻烦。