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

我的基本格式是在顶部添加 block 评论，并使用标题评论(与您的类似)深入到主要区域。

/*
 * Title of the site
 * Author
 * Date created
 * Last updated
 * 
 * 1-2 line description of what the style sheet is for. 
 *
 */


/* Reset (probably imported)
-------------------------------------------------------------------------------- */
...


/* A Framework (probably imported)
-------------------------------------------------------------------------------- */
I like YUI Grids


/* Global
-------------------------------------------------------------------------------- */
Styles for basic elements like: body, h1-h6, p, ul, li, ..., and often a wrapper.


/* Header
-------------------------------------------------------------------------------- */
Any styles specifically for the header block (this is usually short)


/* Body
-------------------------------------------------------------------------------- */
Basic layout for the main body block


/* Footer
-------------------------------------------------------------------------------- */
Similar to header


/* Utility Classes
-------------------------------------------------------------------------------- */
Things like 
.align-center { text-align: center; };
.hide { display: none !important; }
...


/* Specific Pages
-------------------------------------------------------------------------------- */
Those are my usual subsections (separated by 2 line breaks).  Beyond that, short 
rules that only apply to a certain page or subset of pages will get a section like 
this.

更多提示:

缩进特定小节的后代。*

div#left-col { ... }

    * html #left-col { ... }

    #left-col p { ... }

    #left-col ul { ... }

        * html #left-col ul { ... }

        #left-col li { ... }

*但是keep rules efficient包含在选择器中的后代数量。通常，我会写:

div#left-col li span { font-weight: bold; }

代替:

div#left-col ul li a span { font-weight: bold; }

请记住，这会准确地改变规则选择的内容，但只要它适用于您的页面并且可维护，就没问题。

按字母顺序排列属性。

body {
    color: #ccc;
    font-family: Helvetica, Arial, sans-serif;
    padding: 2em;
    -webkit-something: some value;
}

将短规则折叠为 1 行(如果它不影响可维护性)。

div#left { float: left; margin-top: 30px; width: 300px; }