NealGrosskopf.com l Organize Your Stylesheet Madness & Reduce It's File Size With These Tips

The other day at work, I had some spare time so I decided to take a look at one of our stylesheets from one of our older websites. The stylesheet was currently over 700 lines long, which I don't consider that long and stood at about 13kb, which again I don't find particularly large.

Shredding The Extra File Size

After reviewing the CSS file I noticed it lacked organization, and probably the worst of all, it repeated itself...a lot! My top pet peve with stylesheets is when properties are copied from one selector to another. Below is one example of what I'm talking about:


a.ProdNav:link
{
color: #666666; 
font-size: 11px; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
text-decoration: underline;
padding-left: 15px;
padding-right: 15px;
}

a.ProdNav:visited
{ 
color: #666666; 
font-size: 11px; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
text-decoration: underline;
padding-left: 15px;
padding-right: 15px;
}

a.ProdNav:hover
{ 
color: #333333; 
font-size: 11px; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
text-decoration: underline;
padding-left: 15px;
padding-right: 15px;
}

Notice the Golden Rule in programming which is "don't repeat yourself" is broken here? If you look close enough, the only thing that changes from the three link states is the font color. Let's shorten that up a bit to see what it could look like:


a.ProdNav, a.ProdNav:visited
{
color: #666666;
font-weight: 600;
padding: 0px 15px;
text-decoration: underline;
}
a.ProdNav:hover { color: #333333; }

Ah yes, much better. A full 24 lines shorter and much easier to follow. (Note I also removed some font styling as it was better served on the BODY element). Little things like this can make your stylesheet better organized and also much smaller. After removing mistakes like this from the stylesheet, I was able to remove over 200+ lines from it and shred 5KB file in file size.

Overall Stylesheet Organization & Grouping

Another area to pay attention to is how you organize your selectors within your stylesheet. Too often, I review other people's CSS files and have no idea where to find something. The first thing you should always do is group like-selectors with one another. Below is how I usually choose to organize my stylesheets:

Table Of Contents
CSS Variables
CSS Image Preload

Reset
Headings
Anchors
Form Elements
General Classes
Template & Layout
Print
Handheld
Aural
CSS Diagnostics

CSS Table of Contents

I recommend a table of contents for stylesheets over 500 lines long, which in most cases, is always my CSS files. I also recommend that you separate your groups of selectors with CSS comments. Numbering them with the same number you used in your table of contents will make finding the area quicker as well. Below is how I prefer to do this as it makes it stand out more. I also like to place code references in the heading in case I need to quickly refer back.


/****************************************************************
 1. Reset  -  http://meyerweb.com/eric/tools/css/reset/
****************************************************************/

CSS Variables?

You may have noticed my reference to CSS Variables and are wondering what the heck this is. It's currently a proposal for CSS, which may never happen but after the W3C recently adopting CSS Transformations, I think CSS Variables still stands a chance. While you don't need to adhere to the spec, I sometimes like to place common color references at the top of my stylesheet for quick reference:


/****************************************************************
 II. CSS Variables - Spec: http://disruptive-innovations.com/zoo/cssvariables/
****************************************************************/
/*
@variables {
Text: #555555;

DarkGreen: #669933;

DarkLimeGreen: #7e935a;
MediumLimeGreen: #949f74;
LimeGreen: #adb986;
LightLimeGreen: #ccdb9f;

DarkBrown: #a7917b;
LightBrown: #b69f86;
}
*/

Preloading Images In CSS

I also have a section where I preload :hover state images to be consumed further along in my stylesheet. I've written an article on CSS image preloading if you want to read more on this topic. By doing this I avoid the one second flicker that many users experience when hovering over an element with a background image. I like to group these together because I find they can often get lost in the overall stylesheet and eventually somebody else will run across the selector, not understand it's purpose and delete it.


/****************************************************************
 III. CSS Image Preload - http://www.nealgrosskopf.com/tech/thread.asp?pid=24
****************************************************************/
#nav { background: url(/files/images/template/menu_bg-trans.png) no-repeat -9999px -9999px; }
#header { background: url(/files/images/template/helper_sub_bg-trans.png) no-repeat -9999px -9999px; }
#container { background: url(/images/icons/actions/actions_sprite.png) no-repeat -9999px -9999px; }

Other Common Sections in CSS Files

I like to place my CSS reset at the top of the stylesheet so that I can override it further down if need be. I also have a section for heading elements i.e. H1, H2, H3, site-wide anchors, form elements and also general classes such as .b .u .i .left .right for bold, underline, italic, text-align: left & text-align: right etc. I also include in here styling for blockquotes, images and some other common non-structure styling.

After that I like to have a grouping for "Template & Layout". Under this heading I like to place structural styling such as DIV sizes and positions. I will also throw in here some font formatting if it's specific to that particular DIV. I know some people like to break out the font styling into their own section or even stylesheet (god why does it need it's own stylesheet?)

