CSS Best practices
Download as PPT, PDF2 likes1,542 views
The document provides tips and best practices for CSS including: 1) Separating markup from CSS styling and following an order of content blocks then CSS. 2) Writing semantic HTML and avoiding inline styles. 3) Using CSS resets to standardize browser defaults and font sizing with em units. 4) Targeting Internet Explorer with conditional stylesheets or tags to avoid hacks. 5) Using CSS for debugging invalid markup like missing image attributes.
![Targeting IE Conditional style sheets 油 <link rel="stylesheet" href="main.css" type="text/css" /> 油 <!--[if IE 6]><link rel="stylesheet" href="main-ie6.css" type="text/css" /><![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](https://image.slidesharecdn.com/css-091101144012-phpapp01/85/CSS-Best-practices-9-320.jpg)
![Targeting IE Conditional tagging 油 <!--[if !IE]>--><body><!--<![endif]--> <!--[if IE 6]><body class="ie6"><![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](https://image.slidesharecdn.com/css-091101144012-phpapp01/85/CSS-Best-practices-10-320.jpg)
![CSS for debugging Finding images with missing attrs 油 油油 油 img[alt=""] {border: 3px solid orange;}油油 油油 油油 油 img[title=""] {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](https://image.slidesharecdn.com/css-091101144012-phpapp01/85/CSS-Best-practices-13-320.jpg)
![CSS for debugging Finding links with missing hrefs 油油 油 a[href="#"] {background: orange;}油油油 油 油油 油 a[href=""] {background: orange;} Finding header hierarchy 油油油 h1 {background: red;} 油油 油 h2 {background: orange;} 油油 油 h3 {background: yellow;}油 油 Jos辿 Teixid坦 - http://www.sargebig.com CSS Best Practices & tips](https://image.slidesharecdn.com/css-091101144012-phpapp01/85/CSS-Best-practices-14-320.jpg)
![#3 HTML & CSS [know-how]](https://cdn.slidesharecdn.com/ss_thumbnails/html-know-how3-180511205559-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to CSS Best practices (20)
Recently uploaded (20)
CSS Best practices
- 1. CSS Best practices & tips Jos辿 Teixid坦 - http://www.sargebig.com
- 2. 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
- 3. 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="all"> 油 Jos辿 Teixid坦 - http://www.sargebig.com CSS Best Practices & tips
- 4. 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
- 5. Markup comments Navigating the code 油 油油 油 <div id=" content "> 油油 油油油 油 <div id=" story "> 油油 油油油 油油油 油 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
- 6. The CSS reset For consistency & easier debugging 油 Blanks browser default formatting (because they all see the world in their unique "wonderful" way) Pick your flavour:油 Universal * reset油 Meyer reset YUI reset Or create your own! Jos辿 Teixid坦 - http://www.sargebig.com CSS Best Practices & tips
- 7. 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
- 8. 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
- 9. Targeting IE Conditional style sheets 油 <link rel="stylesheet" href="main.css" type="text/css" /> 油 <!--[if IE 6]><link rel="stylesheet" href="main-ie6.css" type="text/css" /><![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
- 10. Targeting IE Conditional tagging 油 <!--[if !IE]>--><body><!--<![endif]--> <!--[if IE 6]><body class="ie6"><![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
- 11. 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
- 12. 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
- 13. CSS for debugging Finding images with missing attrs 油 油油 油 img[alt=""] {border: 3px solid orange;}油油 油油 油油 油 img[title=""] {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
- 14. CSS for debugging Finding links with missing hrefs 油油 油 a[href="#"] {background: orange;}油油油 油 油油 油 a[href=""] {background: orange;} Finding header hierarchy 油油油 h1 {background: red;} 油油 油 h2 {background: orange;} 油油 油 h3 {background: yellow;}油 油 Jos辿 Teixid坦 - http://www.sargebig.com CSS Best Practices & tips
- 15. 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
- 16. That's all! Hope you enjoyed it!