How to organize css

How to Organize your CSS Files for Large Projects

March 09, 2018|CSS

If you've managed a small website it's easy to keep your stylesheets organized. You might even just have one stylesheet styles.css where all your styles exist.

On a small web project you can get away with this. But, on larger web projects, particularly web applications, the CSS can get unwieldy pretty quickly.

Before you know it you have one humongous stylesheet with all your styles for all your pages in it. Or you've begun to have multiple different stylesheets that all compile into one but you can never remember which style is in which stylesheet.

However you've done it, you realize that when you want to change the link color from blue to green it takes you a long time just to make that one small update. On top of the time it takes you, you’re worried that you’ve missed a style somewhere that will change your link color in some situations, like maybe a list or when the link is in a title.

After working on multiple large web applications I’ve learned the hard way that if your stylesheets aren’t organized and if each style doesn’t have a clear place to live it is stressful and unpleasant to work with. Not only do you have take a lot of extra time finding the impacted styles, but you can never be fully confident you found them all.

Wouldn’t it be nice to know exactly where your styles for any situation belong? And when you need to make a change it’s easy, stress-free, and you can feel confident that no matter how many changes you make you truly changed that style in every situation. On top of all this, wouldn't it be nice to know that when you need to add new styles you know exactly where they should be placed?

I have found a system that works this way for me. Changing styles is no longer time consuming or worrisome. I know exactly where styles belong and feel confident and stress-free whenever making any changes to styles - large or small. As the web application grows I know exactly where those new styles belong.

Do you want to know the key?

It's so simple: organization.

Specifically, organizing your stylesheets.

Organization.

It’s just like your mom taught you when cleaning your room everything should have a home. That ball on your floor needs a home. And it’s home is not the floor. It’s home might be in a basket with other balls or maybe it’s in a container in your backyard. But you get the idea, it belongs somewhere, not left haphazardly around the house.

Your styles are the same. They each have a home.

I organize my stylesheets into three categories:

  1. Global Styles
  2. Modules
  3. Pages

Let me walk you through each category.

Global Styles

These are general styles that will be used across your whole web project.

Here are the global stylesheet for memorates.com, one of my web projects: Global Stylesheet Example

On almost every page the global styles are used - fonts, colors, etc. If it’s a style that you will use on almost all pages then you know you’ve found a global style.

Modules

Modules are design groups or components. These are typically small in scope and you will likely use them in multiple places throughout your application. These could be your navigation, forms, buttons, accordions, tabs, etc. Here’s the modules for one of my projects: Organization idea for modular stylesheets

You can see that I have a stylesheet for forms, for flash notifications, for the breadcrumb navigation, the top navigation bar.

I would rather have one small stylesheet dedicated to one thing than have longer stylesheets that contain a lot of different things that I can’t find later on.

Take for instance, my flash notifications stylesheet. It is only 7 lines long:

Small Modular Stylesheets are good

It doesn’t matter how long the stylesheet is. The goal is to easily find all those styles for any particular part of your application later on - even years later. So, don't hesitate to break apart each component into its own stylesheet even if it's not very long.

Trust me. You will thank yourself later for doing this.

Pages

This last category is for page specific styling or groups of pages that all relate to the same thing: like your account or your marketing pages.

Let’s say you’re adding payment to a large web project you’re working on. The payment might pull in some components that you’ve designed. It’ll also pull in some global styles. But you might find that you need to style a few areas of your payment pages in a specific way. These styles you probably won’t use in any other area of your application.

If that’s the case you should create a payments stylesheet inside the pages folder.

Let’s say down the road you realize that you want to repeat one of the styles you used on the payment page. Easy. Take those styles from your payments stylesheet and create a new stylesheet in your components (because it’s now not page specific but rather will become a repeatable component that you can use in your application).

Here’s an example of my pages folder:

Example of Page Stylesheets

Summary

Finding and changing styles in any size web project should be effortless, fast, and leave you confident you changed the style in every situation. The way I do it is to organize them into three basic folders: global styles, components, and pages. Try organizing your style sheets and save yourself time, worry, and effort on a daily basis!

Learn to Effortlessly Create Anything in CSS

Get access to my free courses, best articles, and tips once a week.

I won't send you spam, promise. If it ever feels that way you can unsubscribe at any time.

Sign Up For Free

×

Sign In

×