One Simple Rule to Organize Your CSS the Right Way

Technically there is not a “right” way to organize your CSS (cascading style sheets). Browsers do not care what order anything is in or if you have used an incorrect number of spaces.

So why should I organize my CSS?

CSS declarations should be organized for one basic reason, it makes your files easier to read. When a file is easier to read, it is easier for future developers to work with, easier for you to debug, and easier to optimize.

My One Rule About Organizing CSS: Declarations Should be Ordered Alphabetically

That’s it. Declarations should be entered in alphabetical order. I have tried several different methods for organizing my CSS and this is the one that I have found to be most effective and easiest to read.

Refresher: What is a CSS Declaration?

A CSS declaration is a single line of CSS that falls between the curly braces. Typically like this one:

background: #fff;

Each declaration is a part of a declaration block that looks like this:

.neato {
    background: #333;
    color: #fff;
    padding: 1rem;
}

Example: Doing it the Right Way

Below is an example CSS declaration block that shows why alphabetical order is the way to go.

Wrong

.neato {
     padding: 10px 30px;
     text-transform: uppercase;
     border: 2px solid #1f4b5d;
     color: #d8dbe2;
     display: inline-block;
     border-radius: 5px;
     font-family: 'Open Sans', sans-serif;
     margin: 20px 0;
     text-decoration: none;
     color: #333;
     background: #1f4b5d;
 }

Right

.neato {
     background: #1f4b5d;
     border: 2px solid #1f4b5d;
     border-radius: 5px;
     color: #d8dbe2;
     display: inline-block;
     font-family: 'Open Sans', sans-serif;
     margin: 20px 0;
     padding: 10px 30px;
     text-decoration: none;
     text-transform: uppercase;
 }

See how much easier it is to read the second option. It is easy to find the declarations in the second view at a glance, whereas the first example requires some hunting.

Did you notice that color is declared twice in the wrong example? When declarations are organized alphabetically, it is easy to catch duplicate declarations. This leads to cleaner, leaner code.

There are tons of strategies for organizing your CSS. Technically, none of them are wrong and none of them are right. This is the one rule that I swear by after years of writing CSS.