How to Structure and Organize a CSS Stylesheet

On with
Female looking at laptop screen
Whether you're building a one page website or a large scale business portal, clean, lean and easily extensible CSS code is one of the important ingredients required for a good custom web design. Here, we're going to talk about the structure of final production code generated after pre-processing or merging multiple files. Regardless of the CSS specific coding convention you're using, unstructured (spaghetti) code can be a nightmare.

Use OOP principles while writing professional CSS code.

Our CSS code can be divided into several logical sections arranged in a specific order from top to bottom. The structure presented here indicates best approach scenario having a scope of changes and tweaks. So, here's a generic CSS structured template one can use for his projects for better and organized code.

Recommended Stylesheet Template

Remember, order of these sections is very important though you can shift some of the sections (e.g. dirty hacks) to a different place provided it does not introduce any conflict with the preceding sections.
  • CSS reset - Clean the slate before you start drawing.
  • Global generic styles - Apply default look & feel for base elements.
  • Handful dirty hacks (if any) - Handle with care! Avoid, if possible.
  • Core layout & sections - Build the skeleton.
  • Generic objects - Testimonial, Product, Widget...Makes sense?
  • Object variants - Testimonial (blurb), Testimonial (expanded)
  • Media queries - Tame multi-device design behavior.
  • Print media queries (if any) - Let design rock on paper as well.
So, this is my preferred structure for CSS code at the macro level. Feel share to share your preferences and approach while structuring CSS code.
Image Credits: Thomas Leuthard, licensed under Creative Commons