找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2491|回复: 2

[教程] 翻译:Improving Code Readability With CSS Styleguides

[复制链接]
发表于 2008-6-17 21:19:39 | 显示全部楼层 |阅读模式
感觉这篇文章还是很不错的,不过我有的英语水平有限,其中有不少翻译得生涩难懂的地方,恳请大家指正。

Once your latest project is finished, you are very likely to forget the structure of the project’s layout, with all its numerous classes, color schemes and type setting. To understand your code years after you’ve written it you need to make use of sensible code structuring. The latter can dramatically reduce complexity, improve code management and consequently simplify maintainability. However, how can you achieve sensible structuring? Well, there are a number of options. For instance, you can make use of comments — after all, there is always some area for useful hints, notes and, well, comments you can use afterwards, after the project has been deployed.
当一个项目接近尾声的时候,你很可能已经忘记了这个项目的结构,还有它那数目众多的class,颜色方案,其它设置。为了多年后还能读懂你的代码,就需要使用更合理的代码结构,它能极大地减低复杂度,改善代码管理,更易维护。那么,如何获得更合理的结构呢?这里有数条建议,比如,你可以利用注释,毕竟在项目开始实施后,总有很多地方可以写有用的建议,摘录和注释,它们以后都用得着。

Indeed, developers came up with quite creative ways to use comments and text formatting to improve the maintainability of CSS-code. Such creative ways are usually combined into CSS styleguides — pieces of CSS-code which are supposed to provide developers with useful insights into the structure of the code and background information related to it.
的确,开发人员开始使用非常有创造力的方式使用注释和文本格式,用于改进CSS代码的可维护性。这样创造性的方法通常结合在CSS样式指南中——一些CSS代码片断用于提示开发人员代码结构和开发背景的信息。

This article presents 5 coding techniques which can dramatically improve management and simplify maintainability of your code. You can apply them to CSS, but also to any other stylesheet or programming language you are using. You can browse through the references listed under the article — they containt further information about how you can achieve a well-organized and well-structured code.
这片文章列举了5条编码技术,它们可以戏剧性地改进代码管理和代码的可维护性。你可以把这些方法应用于CSS,同样也可以用在其它任何样式表和编程语言中。你可以随意浏览本文下方所列出的文章,它们包含了更多的信息,告诉你如何完成组织合理和结构良好的代码。

You may also be interested in the articles
你可能也对这些文章感兴趣

• 70 Expert Ideas For Better CSS Coding,
• Code Beautifying, Formatting and Compressing Tools
•CSS Formatters and Optimizers

1. Divide and conquer your code
1. 分割你的代码
First consider the structure of your layout and identify the most important modules in your CSS-code. In most cases it’s useful to choose the order of CSS-selectors according to the order of divisors (div’s) and classes in your layout. Before starting coding, group common elements in separate sections and title each group. For instance, you can select Global Styles (body, paragraphs, lists, etc), Layout, Headings, Text Styles, Navigation, Forms, Comments and Extras.
首先考虑布局的结构和标识出CSS代码中最重要的单元。大多数情况下,根据层块和布局中类别的顺序,决定CSS选择器的顺序是有益的。在编码之前,把相似的元素分组放在同一部分,并且标示每个组。如,你可以选择Global Styles(body,paragraphs,lists等等),Layout, Headings, Text Styles, Navigation, Forms, Comments and Extras。

To clearly separate fragments of code, select appropriate flags or striking comments (the more *-symbols you have in your code, the more striking a heading is). In the stylesheet they will serve as a heading for each group. Before applying a preferred flag to your code, make sure you can immediately recognize single blocks when scanning through the code.
为了清晰的区分代码片断,使用前当的标识或者引人注目的注释(在代码中*用得越多,越能引人注意),在样式表中,它们往往作为每组的标题。在应用更适当的标识之前,确保当你扫过你的代码是,能够迅速认出每个单独的块。

