分类为 "CSS" 的存档

提高CSS文件可维护性的方法(未完,待续)

建立CSS文件索引
为了能够迅速的了解整个CSS文件的结构,在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引:结构上的id 和 class 都可以成为该树的一个分支。如下:
/*——————————————————————
[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
——————————————————————-*/
或者也可以这样:
/*——————————————————————
[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
——————————————————————-*/
另一种方式可以只是先简单的将内容列举出来,也不需要缩进。下面的一个例子中,如果你需要跳至RSS部分你只需要简单的搜索 8.RSS。
/*——————————————————————
[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
——————————————————————-*/
<!– some CSS-code –>
/*——————————————————————
[8. RSS / #rss]
*/
#rss { … }
#rss img { … }
定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候,你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

建立CSS文件索引

为了能够迅速的了解整个CSS文件的结构,在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引:结构上的id 和 class 都可以成为该树的一个分支。如下:

/*——————————————————————

[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

——————————————————————-*/ 阅读更多…

2009年12月21日