CSS组织/结构

Question

我一直在努力寻找组织CSS代码的最佳方法,特别是在大型网站上.我对编写风格以及人们如何构建和管理代码的兴趣不大.

我一直在关注这种结构,我觉得它的可维护性很好,但我想对此有所了解并听取其他方法:

/*=======================================
 1. =reset
=======================================*/
/**
 Anything but * reset
**/

/*=======================================
 2. =base
=======================================*/
/**
 Base rules so naked HTML has basic style and displays consistently x-browser
**/

/*=======================================
 3. =base forms
=======================================*/
/**
 Base form framework
**/

/*=======================================
 4. =base site
=======================================*/
/**
 Rules common across the majority of pages
 e.g. header, footer, main columns, navigation, search bar etc.
**/

/*=======================================
 5. =recurring styles
=======================================*/
/**
 Re-useable snippets -- not to include positioning / structure etc.
 e.g. buttons, icons etc.
**/

/*=======================================
 6. =recurring modules
=======================================*/
/**
 Re-usable modules common to multiple pages/views but not majority
 e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc.
**/

/*=======================================
 7. =homepage
=======================================*/
/**
 contains rules only applicable to homepage
**/

/*=======================================
 8. =about page
=======================================*/
/**
 contains rules only applicable to about page
**/

/*=======================================
 9. =contact page
=======================================*/
/**
 contains rules only applicable to contact page
**/

...and so on

任何想法将不胜感激.

丰富

Answer 1

您指定的分区看起来不错 - 我建议将每个部分保留在自己的文件中reset.css base.css forms.css - 您可以在使用http://developer.yahoo.com/yui/部署时轻松组合这些文件压缩机/ . 有助于在开发时保持 CSS 较小。