However, this approach might not be enough for large projects where a single module is too big. If it is the case, you might need to divide your code in multiple files to maintain overview of single groups of code fragments. In such situations master stylesheet is used to import groups. Using master-stylesheet you generate some unnecessary server requests, but the approach produces a clean and elegant code which is easy to reuse, easy to understand and also easy to maintain. And you also need to include only the master-file in your documents.
尽管如此,这种方法对于大项目可能还不够用,它的独立单元太大了。如果碰到这种情况,你可能需要把你的代码分成几个文件来维护一个代码片断组。这种情况下,master stylesheet用于引入(import)其它组。使用master-stylesheet会产生一些不必要的请求,但是这种方式制作出干净和优雅的代码,这种代码方便重复使用,易于理解和维护。你也只需在文档中包含(inclue) master-file。

/*——————————————————————
[Master Stylesheet]

Project: Smashing Magazine
Version: 1.1
Last change: 05/02/08 [fixed Float bug, vf]
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use: Magazine
——————————————————————-*/
@import “reset.css”;
@import “layout.css”;
@import “colors.css”;
@import “typography.css”;
@import “flash.css”;
/* @import “debugging.css”; */

For large projects or large development team it is also useful to have a brief update log and some additional information about the project — e.g. you can put the information about who is this CSS-file assigned to and what is its primary use (e.g. Smashing Magazine, Smashing Jobs etc.).
对于大型项目或者大型开发团队,增加一些简短的更新日志和项目附加信息,比如,你可以加上CSS文件所有权的信息,还有主要用途。

Additionally, you can include a debugging CSS-code to take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer’s Diagnostic Stylingas a debugging stylesheet to test your CSS-code and fix problems.
另外,你可以包含一个调试CSS(debugging CSS-code)来预防可能碰到的问题。可以考虑使用Eric Meyer的 Diagnostic Styling 作为一个调试样式表,测试你的CSS代码并且修正问题。

2. Define a table of contents
2. 定义目录
To keep an overview of the structure of your code, you might want to consider defining a table of contents in the beginning of your CSS-files. One possibility of integrating a table of contents is to display a tree overview of your layout with IDs and classes used in each branch of the tree. You may want to use some keywords such as header-section or content-group to be able to jump to specific code immediately.
为了保存一个代码结构的概览,你可能想在CSS文件的开头部分列上目录。一种可行的添加方法是使用树状结构,用布局中的ID和class组成这个树的分支。你可能想使用一些关键字,比如header-section或者content-group,以便迅速地跳转到这部分代码。

You may also select some important elements you are likely to change frequently — after the project is released. These classes and IDs may also appear in your table of contents, so once you’ll need to find them you’ll find them immediately — without scanning your whole code or remembering what class or ID you once used.
你也可以挑选一些重要的元素,在项目发布后可能会频繁地更改它们。这些class和ID也可能出现在你的目录中,这样当你需要寻找它们的时候,不用浏览所有代码,就能很快的找到你曾用过的class或者ID。

/*——————————————————————
[Layout]

* body
        + Header / #header
        + Content / #content
                - Left column / #leftcolumn
                - Right column / #rightcolumn
                - Sidebar / #sidebar
                        - RSS / #rss
                        - Search / #search
                        - Boxes / .box
                        - Sideblog / #sideblog
        + Footer / #footer

Navigation   #navbar
Advertisements   .ads
Content header   h2

——————————————————————-*/
…or like this:
/*——————————————————————
[Table of contents]

1. Body
        2. Header / #header
                2.1. Navigation / #navbar
        3. Content / #content
                3.1. Left column / #leftcolumn
                3.2. Right column / #rightcolumn
                3.3. Sidebar / #sidebar
                        3.3.1. RSS / #rss
                        3.3.2. Search / #search
                        3.3.3. Boxes / .box
                        3.3.4. Sideblog / #sideblog
                        3.3.5. Advertisements / .ads
        4. Footer / #footer——————————————————————-*/

