August 14, 2006...11:25 am

CSS Best Practices

Jump to Comments

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

If you want to be notified the next time I write something, sign up for email alerts or subscribe to the RSS feed. Thanks for reading.

26 Comments

Filed under Main, MySQL, PHP, Tech

26 Comments

  • Connor Boayck
    August 14, 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…

  • 70 Expert Ideas For Better CSS Coding | Smashing Magazine
    May 10, 2007 at 6:24 am
    [...] Keep a library of helpful CSS classes. Since you can use multiple class names (i.e. <p class=”floatLeft alignLeft width75″>…</p>), make use of them for your markup.” [Richard K. Miller] [...]
  • Phil
    May 10, 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.

  • Did you Know? » Blog Archive » 70 Expert Ideas For Better CSS Coding
    May 10, 2007 at 3:03 pm
    [...] Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class=”floatLeft alignLeft width75″>…</p>), make use of them debugging your markup. (updated) [Richard K. Miller] [...]
  • Web-Design Blog » Blog Archive » 70 Expert Ideas For Better CSS Coding
    May 10, 2007 at 3:07 pm
    [...] Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p>…</p>), make use of them debugging your markup. (updated) [Richard K. Miller] [...]
  • Richard K Miller
    May 10, 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.

  • Wade Preston Shearer
    May 10, 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.
  • hemant
    May 11, 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.
  • Richard K Miller
    May 11, 2007 at 8:03 am
    hemant, see Phil’s comment above about conditional statement for IE. Also see my comment about about CSS resetting.
  • the designer’s pages » Blog Archive » Expert Ideas For Better CSS Coding
    June 12, 2007 at 8:30 am
    [...] Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class=”floatLeft alignLeft width75″>…</p>), make use of them debugging your markup. (updated) [Richard K. Miller] [...]
  • Open Source Web Design » Blog Archive » 70 Expert Ideas For Better CSS Coding
    July 3, 2007 at 7:22 am
    [...] Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class=”floatLeft alignLeft width75″>…</p>), make use of them debugging your markup. (updated) [Richard K. Miller] [...]
  • dot… » 70 Expert Ideas For Better CSS Coding
    July 13, 2007 at 12:52 am
    [...] Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class=”floatLeft alignLeft width75″>…</p>), make use of them debugging your markup. (updated) [Richard K. Miller] [...]
  • Top 10 Ideas to Organize Your CSS- Examples included
    August 27, 2007 at 3:20 pm
    [...] Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names, make use of them debugging your markup.[Richard K. Miller] [...]
  • beginner’s resource… » Tips & Tricks
    August 29, 2007 at 5:03 pm
    [...] CSS Best Practices by Richard K Miller [...]
  • css, php, dhtml и java статьи и скрипты » 70 способов улучшить CSS код
    September 23, 2007 at 7:43 am
    [...] Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (&lt;p class=&quot;floatLeft alignLeft width75&quot;&gt;…&lt;/p&gt;) [Richard K. Miller] [...]
  • 70位专家谈CSS设计 | 一个全新的 WordPress Blog | PureCSS
    September 24, 2007 at 6:56 pm
    [...] 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中.  因为你可以同时使用多个类名称用来调试你的一个标记(i.e. <p class=”floatLeft alignLeft width75″>…</p>用了三个类名称来标记<p/>). [Richard K. Miller] [...]
  • PlayCSS » 70位专家谈CSS设计
    October 12, 2007 at 1:34 am
    [...] 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中.  因为你可以同时使用多个类名称用来调试你的一个标记(i.e. <p class=”floatLeft alignLeft width75″>…</p>用了三个类名称来标记<p/>). [Richard K. Miller] [...]
  • Css7.cn » 70 Expert Ideas For Better CSS Coding
    October 26, 2007 at 5:00 am
    [...] Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class=”floatLeft alignLeft width75″>…</p>), make use of them debugging your markup. (updated) [Richard K. Miller] [...]
  • The 9 CSS Ethics Every Designer Should Have
    November 10, 2007 at 5:52 pm
    [...] Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names, make use of them debugging your markup.[Richard K. Miller] [...]
  • 70位专家谈CSS设计 | 晨风·社
    December 4, 2007 at 10:44 pm
    [...] 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中.  因为你可以同时使用多个类名称用来调试你的一个标记(i.e. <p class=”floatLeft alignLeft width75″>…</p>用了三个类名称来标记<p/>). [Richard K. Miller] [...]
  • David Garzón » Como diseñar una CSS
    January 2, 2008 at 8:34 am
    [...] Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names, make use of them debugging your markup.[Richard K. Miller] [...]
  • 雨中人 » Blog Archive » 70位专家谈CSS设计
    January 16, 2008 at 10:06 pm
    [...] 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中.  因为你可以同时使用多个类名称用来调试你的一个标记(i.e. <p class=”floatLeft alignLeft width75″>…</p>用了三个类名称来标记<p/>). [Richard K. Miller] [...]
  • CSS Concept » Blog Archive » CSS Coding in Experts opinions..
    March 21, 2008 at 12:35 am
    [...]  It is important to have close a CSS classes library. It can be sometimes very helpful for debugging, but can be avoid in release version. Multiple class names can be use ( <p class = “floatLeft alignLeft width75″>…</p>), and try use this to debug your markup. [Richard K. Miller] [...]
  • suraj
    March 22, 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
  • suraj
    March 22, 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..

  • Recursos y Tutoriales » Blog Archive » 70 ideas para mejorar la codificacion CSS
    May 6, 2008 at 6:47 am
    [...] Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e. <p class=”floatLeft alignLeft width75″>…</p>), make use of them debugging your markup. (updated) [Richard K. Miller] [...]

Leave a Reply