CSS Best practices & tips José Teixidó - http://www.sargebig.com

The Approach Markup comes first Content blocks (use #IDs) Then the actual content (cascade and/or .classes) CSS Styling Reset browser defaults Layout The "Inverted pyramid": General site wide styles first then exceptions and specifics Develop on FF but check on IE regularly! Validate José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Markup comes first

Content blocks (use #IDs)

Then the actual content (cascade and/or .classes)

CSS Styling

Reset browser defaults

Layout

The "Inverted pyramid": General site wide styles first then exceptions and specifics

Develop on FF but check on IE regularly!

Validate

The Markup Write beautiful & semantic code: Consistent & meaningful naming. Hint: redText is NOT meaningful. Pick a semantically correct tag for each job Indent lines Comment, but watch your mouth! (it goes to the browser!) Avoid inline style & scripts As a rule of thumb every element in the in the DOM should have a meaningful, semantic & content supporting existence. Hint: No empty <div> or <br clear=&quot;all&quot;> José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Write beautiful & semantic code:

Consistent & meaningful naming. Hint: redText is NOT meaningful.

Pick a semantically correct tag for each job

Indent lines

Comment, but watch your mouth! (it goes to the browser!)

Avoid inline style & scripts

As a rule of thumb every element in the in the DOM should have a meaningful, semantic & content supporting existence. Hint: No empty <div> or <br clear=&quot;all&quot;>

Semantics For accessibility, easy of maintenance, SEO and good karma Use header tags <h1> to <h6> where appropiate If it is a list of something, it should be a <ul> or a <ol> Use <em> instead of <i> , and <strong> instead of <b> Tables are dead, long live the <table> ... but not for layout, not even to format forms! . Use <fieldset> and <label> If it is only for aesthetics it probably doesn't belong to the DOM José Teixidó - http://www.sargebig.com CSS Best Practices & tips

For accessibility, easy of maintenance, SEO and good karma

Use header tags <h1> to <h6> where appropiate

If it is a list of something, it should be a <ul> or a <ol>

Use <em> instead of <i> , and <strong> instead of <b>

Tables are dead, long live the <table> ... but not for layout, not even to format forms! . Use <fieldset> and <label>

If it is only for aesthetics it probably doesn't belong to the DOM

Markup comments Navigating the code <div id=&quot; content &quot;> <div id=&quot; story &quot;> 3000 lines of code... </div> <!-- end of # story --> 10 other nested divs... </div> <!-- end of # content --> in 3 different PHP/ASP/JSP files... José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Navigating the code

<div id=&quot; content &quot;>

<div id=&quot; story &quot;>

3000 lines of code... </div> <!-- end of # story -->

10 other nested divs... </div> <!-- end of # content -->

in 3 different PHP/ASP/JSP files...

The CSS reset For consistency & easier debugging Blanks browser default formatting (because they all see the world in their unique &quot;wonderful&quot; way) Pick your flavour: Universal * reset Meyer reset YUI reset Or create your own! José Teixidó - http://www.sargebig.com CSS Best Practices & tips

For consistency & easier debugging

Blanks browser default formatting (because they all see the world in their unique &quot;wonderful&quot; way)

Pick your flavour:

Universal * reset

Meyer reset

YUI reset

Or create your own!

Fonts For consistency & easier debugging Size'em with em instead of px whenever possible Use Richard Rutter's 62.5% trick for predictable sizing Don't replace text with an <img> element, instead: Use the Mike Rundle`s method for an unobtrusive background image replacement, or Use Shaun Inman's sIFR technique José Teixidó - http://www.sargebig.com CSS Best Practices & tips

For consistency & easier debugging

Size'em with em instead of px whenever possible

Use Richard Rutter's 62.5% trick for predictable sizing

Don't replace text with an <img> element, instead:

Use the Mike Rundle`s method for an unobtrusive background image replacement, or

Use Shaun Inman's sIFR technique

Images Freshly minced flavor for your site Try to avoid transparencies, if not possible try to cheat it with GIF, if not possible... PNG + AlphaImageLoader but no bg repeats or positioning, some links won't work and if you play it backwards you listen weird voices, it is just evil Combine small graphics in CSS sprites Preload sprites for performance Better in tall and thin aspect ratio Don't resize images through CSS José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Freshly minced flavor for your site

Try to avoid transparencies, if not possible try to cheat it with GIF, if not possible...

PNG + AlphaImageLoader but no bg repeats or positioning, some links won't work and if you play it backwards you listen weird voices, it is just evil

Combine small graphics in CSS sprites

Preload sprites for performance

Better in tall and thin aspect ratio

Don't resize images through CSS

Targeting IE Conditional style sheets <link rel=&quot;stylesheet&quot; href=&quot;main.css&quot; type=&quot;text/css&quot; /> <!--[if IE 6]><link rel=&quot;stylesheet&quot; href=&quot;main-ie6.css&quot; type=&quot;text/css&quot; /><![endif]--> Pro: Great way to avoid CSS Hacks Con: Two (or more) css files to maintain, usually just because of model box related tweaks José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Conditional style sheets

<link rel=&quot;stylesheet&quot; href=&quot;main.css&quot; type=&quot;text/css&quot; />

<!--[if IE 6]><link rel=&quot;stylesheet&quot; href=&quot;main-ie6.css&quot; type=&quot;text/css&quot; /><![endif]-->

Pro: Great way to avoid CSS Hacks

Con: Two (or more) css files to maintain, usually just because of model box related tweaks

Targeting IE Conditional tagging <!--[if !IE]>--><body><!--<![endif]--> <!--[if IE 6]><body class=&quot;ie6&quot;><![endif]--> Pro: Great way to avoid CSS Hacks & multiple sheets Con: Heavier to parse for non-IE browsers, so don't go crazy with it. Will contaminate your beautiful code! José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Conditional tagging

<!--[if !IE]>--><body><!--<![endif]--> <!--[if IE 6]><body class=&quot;ie6&quot;><![endif]-->

Pro: Great way to avoid CSS Hacks & multiple sheets

Con: Heavier to parse for non-IE browsers, so don't go crazy with it. Will contaminate your beautiful code!

Links Use common sense and a lot of contrast Use the L o V e H A te order when syling links: a: link { ... } a: visited { ... } a: hover { ... } a: active { ... } Try to enlarge clickable areas for smaller text links José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Use common sense and a lot of contrast

Use the L o V e H A te order when syling links:

a: link { ... }

a: visited { ... }

a: hover { ... }

a: active { ... }

Try to enlarge clickable areas for smaller text links

CSS for debugging Using style as markup anti-pesto Advanced CSS selectors can be used to isolate offending tags in the markup Just create a debug.css file and define some styles addressing links with empty hrefs, no alt on images, inline style, etc You can import this file when you think you are done with your markup / layout and just take it off before it goes live (once you took care of those bugs!) José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Using style as markup anti-pesto

Advanced CSS selectors can be used to isolate offending tags in the markup

Just create a debug.css file and define some styles addressing links with empty hrefs, no alt on images, inline style, etc

You can import this file when you think you are done with your markup / layout and just take it off before it goes live (once you took care of those bugs!)

CSS for debugging Finding images with missing attrs img[alt=&quot;&quot;] {border: 3px solid orange;} img[title=&quot;&quot;] {outline: 3px solid orange;} img:not([alt]) {border: 5px solid orange;} img:not([title]) {outline: 5px solid orange;} José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Finding images with missing attrs

img[alt=&quot;&quot;] {border: 3px solid orange;}

img[title=&quot;&quot;] {outline: 3px solid orange;}

img:not([alt]) {border: 5px solid orange;}

img:not([title]) {outline: 5px solid orange;}

CSS for debugging Finding links with missing hrefs a[href=&quot;#&quot;] {background: orange;} a[href=&quot;&quot;] {background: orange;} Finding header hierarchy h1 {background: red;} h2 {background: orange;} h3 {background: yellow;} José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Finding links with missing hrefs

a[href=&quot;#&quot;] {background: orange;}

a[href=&quot;&quot;] {background: orange;}

Finding header hierarchy

h1 {background: red;}

h2 {background: orange;}

h3 {background: yellow;}

CSS for debugging Using outline instead of border .element-to-debug { outline : 1px solid red;} Note: outline as opposed to border doesn't add space to the element, thus won't break anything in your layout. However, since it is not fully supported we can only use it for debug José Teixidó - http://www.sargebig.com CSS Best Practices & tips

Using outline instead of border

.element-to-debug { outline : 1px solid red;}

Note: outline as opposed to border doesn't add space to the element, thus won't break anything in your layout. However, since it is not fully supported we can only use it for debug

That's all! Hope you enjoyed it!