Are there standards when it comes to organizing your stylesheets?

It’s all in the title. I should mention that I’m particularly interested in designing themes for Wordpress.

regards,

-jj. :slight_smile:

Perhaps be more specific. What do you mean by organizing? Some people have different practices, like separating style info from layout, but personally, I tend towards just a single style sheet.

Here are the two types of organization I’ve seen so far:

/* layout */

/* fonts */

/* links */

and


/* header */

/* aside */ 

/* content */

Many stylesheets are actually a mix of these two approaches.

I don’t like working with stylesheets where they are organised as in your first method because it means that when you want to change an element you have to search through and find all its bits and pieces that have been spread over the whole stylesheet.

It usually results in that you have missed something you didn’t know existed and takes many times longer than locating the one main rule block. I guess though that if you were dealing with simple theme colour changes on a regular basis then separating colours etc may work. It’s just that it never suited my approach.

I usually start the stylesheet with the global rules (e.g. a small reset and then any global rules and link colours etc). After that I work from a top down approach.

Start with body then the main outer and then header, main, footer in logical order. In that way I know that if a change is to be made to the footer then the code is at the end of the stylesheet.

The main problem is what to do when code is changed at a later date and where to make the changes and how to remain consistent.

Whatever method you use it should be consistent and at least logical and suit the way that you work.

I tend to follow the approach described by Paul by i like to add comments to separate the bits of code. A bit like bookmarks within the css code:

/* sec:reset /
/
sec:global /
/
sec:mainWrapper /
/
sec:header /
/
sec:navigation */

etc…

I use the “sec:” thing to make sure that these “section” (sec:) markers are different from other comments and therefore easy to search for.

Yes good tip :slight_smile:

I stopped searching for things in style sheets when I discovered tools like Firebug. I just inspect the element and then identify the line number(s) of the styles I need to change.

may this link help you-

Cascading style sheets (CSS) by example - Google Books