«
»

CSS Best Practices

Last month at the UPHPU meeting, Wade Shearer presented on CSS best practices. He’s one of the few programmers in the group that’s a designer first, and a programmer second, so he has unique insight into web design. Here are my notes:

  • Keep HTML free of presentational attributes
  • Write clean, semantic HTML
  • Use HTML tables semantically–for tabular data, not layout (generally)
  • Create print-friendly version of all your pages using media=print
  • For input buttons, use a 1px invisible GIF and then restyle the image with CSS:


    • <!-- HTML -->
    <input type="image" src="1px.gif" class="next_button" />

    // CSS
    input.next_button
    {
    background-image: url(next_button.gif);
    }

  • Do the same thing for image links, but for accessibility include link text overwritten by a style:


    • <!-- HTML -->
    <a href="next_page.html" class="next_button" />Next Page</a>

    // CSS
    a.next_button
    {
    display: block;
    background-image: url(next_button.gif);
    text-indent: -99999px;
    }

  • Use comments in CSS to separate typography, headers, layout, forms
  • Sometimes body styles don’t cascade into tables like they should so you need to repeat body styles on all tables
  • begin with a few default styles:


    • table, tr, td
    {
    margin:0;
    padding:0;
    border:0;
    border-collapse:collapse;
    vertical-align:top;
    }

    form
    {
    padding:0;
    margin:0;
    }

    img
    {
    border:none;
    padding:0;
    margin:0;
    }

  • Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page
  • Keep a library of helpful CSS classes:


    • .float_left
    {
    float:left;
    }

    .float_right
    {
    float:right;
    }

    .clear
    {
    clear:both;
    }

    .col2_left
    {
    float:left;
    width:45%;
    }

    .col2_right
    {
    float:right;
    width:45%;
    }

  • Use PHP to do browser sniffing and to include CSS files relevant to the section.
  • For more best practices, take a peak at the stylesheets for Wade’s place of employment, Doba.com

This entry was posted on Monday, August 14th, 2006 at 11:25 am and is filed under Main, MySQL, PHP, Tech. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

33 Responses to “CSS Best Practices”

  1. Connor Boayck Says:
    August 14th, 2006 at 11:51 am
    Yay for CSS!

    …now, if only IE would play nice.

    I always design with CSS, and my work time essentially doubles due to having to hack the CSS to make it look pretty in IE 6 and IE 7. A web designer’s world would be much better if M$ would figure out how to make a good browser…

  2. Phil Says:
    May 10th, 2007 at 2:42 pm
    I came over from the above trackback and I have to say, I disagree with your library of CSS classes idea.

    Your first two points state:

    Keep HTML free of presentational attributesWrite clean, semantic HTML

    however, adding a class name float_right for elements that you want to float right means you are building the presentation into the markup and making your class names unsemantic.

    If you wanted to change the design you would have to change the meaning of your classes, which would make it confusing to maintain, or you would have to change the markup losing the idea of separating presentation from content.Hi there,

    I would also advise browser sniffing using conditional comments as Internet Explorer is the only one you really need to serve different stuff to and they are a safe method.

    Apart from that, good tips, I really have to find myself a decent reset style sheet.

  3. Richard K Miller Says:
    May 10th, 2007 at 3:58 pm
    Phil, good comment. I must admit these ideas on CSS are not mine, though when Wade Shearer presented them, the convenience of creating a CSS library resonated with me. However, as you mentioned, it does appear to break semantic HTML from a purist’s point of view. Good comment too about using conditional comments for IE.

    As for CSS resetting, the two I know are Yahoo Reset and Eric Meyer’s.

  4. Wade Preston Shearer Says:
    May 10th, 2007 at 4:20 pm
    Good point, Phil. I use something such as a “float_left” and “align_hor_right” class on elements that are either temporary or trivial, as a more appropriate alternative to inline styles.
  5. hemant Says:
    May 11th, 2007 at 6:43 am
    i followed your tips.but the main problem is that it has different looks in ie and mozilla .
    how to solve this cross browser compatibility.
    is there any way to write 2 css for differnt browser.
    what i mean is 1 css for mozilla and another css for ie.it will be time consuming but will solve my problem.
    or just give me another idea so that it has same looks on all the browsers.
  6. Richard K Miller Says:
    May 11th, 2007 at 8:03 am
    hemant, see Phil’s comment above about conditional statement for IE. Also see my comment about about CSS resetting.
  7. suraj Says:
    March 22nd, 2008 at 12:13 pm
    well I do use three css properties for one
    eg. my text but i am not sure how, whether this is a good practice or not..though i raised a different issue here.. please let me know
  8. suraj Says:
    March 22nd, 2008 at 12:35 pm
    however, adding a class name float_right for elements that you want to float right means you are building the presentation into the markup and making your class names unsemantic.

    If you wanted to change the design you would have to change the meaning of your classes, which would make it confusing to maintain, or you would have to change the markup losing the idea of separating presentation from content.

    i have not understood this..
    please elaborate more on this..

Leave a Reply