CSS Tips and Tricks

1. Size text without using pixels

There are some designers who get font sizes to work using em as a unit rather than px, it’s easy. There is a trick that was written about a while ago that resets the font sizes for the entire site so that 1.0em is the same as 10px.

body { font-size: 62.5% }

Simply throw the font-size: 62.5% bit into your body styling and you’re done. Now you can use ems to size your fonts rather than pixels.

So your paragraph styles might look something like this:

p { font-size: 1.2em; line-height: 1.5em; }

Wondering why it matters how you size fonts? Bulletproof design. Any major site that needs to be able to withstand a user enlarging text (old people use the web too!), and setting absolute sizes is not good practice.

2. Make your code easy to read

Many designers I know seperate their heading tags nicely. It looks something like this:

h1 {}
h1#logo { font-size: 2em; color: #000; }
h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }

Quickly scanning the CSS for the different heading tags is a breeze if you use this technique. It is also helpful if you’re sharing code or working on a large site where you are using the same heading tags (say, h2) in multiple places since you’ll be able to style each one independently and not worry about child classes inheriting attributes from the parent class.

3. Separate code into blocks

This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change.

This is how I usually break down my site:

/* Structure */

This is where I’d put the primary site structure divs and classes.

/* Typography */

This is where I would list things like paragraphs, headings, and other miscellaneous font styles such as small and strong tags.

/* Links */

This one is simple – all the styling for anchor tags.

/* Lists, images, etc. */

This is where I would style images, lists, and any other elements that didn’t fit into the rest of the section. If I have an unordered list for the navigation I might setup a new section for navigation and setup all the styles for the navigation, including the list and link styles, in this section – it makes editing the navigation much easier.

4. Stop using so many divs!

This has been echoed by a lot of coders and standards nuts, and while I don’t think there is anything wrong with using a lot of block level elements, I laugh a little when I see someone style their article headlines using a div rather than a heading tag. Some people even style their bylines using a div! Try using the small tag or the a span for goodness sake.

5. Style everything at once

I noticed that I was typing “margin: 0; padding: 0;” in just about every element. I remembered seeing someone use “*” to style everything on a page at once. I decided it didn’t make much sense to define margin and padding over and over when I always gave them the same parameters.

It’s easy to do:

* { margin: 0; padding: 0; }

Now you only have to define margin and padding on elements where you actually want some. There are many more for making a highly functional and versatile design. Well this is just the basics. Know some more basic and common tricks then let me know..