Another approach is to use simple enumeration without indentation. In the exampe below, once you need to jump to the RSS-section you simply use a search tool to find 8. RSS in your code. That’s easy, quick and effective.
另一种方法是用无缩进格式的列举。下面的例子,当你需要跳转到RSS-section,只需要简单的用下搜索工具就可以找到8. RSS in your code。非常容易,迅速和有效。

/*——————————————————————
[Table of contents]

1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
——————————————————————-*/

/*——————————————————————
[8. RSS / #rss]
*/
#rss { … }
#rss img { … }

Defining a table of contents you make it particularly easier for other people to read and understand your code. For large projects you may also print it out and have it in front of you when reading the code. When working in team, this advantage shouldn’t be underestimated. It can save a lot of time — for you and your colleagues.
定义一个目录,可以让别人很容易地读懂你的代码。对于大型项目,你也把它打印出来,看代码的时候放在面前。团队工作中,这样的好处也不会被低估。它能为你和你的同事节省很多时间。

3. Define your colors and typography
3. 定义你的颜色和排版
Since we don’t have CSS constants yet, we need to figure out some way to get a quick reference of “variables” we are using. In web development colors and typography can often be considered as “constants” — fixed values that are used throughout the code multiple times.
我们的CSS不是一成不变的,所以我们要想办法得到一个包含“可变”元素的快速索引。在web开发中,颜色和排版通常被认为是“常量”——一个固定的值会被多次使用。
As Rachel Andrew states, “one way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define constants. A common use for this is to create a color glossary. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.”
如Rachel Andrew所说,“在CSS中,避免缺少常量的方法是在CSS文件的头部注释处定义一些常量。一种普通的用法时建一个颜色表。这意味着你有一个在该网站用到的颜色的快速索引,从而避免错误的使用,如果你想更改颜色也可以很快地找到并更换”。

/*——————————————————————
# [Color codes]

# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */

Alternatively, you can also describe color codes used in your layout. For a given color, you can display sections of your site which are using this color. Or vice versa — for a given design element you can describe the colors which are used there.
作为选择,你也可以描述你在布局中使用的颜色。一种颜色, 你可以注明在哪一块使用了这个颜色。反之亦然,一个设计元素,你也可以说明哪种颜色用在了这里。

/*——————————————————————
[Color codes]

Background: #ffffff (white)
Content: #1e1e1e (light black)
Header h1: #9caa3b (green)
Header h2: #ee4117 (red)
Footer: #b5cede (dark black)

a (standard): #0040b6 (dark blue)
a (visited): #5999de (light blue)
a (active): #cc0000 (pink)
——————————————————————-*/

The same holds for typography. You can also add some important notes to understand the “system” behind your definitions.
这同样适用于排版。你同样可以再定义之后添加一些重要的笔记帮助理解这个“系统”。

/*——————————————————————
[Typography]

Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers: 2.7em/1.3em Helvetica, Arial, “Lucida Sans Unicode”, Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes: decreasing heading by 0.4em with every subsequent heading level
——————————————————————-*/

4. Order CSS properties
4. 排列CSS的属性
When writing the code often it’s useful to apply some special formatting to order CSS properties — to make the code more readable, more structured and therefore more intuitive. There is a variety of grouping schemes developers use in their projects. Some developers tend to put colors and fonts first; other developers prefer to put “more important” assignments such as those related to positioning and floats first. Similarly, elements are also often sorted according to the topology of the site and the structure of the layout. This approach can be applied to CSS selectors as well:
当写代码的时候,应用一些特殊的格式来排列CSS属性是很有好处的,这样可以让代码更容易阅读,更加结构化,并且更一目了然。在项目中,开发者有多种分组方式。一些开发者倾向于把颜色和字体放在最前;另一些更喜欢把“更重要的”工作,比如与定位,浮动相关的放到最前。类似地,元素也通常按照站点的布局和页面的结构分类。这种方法同样适用于CSS选择器:

    body,
        h1, h2, h3,
        p, ul, li,
        form {
                border: 0;
                margin: 0;
                padding: 0;
        }
