I’ve been writing CSS for about 2 years now and I still feel like
every time I open up a blank file and begin writing CSS for a new
design I learn something new.
For those of you that are new to CSS or experts always looking for a
new trick, here are some of things I do on a regular basis to keep my
code organized (kind of).
1. Size text without using pixels
If you’re wondering how some designers 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 (maybe on ALA) 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 sizes your fonts rather than
pixels.
So your paragraph styles might look something like this:
p { font-size: 1.2em; line-height: 1.5em; }
You might be wondering why it matters how you size fonts? Bulletproof design.
Any major site 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
When I was looking at some of the CSS coded by Rundle I noticed that he separated his heading tags nicely. It looked 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.
I also use similar techniques for paragraph tags, anchor tags, and
any other tag that requires multiple classes to look correct in every
instance.
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 usuall 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.
Know of any other tips or tricks? Let me know :)
