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