Every artist has a way of doing things and has developed best practices to make his task a lot easier and cleaner to do. These two things in addition to his intuitive creativity are the primary secrets that separate the genius from the mediocre. The same is very true in web designing or programming. Though there are standardized ways of doing things, there are still a handful of creative minds that simply break the barriers and conventions to create what is the most sublime art form of all. They simply rock.
Wade Shearer has these CSS best practices to share and you better listen because I tell you these ones will hold water.
• 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.
You see now what I mean, right? I tell you this guy’s ideas are great. Perhaps, you also have your way of killing a cow so to speak. Why not share them here through your comments?



english
español
Deutsch
français
Italiano
Português
русский










Leave a reply