Erik Akers

I had a client call me a cou­ple of weeks ago in a rush as they were try­ing to get their newly designed web site launched. Although I did design the site they parted ways with their on staff designer about three weeks before the tar­geted launch date. So I agreed to go help them get through the last few days before launch.

They gave me a list of what should be sim­ple things to change via CSS like, font color and size, link behav­iors, etc. After I spent a lit­tle time get­ting a han­dle on the site’s struc­ture and briefly looked at the site’s CSS file I fig­ured it would be sim­ple to tackle their list in a timely matter.

How­ever when I reopened the CSS list I knew I was in for a more then I bar­gained for. (I should state before I get to much fur­ther I just don’t like work­ing with some­one else’s code. I’m pretty picky about how I write things and the order I write my CSS in. That doesn’t mean I won’t touch some­one else’s code, I just don’t like it. I always feel like I’m work­ing in slow-mo because I have find stuff I didn’t write and don’t know where it is.) Any way, I after I opened up the CSS file I saw it was an amazing(not in a good way) 2065 lines of code. In case you don’t know that’s a lot, for exam­ple this site has a slim 188 lines in it’s CSS file and that with a num­ber of empty lines I leave to help break it up into sections.

Back to the 2065 lines file. This really took me back because this wasn’t a site with tons of pages. There were maybe a 100 pages total with I would say 90 of them were based of one tem­plate, mean­ing all the pages were laid out the same and and the same major ele­ments just the con­tent on the page was chang­ing. When I really dig into the file I found what was mak­ing the file so large with so many lines of code, there were CSS redun­dan­cies all over the place.

Note — I not show­ing all code because some of this is from a live site, so you’ll have to take me at my word about the HTML structure.

One Exam­ple was this style was repeated 7 times:

a:hover{ color: #53439; text-decoration: underline;}

Why seven times? I don’t know. Now just that one line was in there seven times. But that style was in there seven times in dif­fer­ent lines like this:

#con­tent div.ajax div.links ul li a:hover{ color: #53439; text-decoration: under­line;}
#wraper div.info div.mid-col ul li div.holder ul li ul li a:hover{ color: #53439; text-decoration: under­line;}
#wraper div.map div.industry-news div.industry-content ul li a:hover{ color: #53439; text-decoration: underline;}

Every one of those lines were totally unneeded because they were all call­ing the same style that could have set glob­ally with just:

a:hover{ color: #53439; text-decoration: underline;}

I know every­one likes to so things dif­fer­ently, but per­son­ally I like to keep it sim­ple so I’ll set a style like this in the top of my CSS file and let it effect all of the links on the site. How­ever there are times where I want some links to act dif­fer­ent then the global style. So I’ll write other style to effect only those links. My big­ger point here is repeat­ing the same styling seven times only makes things harder in the future where some­one decides they no longer like the color of the links. So ask your­self this, would you rather change one line of code or seven?

And all of the styles in the file were in the form of some­thing like this:

#wraper div.map div.industry-news div.industry-content ul li a:hover{ color: #53439; text-decoration: underline;}

Most of it totally unnec­es­sary and was just help­ing bloat the file size, so let break it down and clean this up a bit.

• #wrap­per — This tells the style it’s in the id=wrapper. First you can not have more then one type of ID per page, i.e. there can’t be two wrap­per IDs on the same page. And in the struc­ture of both the pages and site this was not needed.
• div.map — I’ve never got this. Basi­cally it’s say­ing the map class is in a div tag, mean­ing in the CSS .map is the same as div.map. I use styles like h1.title or p.title because I some­times need dif­fer­ent styles for my title class. But here then was only one .map class and that one .map class only was used on one page. It is a way to make sure you are select­ing just that one div, but most of the time I just don’t see the point.
• div.industry-news & div.industry-content — See above. With the added bonus that both of these were empty classes, mean­ing there were no styles and I’m really not sure way.
• ul li a:hover — Here they are tar­get­ing an anchor tag, thats’s inside a li tag, that’s inside a ul tag or a list item that’s a link. This done when we want to change the styling of a link away from a global link style. I do this quite a bit when it comes to menus and sub menus. And :hover means when the pointer is sit­ting on top of the link before it’s clicked.

So if we remove all of the unneeded text in this style what are we left with?

#wraper div.map div.industry-news div.industry-content ul li a:hover{ color: #53439; text-decoration: underline;}

or

.map ul li a:hover{ color: #53439; text-decoration: underline;}

Again just set­ting one global style of a:hover{ color: #53439; text-decoration: under­line;} makes the whole line is unnecessary.

In all the CSS file weighted 44K or 44 Kilo-bytes, which I think is a lot for a CSS file. It caused the site to load much slower then it should because the browser would load all of the CSS styles before it the rest of the page.

Remem­ber when you are cod­ing adding any­thing unnecce­sary is only going to cause prob­lems later. What should be sim­ple changes turn into long ones because of the extra time it takes to change 7 styles instead of just one.