After that, if I'm feeling ambitious, I'll create sections for @print, @handheld and @aural. I have some stock CSS I use for @print so that usually leaves @handheld and @aural to do for later.

And Don't Forget...CSS Diagnostics!

Last but not least, I have my Diagnostic Styling. I've written an article about this already so feel free to check that out, but in a nutshell CSS Diagnostics is CSS that highlights ugly areas of your HTML so that you can quickly fix them. The reason this goes at the end of the stylesheet is that it needs to 'trump' all other selectors that have been set so far.

Organize Your CSS Properties...Please!

Finally the last thing I like to do when cleaning up/developing a stylesheet is alphabetical organizing my CSS properties. Below is a selector with a whole slew of properties which are unorganized:


.pageIDnest
{
Position: relative;
width: 400px;
height: 15px;
margin-left: 10px;
margin-top: 25px;
line-height: 20px;
color: #ef3e41; 
font-size: 12px; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
text-decoration: none;
border-bottom-color:#cccccc;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-left: 10px;
}

Now let's sort it and use some CSS shorthand (which I'll explain shortly).


.pageIDnest
{
border-bottom: 1px solid #cccccc;
color: #ef3e41; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; 
font-weight: 700;
height: 15px;
line-height: 20px;
width: 400px;
margin: 25px 0px 0px 10px;
padding-left: 10px;
position: relative;
text-decoration: none;

Looks better, doesn't it? You'll notice one property that isn't sorted alphabetically. Did you find it? Width, yes I didn't place width at the end. I do have two exceptions with sorting my properties. The first one is width & height. The second is position + top,right,bottom,left. I like to group these two sets of properties together since they all have a relationship to one another and I find myself editing them at the same. You'll also notice that I did not use CSS shorthand for my font properties. I generally avoid using shorthand for the font set of properties as it can be a bit tricky to correctly implement since several of the properties share the same values and also need to be the correct order.

CSS Shorthand

Finally, use shorthand CSS whenever possible. It will save you lines of code to sift through and also KB of file size. A few property groups you can use it on are:

Background
Border
Font-Family
List-Style
Margin
Outline
Padding

Conclusions

Your CSS file doesn't need to be an afterthought after you finished programming your website and adding the markup. It can shine, just like your carefully crafted server-side code does. By organizing, grouping, documenting and shortening your CSS file your co-workers will thank you and you will know that you did a good job at the end of the day.

Have any secrets to your CSS organizational success? Share them below -

Neal Grosskopf Dot Com A NG Designs Site

Interact

Organize Your Stylesheet Madness & Reduce It's File Size With These Tips

Mar 31

Shredding The Extra File Size

Overall Stylesheet Organization & Grouping

CSS Table of Contents

CSS Variables?

Preloading Images In CSS

Other Common Sections in CSS Files

And Don't Forget...CSS Diagnostics!

Organize Your CSS Properties...Please!

CSS Shorthand

Conclusions

Replies:

Wed. April 1 2009, 1:37:40 AM

Tue. April 7 2009, 6:01:46 AM

Tue. April 7 2009, 6:10:21 PM

Fri. April 17 2009, 1:13:17 PM

Reply:

Tue. April 23, 5:42:43 PM