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:
- Do the same thing for image links, but for accessibility include link text overwritten by a style:
- 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:
- Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page
- Keep a library of helpful CSS classes:
- 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
<!-- HTML -->
<input type="image" src="1px.gif" class="next_button" />
// CSS
input.next_button
{
background-image: url(next_button.gif);
}
<!-- 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;
}
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;
}
.float_left
{
float:left;
}
.float_right
{
float:right;
}
.clear
{
clear:both;
}
.col2_left
{
float:left;
width:45%;
}
.col2_right
{
float:right;
width:45%;
}
…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…
Pingback: 70 Expert Ideas For Better CSS Coding | Smashing Magazine
Your first two points state:
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.
Pingback: Did you Know? » Blog Archive » 70 Expert Ideas For Better CSS Coding
Pingback: Web-Design Blog » Blog Archive » 70 Expert Ideas For Better CSS Coding
As for CSS resetting, the two I know are Yahoo Reset and Eric Meyer’s.
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.
Pingback: the designer’s pages » Blog Archive » Expert Ideas For Better CSS Coding
Pingback: Open Source Web Design » Blog Archive » 70 Expert Ideas For Better CSS Coding
Pingback: dot… » 70 Expert Ideas For Better CSS Coding
Pingback: Top 10 Ideas to Organize Your CSS- Examples included
Pingback: beginner’s resource… » Tips & Tricks
Pingback: css, php, dhtml и java статьи и скрипты » 70 способов улучшить CSS код
Pingback: 70位专家谈CSS设计 | 一个全新的 WordPress Blog | PureCSS
Pingback: PlayCSS » 70位专家谈CSS设计
Pingback: Css7.cn » 70 Expert Ideas For Better CSS Coding
Pingback: The 9 CSS Ethics Every Designer Should Have
Pingback: 70位专家谈CSS设计 | 晨风·社
Pingback: David Garzón » Como diseñar una CSS
Pingback: 雨中人 » Blog Archive » 70位专家谈CSS设计
Pingback: CSS Concept » Blog Archive » CSS Coding in Experts opinions..
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
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..
Pingback: Recursos y Tutoriales » Blog Archive » 70 ideas para mejorar la codificacion CSS
Pingback: 70 Expert Ideas For Better CSS Coding | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması
Pingback: egyptianwebdesigner.com » Blog Archive » 70 Expert Ideas For Better CSS Coding
Pingback: Technology Story» Blog Archive » More links on CSS
Pingback: 70 Expert Ideas For Better CSS Coding | Cổng thông tin hty.net
Pingback: [Webdesign] Quelques bonnes pratiques CSS | Le grand BETA !
Pingback: 70 идей экспертов для улучшения CSS кода - Design For Masters
Pingback: Yasar Gokcek - 70 Expert Ideas For Better CSS Coding