CSS Best practices & tips José Teixidó - http://www.sargebig.com
The Approach <ul><ul><li>Markup comes first   </li></ul></ul><ul><ul><ul><li>Content blocks (use #IDs) </li></ul></ul></ul...
The Markup <ul><li>Write beautiful & semantic code: </li></ul><ul><li>  </li></ul><ul><ul><li>Consistent & meaningful nami...
Semantics <ul><li>For accessibility, easy of maintenance, SEO and  good karma </li></ul><ul><li>  </li></ul><ul><ul><li>Us...
Markup comments <ul><li>Navigating the code </li></ul><ul><li>  </li></ul><ul><li>     <div id=&quot; content &quot;> </li...
The CSS reset <ul><li>For consistency & easier debugging  </li></ul><ul><li>  </li></ul><ul><ul><li>Blanks browser default...
Fonts <ul><li>For consistency & easier debugging  </li></ul><ul><li>  </li></ul><ul><ul><li>Size'em with  em  instead of  ...
Images <ul><li>Freshly minced flavor for your site </li></ul><ul><li>  </li></ul><ul><ul><li>Try to avoid transparencies, ...
Targeting IE <ul><li>Conditional style sheets </li></ul><ul><li>  </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=...
Targeting IE <ul><li>Conditional tagging </li></ul><ul><li>  </li></ul><ul><li><!--[if !IE]>--><body><!--<![endif]-->  <!-...
Links <ul><li>  </li></ul><ul><ul><li>Use common sense and a lot of contrast </li></ul></ul><ul><ul><li>Use the  L o V e  ...
CSS for debugging <ul><li>Using style as markup anti-pesto  </li></ul><ul><li>  </li></ul><ul><ul><li>Advanced CSS selecto...
CSS for debugging <ul><li>Finding images with missing attrs  </li></ul><ul><li>  </li></ul><ul><li>     img[alt=&quot;&quo...
CSS for debugging <ul><li>Finding links with missing hrefs  </li></ul><ul><li>     a[href=&quot;#&quot;] {background: oran...
CSS for debugging <ul><li>Using outline instead of border </li></ul><ul><li>     .element-to-debug { outline : 1px solid r...
That's all! Hope you enjoyed it!
Upcoming SlideShare
Loading in …5
×

CSS Best practices

2,184 views
2,141 views

Published on

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,184
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS Best practices

  1. 1. CSS Best practices & tips José Teixidó - http://www.sargebig.com
  2. 2. The Approach <ul><ul><li>Markup comes first </li></ul></ul><ul><ul><ul><li>Content blocks (use #IDs) </li></ul></ul></ul><ul><ul><ul><li>Then the actual content (cascade and/or .classes) </li></ul></ul></ul><ul><ul><li>CSS Styling </li></ul></ul><ul><ul><ul><li>Reset browser defaults </li></ul></ul></ul><ul><ul><ul><li>Layout </li></ul></ul></ul><ul><ul><ul><li>The &quot;Inverted pyramid&quot;: General site wide styles first then exceptions and specifics  </li></ul></ul></ul><ul><ul><li>Develop on FF but check on IE regularly! </li></ul></ul><ul><ul><li>Validate </li></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  3. 3. The Markup <ul><li>Write beautiful & semantic code: </li></ul><ul><li>  </li></ul><ul><ul><li>Consistent & meaningful naming. Hint: redText is NOT meaningful. </li></ul></ul><ul><ul><li>Pick a semantically correct tag for each job </li></ul></ul><ul><ul><li>Indent lines </li></ul></ul><ul><ul><li>Comment, but watch your mouth! (it goes to the browser!) </li></ul></ul><ul><ul><li>Avoid inline style & scripts </li></ul></ul><ul><ul><li>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;> </li></ul></ul><ul><li>  </li></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  4. 4. Semantics <ul><li>For accessibility, easy of maintenance, SEO and good karma </li></ul><ul><li>  </li></ul><ul><ul><li>Use header tags <h1> to <h6> where appropiate </li></ul></ul><ul><ul><li>If it is a list of something, it should be a <ul> or a <ol> </li></ul></ul><ul><ul><li>Use <em> instead of <i> , and <strong> instead of <b> </li></ul></ul><ul><ul><li>Tables are dead, long live the <table> ... but not for layout, not even to format forms! . Use <fieldset> and <label> </li></ul></ul><ul><ul><li>If it is only for aesthetics it probably doesn't belong to the DOM </li></ul></ul><ul><li>  </li></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  5. 5. Markup comments <ul><li>Navigating the code </li></ul><ul><li>  </li></ul><ul><li>     <div id=&quot; content &quot;> </li></ul><ul><li>         <div id=&quot; story &quot;> </li></ul><ul><li>             3000 lines of code...         </div> <!-- end of # story --> </li></ul><ul><li>        10 other nested divs...     </div> <!-- end of # content --> </li></ul><ul><li>     in 3 different PHP/ASP/JSP files... </li></ul><ul><li>  </li></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  6. 6. The CSS reset <ul><li>For consistency & easier debugging </li></ul><ul><li>  </li></ul><ul><ul><li>Blanks browser default formatting (because they all see the world in their unique &quot;wonderful&quot; way) </li></ul></ul><ul><ul><li>Pick your flavour:  </li></ul></ul><ul><ul><ul><li>Universal * reset  </li></ul></ul></ul><ul><ul><ul><li>Meyer reset </li></ul></ul></ul><ul><ul><ul><li>YUI reset </li></ul></ul></ul><ul><ul><ul><li>Or create your own! </li></ul></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  7. 7. Fonts <ul><li>For consistency & easier debugging </li></ul><ul><li>  </li></ul><ul><ul><li>Size'em with em instead of px whenever possible </li></ul></ul><ul><ul><li>Use Richard Rutter's 62.5% trick for predictable sizing </li></ul></ul><ul><ul><li>Don't replace text with an <img> element, instead:  </li></ul></ul><ul><ul><ul><li>Use the Mike Rundle`s method for an unobtrusive background image replacement, or </li></ul></ul></ul><ul><ul><ul><li>Use Shaun Inman's sIFR technique </li></ul></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  8. 8. Images <ul><li>Freshly minced flavor for your site </li></ul><ul><li>  </li></ul><ul><ul><li>Try to avoid transparencies, if not possible try to cheat it with GIF, if not possible... </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>Combine small graphics in CSS sprites   </li></ul></ul><ul><ul><ul><li>Preload sprites for performance </li></ul></ul></ul><ul><ul><ul><li>Better in tall and thin aspect ratio </li></ul></ul></ul><ul><ul><li>Don't resize images through CSS </li></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  9. 9. Targeting IE <ul><li>Conditional style sheets </li></ul><ul><li>  </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;main.css&quot; type=&quot;text/css&quot; /> </li></ul><ul><li>  <!--[if IE 6]><link rel=&quot;stylesheet&quot; href=&quot;main-ie6.css&quot; type=&quot;text/css&quot; /><![endif]-->   </li></ul><ul><ul><li>Pro: Great way to avoid CSS Hacks </li></ul></ul><ul><ul><li>Con: Two (or more) css files to maintain, usually just because of model box related tweaks </li></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  10. 10. Targeting IE <ul><li>Conditional tagging </li></ul><ul><li>  </li></ul><ul><li><!--[if !IE]>--><body><!--<![endif]--> <!--[if IE 6]><body class=&quot;ie6&quot;><![endif]-->   </li></ul><ul><ul><li>Pro: Great way to avoid CSS Hacks & multiple sheets </li></ul></ul><ul><ul><li>Con: Heavier to parse for non-IE browsers, so don't go crazy with it. Will contaminate your beautiful code! </li></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  11. 11. Links <ul><li>  </li></ul><ul><ul><li>Use common sense and a lot of contrast </li></ul></ul><ul><ul><li>Use the L o V e H A te order when syling links: </li></ul></ul><ul><ul><ul><li>a: link { ... } </li></ul></ul></ul><ul><ul><ul><li>a: visited { ... } </li></ul></ul></ul><ul><ul><ul><li>a: hover { ... } </li></ul></ul></ul><ul><ul><ul><li>a: active { ... }  </li></ul></ul></ul><ul><ul><li>Try to enlarge clickable areas for smaller text links </li></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  12. 12. CSS for debugging <ul><li>Using style as markup anti-pesto </li></ul><ul><li>  </li></ul><ul><ul><li>Advanced CSS selectors can be used to isolate offending tags in the markup </li></ul></ul><ul><ul><li>Just create a debug.css file and define some styles addressing links with empty hrefs, no alt on images, inline style, etc </li></ul></ul><ul><ul><li>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!) </li></ul></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  13. 13. CSS for debugging <ul><li>Finding images with missing attrs </li></ul><ul><li>  </li></ul><ul><li>     img[alt=&quot;&quot;] {border: 3px solid orange;}      </li></ul><ul><li>     img[title=&quot;&quot;] {outline: 3px solid orange;}     </li></ul><ul><li>     img:not([alt]) {border: 5px solid orange;}     </li></ul><ul><li>     img:not([title]) {outline: 5px solid orange;} </li></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  14. 14. CSS for debugging <ul><li>Finding links with missing hrefs </li></ul><ul><li>     a[href=&quot;#&quot;] {background: orange;}      </li></ul><ul><li>     a[href=&quot;&quot;] {background: orange;} </li></ul><ul><li>Finding header hierarchy </li></ul><ul><li>    h1 {background: red;} </li></ul><ul><li>     h2 {background: orange;} </li></ul><ul><li>     h3 {background: yellow;}  </li></ul><ul><li>  </li></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  15. 15. CSS for debugging <ul><li>Using outline instead of border </li></ul><ul><li>    .element-to-debug { outline : 1px solid red;} </li></ul><ul><li>      </li></ul><ul><li>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 </li></ul><ul><li>  </li></ul>José Teixidó - http://www.sargebig.com CSS Best Practices & tips
  16. 16. That's all! Hope you enjoyed it!

×