Tales of a Designer

Organizing your CSS

One thing that I’ve learned since first starting to write CSS, that’s extremely important, is organizing your stylesheets. Even the smallest sites can have larger stylesheets, and if you don’t have some sort of structure, it can become a headache to maintain over time as it grows.

There is no right way to organize. I’ve seen and tried many different ways and stuck with the one that works best for me. One thing that’s fairly consistent in all of my stylesheets is putting basic styles and site colors at the top, shown in the example below.

/*
======================================================
COLORS
======================================================
Gray Text: #
Blue Links: #
*/

* { margin:0; padding:0; }
.bn { border:0; }
.fl { float:left; }
.fr { float:right; }
.cl { clear:left; }
.clear { clear: both; }

These are obviously some of the basic classes that I will reuse across the whole site, so it’s nice to get some of those out of the way at the beginning before you get into the more specific id’s and classes.

It’s also important to group sections together and divide it by some sort of separator:

/*
======================================================
>>Site structure (layout)
======================================================
*/

Grouping sections together saves tons of time. It allows you to find sections very quickly through search, especially using the “>>” before the section title to easier flag those sections. In terms of grouping sections, do what feels most comfortable. Here are the groupings that I use, mostly, in my stylesheets:

• Colors
• Basic Styles
• Site Structure
• Navigation
• Headers
• Parapgraphs
• Lists
• Links
• Images
• Forms
• Miscellaneous

Is this the best way? Of course not, but every developer works differently, so the key is trying out different methods to see what works best for your style. The suggestions above have proved to work very well for me, and I’m still finding new ways to improve it. Using shorthand CSS is also a good way to keep your CSS lean, but some find that it’s not too helpful.

I’ve created a stripped down version of a basic stylesheet structure based on what I’ve mentioned above, so for those of you looking for a starting point, feel free to download the one I’ve put together.

What other key tips would you say are useful when organizing your CSS?

Focus On What You’re Good At

Last year when I was in the market for a job, I used to stumbled across tons of job sites that seemed to be looking for the jack of all trades type of designer/developer. In my experience, thus far, it is rare to find a person who execute a great UI design in photoshop and handle everything through the major programming. Those types are few and far between, and I might only know two people with that type of skill set.

Companies that write these bloated job descriptions filled with unnecessary buzzwords tell me two things: either the company has no clue what they want, and/or someone person in human resources wrote it.

After getting my first job, I realized that I didn’t need to be that jack of all trades. I decided to focus on a few things (UI design, XHTML, CSS) and do them well. When you try to put everything on your plate, some things will start to fall off, ie, certain skills will suffer. Focus on what you’re good at, and let your team members do the rest.

On all the teams I’ve ever been on, everyone had their niche that they focused on. Some dabbled in other areas, but when you needed help with a certain problem outside of your own niche, you knew where to go. This is what builds great teams.

Of course this doesn’t mean that I am completely in the dark when working with javascript, PHP, ASP, etc., it’s good to have a working knowledge of them and also makes you a better developer. I am actually trying to learn more about other areas to increase my skill set a little, however, I will always know the areas that I’m strong in, and will keep them as my primary focus.

The Basics of Microformats

For the last few months, I have been hearing a lot about microformats. When I first heard about them, it didn’t make much sense to me, but then when I started investing some time into it, it started to make a little more sense. Now, it’s quite an easy concept to understand, and can be extremely useful. Keep reading →