How to Structure and Organize a CSS Stylesheet

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 the 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.

A CSS file can be divided into several logical sections arranged in a specific order from top to bottom. The structure presented here indicates the best approach scenario having a scope of changes and tweaks.

Use OOP principles while writing professional CSS code.

So, here's a generic CSS structured template one can use for his projects for better and organized code.

Recommended Stylesheet Template

Remember, the 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.