Some developers use a more interesting approach — they group properties in an alphabetical order. Here it’s important to mention that alphabetizing CSS properties may lead to some problems in some browsers. You may need to make sure that no changes are produced as a result of your ordering manipulations.
一些开发人员使用更有趣的方法——他们用字母顺序归类属性。这里有一点很重要,用字母排序的CSS属性在一些浏览器中会出问题。你需要确认你的排列方法不会带来变化。

    body {
        background: #fdfdfd;
        color: #333;
        font-size: 1em;
        line-height: 1.4;
        margin: 0;
        padding: 0;
}

Whatever grouping format you are using, make sure you clearly define the format and the objective you want to achieve. Your colleagues will thank you for your efforts. And you’ll thank them for sticking to your format.
无论你采用哪种分组格式,都要确保清晰地定义这种格式和你想达到的目标。你的同事会感谢你的努力。你也会感谢他们遵守你的格式。

5. Indentation is your friend!
5. 缩进是你的朋友!
For better overview of your code you might consider using one-liners for brief fragments of code. This style might produce messy results if you define more than 3 attributes for a given selector. However, used moderately, you can highlight dependencies between all elements of the same class. This technique will dramatically increase code readability when you have to find some specific element in your stylesheet.
为了更好的浏览你的代码,你可能会把简短的代码写在一行。如果你为一个选择器定义了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; }

You remember exactly what you did and can jump back in there and fix it. But what if you made a lot of changes that day, or you just simply can’t remember? Chris Coyier suggests an interesting solution for highlighting recent changes in your CSS-code. Simply indenting new or changed lines in your CSS you can make recent changes in your code more visible. You can as well use some comments keywords (e.g. @new) — you’ll be able to jump to the occurrences of the keyword and undo changes once you’ve found some problems.
你一般清楚地记得你做了什么,并跳回此处修复它。但是某天你做了大量的修改,或者你忘记了?Chris Coyier 建议一种有趣的解决方法,突出显示你的CSS-code中最近的修改。简单地缩进新的或修改过的代码行,这样最近的修改就会更清晰。你也可以用一些注释关键字(例:@new)——当你发现问题的时候就可以跳转到这个关键字的地方撤销改动。

#sidebar ul li a {
         display: block;
         background-color: #ccc;
                 border-bottom: 1px solid #999; /* @new */
         margin: 3px 0 3px 0;
                 padding: 3px; /* @new */
}

Conclusion
结论

CSS styleguides are helpful if and only if they are used properly. Keep in mind that you should remove every styleguide which doesn’t effectively help you to get a better understanding of the code or achieve a well-structured code. Avoid too many styleguides for too many elements bundled in too many groups. Your goal is to achieve a readable and maintainable code. Stick to it and you’ll save yourself a lot of trouble.
CSS样式指南如果被正确的使用是非常有帮助的。记住,你需要清除那些没有用处的样式指南,这样才能更好的理解你的代码,并且使代码保持良好的结构。避免为太多的元素使用过多的样式指南。你的目标是完成清晰可读易于维护的代码。遵守这个规则,可以避免很多麻烦。

Sources and Resources
资料来源和资源

CSS: Best Practices
Indent CSS Changes You Are Unsure About
Write well-structured CSS-file
Optimize your CSS files to improve code
12 articles and tools for CSS Structuring and Optimizing
70 Expert Ideas For Better CSS Coding
CSS Formatting Screencast

(从我的博客上贴过来,怎么链接都没有啦!明天上班去加上)

[[i] 本帖最后由 lilimaty 于 2008-6-17 21:54 编辑 ]
发表于 2008-6-18 12:34:51 | 显示全部楼层
沙发
翻译辛苦了,好东西都是英文的,看来我要加强学习了
回复 支持 反对

使用道具 举报

发表于 2008-6-18 13:36:27 | 显示全部楼层
谢谢翻译...谢谢分享。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-10-17 05:12 , Processed in 0.058991 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表