Posted by rSean in Every seasoned web designer has a way of organizing their CSS. Some adopt styles from other designers, some create their own, others use a combination of what they’ve seen others do and their own.
I tend to get quite intimate with the sites I create, and writing and organizing CSS is a crucial part of the experience. Below are a few principles I usually try to stick to so that my CSS is cleaner, leaner, and stays organized.
We’ll Start With the Obvious: Use CSS Shorthand!
If you’re just learning CSS, it’s helpful to lookup the shorthand for new properties and values you’re using at the same time you’re learning the traditional “longhand”. In this way, you’ll be using the best practices sooner than later, saving yourself time and effort and getting yourself into good CSS writing habits.
Experienced CSS users should already be using shorthand and if they’re not, they should know better! Taking the few moments to learn and memorize CSS shorthand can save you a significant amount of time.
Throughout the remainder of this article, we’re going to assume that you know (or are actively learning) CSS shorthand.
CamelCase
Overall, I prefer to use CamelCase vs. hyphens or underscores between words.
[helpful shorthand links]
Grouping CSS Properties
When we talk about CSS Properties, we’re talking about the things like height, width, color, background, etc. Generally, when you look at a typical CSS file, reguardless of it’s organization, you see selectors and their properties are in no particular order and are listed one after another. In some cases, you may find all selectors listed on the same line (eek!).
.mySelector {
background: #fff;
margin: 5px 10px;
font-family: Arial, sans-serif;
text-align: left;
border: 1px solid #000;
position: relative;
padding: 2px 5px 25px 10px;
}
Now let’s look at how this style looks after grouping some of those related properties…
.mySelector {
margin: 5px 10px; padding: 2px 5px 25px 10px;
font-family: Arial, sans-serif; text-align: left;
border: 1px solid #000;
position: relative;
background: #fff;
}
A little nicer… but let’s separate structure properties and style properties and then clean up that trailing curly brace while we’re at it. No need for it to be on a line of its own.
.mySelector {
margin: 5px 10px; padding: 2px 5px 25px 10px;
position: relative;
font-family: Arial, sans-serif; text-align: left;
border: 1px solid #000;
background: #fff; }
Better! So we’ve grouped together the CSS lines that are related (margin and padding, font and text alignment, etc) and brought our closing curly brace up so that it’s on the last line. You’ll find that just by grouping similar properties together you can easily save 100+ lines in your style sheet. There are many more properties that this grouping can apply to, just do what makes sense for you.
In addition, you’ll probably start wring your properties in a certain order. I’ll usually start with structural elements like margin and padding and then leave styling near the end (assuming that both structure and styles are in the same stylesheet).
So this is a start… Part 2 will talk about grouping selectors, editors, spreading styles across multiple files and other miscellaneous stuff to wrap up.