Css Best Practices
- 1. CSS BEST PRACTICES By Sachin Chaudhari – Zensar Technologies
- 2. Introduction This Presentation is consolidation of the CSS (Cascading Style Sheet) best practices during web development.
- 3. Advantages of CSS CSS helps to reduce html code Pages load faster Easy for maintenance Saves time
- 4. Types of CSS Inline styles Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to. <a href="" style="text-decoration: none;"> Embedded/Internal styles Embedded or Internal styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. <style type="text/css“> p { color: #00f; } </style> External styles External styles are styles that are written in a separate document and then attached to various documents. External style sheets can affect any document they are attached to. <link rel="stylesheet" type="text/css" href="styles.css" />
- 5. CSS Best Practices Use a Reset Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers. Example: body, h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } ol,ul { list-style:none; }
- 6. CSS Best Practices Organize the Stylesheet with a logical Structure lay your stylesheet out in a way that allows you to quickly find parts of your code. So, an example stylesheet might be ordered like this: Generic classes (body, a, p, h1, etc.) /****** header *********/ styles goes here... /****** header End*********/ /****** main content *********/ styles goes here... /****** main content End*********/ /****** footer *********/ styles go here... /****** footer End *********/ /****** common*********/ styles go here... /****** common End *********/
- 7. CSS Best Practices Make it Readable The readability of your CSS is incredibly important, though most people overlook why it's important. Great readability of your CSS makes it much easier to maintain in the future, as you'll be able to find elements quicker. Also, you'll never know who might need to look at your code later on. All on one line .content { background: red; padding: 2em; border: 1px solid black; } on different line .content { background: red; padding: 2em; border: 1px solid black; }
- 8. CSS Best Practices Keep it Consistent Along the lines of keeping your code readable is making sure that the CSS is consistent. develop your own "sub-language" of CSS that allows you to quickly name things. There are certain classes that I create in nearly every application, and I use the same name each time. For example, I use ".dbfl" to float divs to the left. Good Example .dbfl { display:block; float:left; } .dbfr { display:block; float:right; } Bad Example .dbfl { display:block; float:left; } .dbfr { float:right; display:block; }
- 9. CSS Best Practices Combine Elements Elements in a stylesheet sometimes share properties. Instead of re-writing the same properties just combine them. For example, your h1, h2, and h3 elements might all share the same font and color: h1, h2, h3 {font-family: tahoma, color: #333}
- 10. CSS Best Practices Use Multiple Classes Sometimes it's beneficial to add multiple classes to an element. Let's say that you have a <div> having class "box" which defines color and font properties . <div class="box"></div> Now you want to float it right, and you've already got a class . right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so: <div class="box right"></div>
- 11. CSS Best Practices Use Shorthand while declarations Comment your CSS Avoid Using Inline Styles
- 12. CSS Best Practices Validate your CSS Validating your CSS does more than give a sense of pride: it helps you quickly spot errors in your code. Validation Service http://jigsaw.w3.org/css-validator/
- 13. THANK YOU