I’ve been making websites commercially for about five years now. In 2004, a year or two out of college — it was definitely a learning process for me. I originally graduated with a degree centered on print design, so programming in general was very new to me. During that time, table-based layout structure was still prevalent, so that’s how I started out.

I eventually added CSS to slowly wick away the pain of tables by using simple global CSS selectors (i.e. body, link, img and etc.). At that time, I would say that’s what most people did. It was still very difficult for pure CSS based layouts because the browser situation was still awkward.* Internet Explorer was at it’s prime and Firefox was not as popular and easy an alternative as it is now.

[*This is from my experience, as I remember specifically working on a client project in 2003-2004 how hard it was to follow tutorials as every one had so many browser caveats. I'm sure my inexperience contributed to the difficult as well.]

Needless to say, my HTML/CSS was a mess even after I started using CSS the way it is supposed to around 2006-2007. This is the time frame I’d say Firefox really started getting traction and soon after IE7 came out in 2007 making everybody’s life so much easier. The main problem was that even though I used CSS, the actual implementation was kind of jagged. As a designer/developer — it’s important to be clean, simple and elegant (as Jamie from Myth Busters likes to phrase technically challenging concepts implemented efficiently) as it helps to debug, transfer, share, update, teach and perform best practice techniques.

Even now, I can do better but here are 3 techniques I practice religiously that have really benefited me after adapting them into my routine.

STEP 1: RESET – Let’s Code on a Level Programming Field

Since Eric Meyer made resetting browsers popular with his influence/community in 07′— it started to build in popularity quite rapidly. As soon as I started using it, I immediately thought to myself how great it was as many problems started fading away very quickly. Sure, we all used mini resets like setting margins and padding to “0″ in the html or body selectors but completely eviscerating all browser defaults is a wonder you have to experience yourself.

If you take nothing away from this article — make sure you start using CSS resets. It’s been one of the biggest difference makers in reducing day-to-day CSS headaches (especially between browsers). Eric Meyer is generally accepted as a CSS authority and his style sheet is generally accepted as the best:

From: http://meyerweb.com/eric/tools/css/reset/index.html

[Link updated: 7.8.09]


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


The way I use this is by linking to it as a separate external style sheet as the first cascade.

STEP 2: FRAMEWORK – No Need to Re-Invent The Wheel

I initially did not flock to CSS Frameworks but have personally experienced the benefits from using them these last few years. CSS is pretty simple once you gain experience using it, so going through the trouble of using a “bloated” framework seems like BS to some developers. This is especially true for those Jedi web developers who have made dozens and dozens of websites through the years and have developed their own way of doing things.

There are plenty to choose from, the two I am most familiar with is Blueprint and a pseudo framework called 960 Grid System (GS) that predominantly focuses on standardizing grid layouts. Once I started using 960 GS, I never stopped. The main reason behind that is because it takes away arbitrary decisions that change from website to website.

For example — what size should the sidebar be from website to website? In the past, it could range from 251px to 327px. Yes, circumstances may require you to make the sidebar exactly 243px wide but if you design it with the grid in mind in the first place — you can avoid these awkward numbers. That can become difficult to manage as you work on several new websites during the course of a day and even more if you do work updating old ones. 960 GS logically gives you several options to design from and as you implement the framework — it’s consistent and makes sense no matter what website you work on.

The way that all the frameworks work is that they supply you with basically a template — but a bare template that’s flexible and versatile enough that web professionals will not reject it for lack of adaptability and can use it for any conceivable future project. Blueprint unlike 960 GS goes much further and offers all the selectors but IMO, it starts to get bloated. However, that’s the beauty of CSS frameworks — you can choose the one that makes sense to you. There probably is a Goldilocks framework out there waiting for you.

Here’s a list of some of the most popular for you to explore:
http://960.gs/
http://www.blueprintcss.org/
http://www.yaml.de/en/

w3avenue and SpeckyBoy have explored more of the frameworks more in-depth:
http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Jeff Croft waxes poetic about this subject over at A List Apart
http://www.alistapart.com/articles/frameworksfordesigners

I actually saw Eric Meyer speak about CSS frameworks at An Event Apart SF 08 and the conclusion he left us with is that each one has good and bad points but most stress standards compliant code and organization… so using them certainly can’t hurt.

STEP 3: ORGANIZING – It Works For Your Socks, Why Not Your Code?

[NOTE: Step 3 is hard. It's a bit nit-picky but hey — we're all trying to get better right?! I know I need to follow my own advice better at times!]

You’ve heard this before and like me — you’re too busy writing the code to fuss with it too much. That’s the reality but there are clear benefits as well. CSS = Cascading Style Sheets. Organization is inherently built into the functionality of the language! We should be striving to be clean and easy, and here’s a few quick tips that any of us can start doing right away without much fuss:

Selector Grouping

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is the same as:

h1, h2, h3 { font-family: sans-serif }

and a real world example of the space you’d be saving is:

h1, h2, h3 { font-family: sans-serif }
h1 {2.5 em}
h2 {2 em; color#000000;}
h3 {2 em; color#333333;}

Reducing some of the redundancy will really help make your CSS be more efficient and save you time as well!

Default Selectors First

Define the values of these at the top of the document and keep them there. I’ve seen some style sheets where they group similar selectors together with the assigned selectors such as putting form selectors with the rest of the structure and styling of the form. It makes some sense but it’s bad practice because it’s hard to locate later on and especially frowned upon if you work with a team.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td

This actually happened to me… a co-worker a few years back told me I should stop sprinkling my selectors everywhere. He had to use the Find tool all the time to figure out what the hell I was doing. Don’t annoy your co-workers like me!

Alphabetizing Selector Values

Yep. It’s as simple as that and yet it’s so hard to do.

h1 {
background-color: #000000;
color: #ffffff;
font-family: sans-serif;
padding: 20px;
}

I read about some developers doing it but I always opted for grouping similar/popular values together. Such as width and height, padding and margin and etc. The reason why I’ve come over to this way of thinking is because I realized when I deliver code to a client’s IT team — it makes sense to them that it’s alphabetical since they don’t work with me and don’t know my quirks. In other words, my arbitrary grouping of selectors means nothing to other people. Alphabetical makes sense since it’s a simple and functional way to organize.

In Conclusion…

The reasons why you should strive for clean CSS is to code faster, be efficient and to not annoy your co-workers and clients.

• 1. RESET!
• 2. Use a Framework!
• 3. Organize within your code!

Thanks Darwin for the photo!

Helpful? Comment!

This entry was posted on Monday, July 6th, 2009 at 10:21 pm and is filed under CSS, Tutorials, Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.