Is this how you would structure your CSS stylesheet?

Question

Leaving aside the question of whether you should serve single or multiple stylesheets, assuming you're sending just one, what do you think of this as a basic structure?

/* Structure */

Any template layout stuff should be put into here, so header, footer, body etc.

/* Structure End */

/* Common Components*/

Repeated elements, such as signup forms, lists, etc.

/* Common Components End*/

/* Specific Page 1 */

Some pages might have specific styles, that would go here.

/* Specific Page 1 End */

/* Specific Page 2 */

As above

/* Specific Page 2 End */

/* Specific Page etc */

And so on.

/* Specific Page etc End */

Answer 1

You may be interested in the responses to this question: What's the best way to organize CSS rules?

Answer 2

The structure you presented is exactly what I use. However, it seems to me that it still got too complex with new rules showing up and overriding each other... Perhaps I should try to stick to the solution suggested in the topic linked to by Adam instead.

Answer 3

That's similar to how I structure mine, however, I find that using sub-headings is the best way to do it, so I use this structure:

/********************* * GLOBAL * *********************/

/* All of the common stuff goes here under the appropriate sub headings */

/* Heading formatting */

/* Text formatting */

/* Form formatting */

/* Table formatting */

/* etc */

/********************* * LAYOUT * *********************/

/* All the layout things go here under sub-headings */

/* Header */

/* Left Sidebar */

/* Right Sidebar */

/* Footer */

/********************* * NAVIGATION * *********************/

/* I put navigation separate to the layout as there can be a number of navigation points under their sub-headings */

/* Main (horizontal) Navigation */

/* Left Navigation */

/* Right Navigation */

/* Breadcrumb Navigation */

/********************* * FORMS * *********************/

/* Any form formatting that varies from the common formatting, if there are multiple differently formatted forms, then use sub-headings */

/********************* * TABLES * *********************/

/* Same deal as forms */

/********************* * LISTS * *********************/

/* Same deal as forms and tables */

/********************* * CONTENT * *********************/

/* Any specific formatting for particular pages, grouped by sub-headings for the page the same way as forms, tables and lists */

/********************* * CSS SUPPORT * *********************/

/* This is for any special formatting that can be applied to any element on any page and have it override the regular formatting for that item. For example, this might have things like: */

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/* etc */

Hope that helps.

I generally don't recommend writing on a single line like that though, or like suggested in the link Adam posted, they get very difficult to skim over if they get long. For the examples above, it was just quicker to type them that way so I didn't have to indent every line.

For formatting I would recommend this structure:

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

And so on, I put the structure of the class or ID at the top, then any other formatting, like the font etc below that. Makes it very quick and clear to skim over.

Answer 4

It seems like every time I create a new css file, I find a new way to organize it. And they are ALL better than the previous.

Answer 5

Whatever makes sense to you is good enough. Frankly, when someone else comes looking for something in your stylesheet - or when you come looking for something, for that matter - they're not going to try to figure out what your organizing structure was. They're just going to search for whatever class or element they need to see. So as long as you generally keep stuff that's related together, and section things off with comments like @Matt suggests, you're fine.

The fact of the matter is that even with a very well-thought-out organizational structure - just like with a well-thought-out filing system - it's not always obvious what goes where; so you're better off just being somewhat sensible, not devoting a lot of time to keeping things organized, and relying on search tools to find what you need.

Answer 6

I organize my CSS in a similar way as yours but I do start with a reset section. The main idea is to go from general to specific. So here it goes:

• reset
  
• structure
  
• html_tags
  
• navigation
  
• specific sections
  
• Error messages - that's my last section