At BusinessLogs, we help you communicate better with your customers by designing elegant, friendly application interfaces & blogs. Learn More ›

My 5 CSS Tips

After reading “5 Steps To CSS Heaven” over at pingmag.jp, and disagreeing with some of what was said I thought that writing this would be appropriate. I’ve been writing CSS professionally now for about 2.5 years so here are 5 quick tips that help me out in my day to day work. I wouldn’t call them best practices because everybody has a style that works for them, but these are what work best for me.

1. Organize Your CSS

Jon says you should write a table of contents at the top of the file, but I don’t really care about that, especially since I’m usually the only person to look at my CSS file. A table of contents is useful if how you demarcate your sections changes with each CSS file, but why make your life complicated? I like how his example file has an entire section for “Typography”. That’s like going to a supermarket and seeing one gigantic isle marked “Food”…. all parts of web design have to do with typography so lumping them all together doesn’t help you out much.

I lay out my CSS files the same way, every single time. I 1) lump all container/layout blocks together (divs with an ID of “header”, “footer”, “maincontent”, etc.) at the top, 2) then my headings H1 through H6, 3) then paragraph and link styles, and 4) then all my lists (navigation, etc.). I’m normally looking through my CSS with something like, “hey where’s that footer style?”, “damn that subtitle on the right has too much padding-bottom”, or “I have to change the hover state on that current navigation tab”, so organizing my CSS file according to what type of element it’s referring to jives with how I think about CSS.

Here’s the CSS file I always start with, feel free to nab it and use it for yourself.

Now couple the page organizational idea I just mentioned with the CSS indentation technique I’ve written about before, and you have a pretty clean CSS file. Check out Business Logs’ springtime.css for an example of the combination of these two techniques. Now if your brain doesn’t work like mine, I fully recommend organizing your CSS file in a way that matches how you work. Don’t just copy what I’ve said here if it doesn’t make sense to you, find out a pattern that makes sense to you and go with it.

2. Avoid Default Styles

As someone who works on fairly complex layouts all the time, I’ve learned that the easiest way to confuse myself and stare at my CSS file for awhile is to have default styles running rampant. By “default style”, I mean defining a default tag with no specificity, like this:

a {
    color: red;
    text-decoration: none;
    border-bottom: 1px dotted red; }

or:

h2 {
    font: bold 18px/1.4em "Lucida Grande", "Verdana", sans-serif;
    color: #000;
    border-bottom: 1px dotted #ccc;
    padding: 0 0 3px 0;
    margin: 0; }

The problem with defining all links or all H2s at the same time is that I use different link and H2 styles all over my layout, depending on where the tag shows up. A link inside of an H4 in the main column is going to look different than a link inside of a right column paragraph, but if I define all links to be red and have a bottom-border like I did above, then they’ll both start out with those styles. I’ll have to overwrite the color and the border-bottom if I wish to make them look different, and if I forget, then the default link style will cascade down and show up, probably making my link pretty ugly.

What I do in my CSS is this:

h2 { }

    #maincontent h2 {
        padding: 0;
        margin: 0;
        ... }

To remind myself that a generic H2 is around, I leave the empty h2 { } in my stylesheet, right above all the specific H2 styles. This doesn’t really do anything from a CSS standpoint, but stylistically I now can scan down my CSS file and see if a wacky style somewhere is due to a default style I forgot to remove, or if it’s something else. Plus, scanning down a nice column of empty heading tags really breaks up the style sheet for me, making it easier on the eyes.

Judi brings up a good point down in the comments, and that instead of totally neglecting the default style, you find the lowest common dominator across all your particular H2 headings, or what have you, and make that the default. If all of your H2s have 0 margin, then make it so. Thanks Judi!

3. Use Your Utility Tags

Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. You might have a subheading on your blog with a different color for your permalink vs. your comment link, or a heading with a quick subheading right below it in a smaller font. For these little styles, I don’t like to drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else. Instead, I use some tags that I like to call Utility Tags. They would be:

<small>, <em>, and <strong>

I use these three tags all the time to accomplish little areas of design that are overkill for an extra div or class. Here’s an example of some XHTML that uses a utility tag:

<h2>Title Of Entry Here <small>Quick subheading here</small><h2>

Inside of an H3 heading I dropped a small tag to accomplish a subtle design change. I want the H3 main text on one line, and then the small text on the next line in a different font. Here’s my CSS:

#parentelement h2 {
    font: bold 18px "Trebuchet MS", "Tahoma", sans-serif;
    color: #f00;
    padding: 0 0 3px 0;
    border-bottom: 1px dotted #aaa; }

    #parentelement h2 small {
        display: block;
        font: normal 12px "Lucida Grande", "Verdana", sans-serif;
        color: #333; }

I used a utility tag inside of a heading, no class needed, and then targeted it directly via CSS descendant selectors. This keeps your XHTML uncluttered and lets you do quickie styles with no real effort. What’s the display: block; doing in there? Well normally <small> is an inline-level element, so instead of dropping <br /> right before it to make it jump to the next line, I just swap its display for block and have it do it by itself.

