Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/mislz28/public_html/wp-content/themes/css-faq-v2/timeweather/timeweather.php on line 19
  • Uncategorized
31 March 2008

CSS Best Practices

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?

This entry was posted on 31 March 2008 at 12:48 PM and is filed under Uncategorized. 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.

Leave a reply

Name (*)
Mail (will not be published) (*)
URI
Comment