4. Use The Right Tool For The Job

I’m not a validation nazi, but I do appreciate the usage of semantic tags instead of generic ones. There are 6 heading tags (<h1> through <h6>) so before you start dropping in <div class=”sectiontitle”>, use what you’ve already got in your arsenal, namely, heading tags, because they’re there for a purpose. I rarely use DIVs for anything other than a box to surround sections on my site, so if your XHTML suffers from divitis then try replacing some of your tags with pre-existing HTML instead.

5. Name According To Where It Is, Not What It Looks Like

Over at PingMag, the article tells you drop classes like “red” and “strong” on your DIVs for quick styling, but I think that’s an awful piece of advice. Better names would be “error”, “important-message”, or whatever else you can come up with, because at least those names let you know WHAT it is instead of force-feeding you what it looks like. What’s better, telling you that the thing over there is a firetruck and you knowing that it’s red, or me telling you there’s a big red truck over there and you asking me if it’s a firetruck. One conveys more semantic meaning than the other, so pick the better of the two if given the choice. A commenter named ASD summed this up nicely:

“class=”strong red align_right” – you are serious?

This is awful naming. Names should relate to content, not presentation. That’s the whole point of CSS – seperating presentation from content.”

Couldn’t say it better myself.

About Mike Rundle

Comments

  1. Tina Clarke says:

    http://businesslogs.com/design_and_usability/lean_xhtml_and_precise_css.php

    Your refer to this post but the page defaults to your homepage.. can you tell me the new link for it?

    Thanks

    Tina

  2. Robby Colvin says:

    The CSS files you reference in the article also redirect to your home page.

  3. Great Article, it is good to see that many others have the same coding patterns. I find that I get a little crazy having to work with others CSS and XHTML that I end up changing it all to the way I do things.

    Nice Tips – Thanks

  4. Emma says:

    I’ve just found this article. I’d love to see your starting CSS file – however when I click it I get redirected to the home page… If you fix it could you let me know.

    Thanks

  5. vdot says:

    Show us your starting CSS file!!!

  6. Hattie Ann says:

    Looks like you’re having my luck. Can’t get to your CSS file, only your home page. I’ll keep checking back to see if you got it fixed. Good luck with it.

    Hattie Ann

  7. Joel Sonnet says:

    Some people are saying they disagree with these tips but I’ve been useing them exactly word for word over the last few weeks and I have found them extremely helpful. Thanks alot man.

    sincerely,
    Joel Sonnet

  8. I just came across your blog and I’m pleased by your tips, they were very helpful! Hopefully updates are in order. Hope to hear back from you! Sincerely, Natalie Coleman

  9. Kendall Sue says:

    This is the third time I have tried to get into your CSS file. Is there a problem we all are not aware of or is this just an idiot test to see how many times we’ll click on something before we figure out it will go to the same place every time??? I guess I’m one of those idiots because I’m sure you’ll get it fixed soon and will keep checking. Can’t wait to see what’s on the other side next time I click.

    Kendall Sue

  10. MR says:

    Hey everybody, sorry about the busted link to the CSS file, it must have been removed from the server when the new owners purchased this site last year.

  11. Nolawi says:

    Here’s the CSS file I always start with, feel –

    ^ link doesn’t work

  12. Very nice solid tips!
    nice item so many useful informations
    really good work thx so mutch

  13. lebisol says:

    All great points…but I do have a question about point 5.

    “Name According To Where It Is”

    So lets use the example of “important-message”…..what if I like the positioning & looks/declarations and want to re-use the class?
    Now, for the sake of naming I have to create a whole new class because perhaps I am re-using the class for the looks not for WHAT it is…all of a sudden “important-message” appears in content where really there is no important content….I just needed to re-use the positioning and color.
    What then?
    Create a “slightly-less-important-message-but-positioned-the-same”?
    Being a devil’s advocate here… :)
    Thanks for the post!

  14. Justin says:

    Great tips, but I can’t disagree more with avoiding default styles- that’s what the whole “cascading” part of CSS is all about.

  15. David says:

    As others have commented, the link to the “Here’s the file I always start with” does not go to the sample css page.

    It is available at archive.org:

    http://web.archive.org/web/*/http://businesslogs.com/____design.css

  16. neo says:

    Well, we have differences in styling/layouting css.

    As long as some people can understand that.

    I like your utility tags. ()

    I don’t use that tag, what i used is

    , ,

    I would like to try to use i need another tag for creating tableless tabular data.. :D

    Thanks.

  17. This is indeed a great article. CSS always plays a vital role in web design and it always gives you opportunity to make your website Google friendly. I have compiled few factors ‘why Google loves CSS’ that you can check at http://www.bestpsdtohtml.com/get-to-know-why-css-is-good-for-google/

  18. Eswar says:

    Good tips, I think utility tag can improve seo. thanks for share
    Here are code writing tips http://www.templatespoint.com/blog/2010/10/code-writing-tips/

  19. Hosting Best says:

    I think the most important is the descriptive names you use for the styles, I find myself returning to a project and being completely puzzled by what I was trying to do then

Speak Your Mind

*