CSS Performance | Barcamp 9, Delhi

Video Recording : http://www.youtube.com/watch?v=m5ZOIykihnU

CSS is easy. Unfortunately for us writing bad CSS is even easier. I share 5 guidelines on writing better CSS for optimising your stylesheets.

Learn how to write modular, more efficient and less code for your styles by decoupling HTML & CSS.

Transcript

1. CSS Performance @vaibhavkanwal
2. @vaibhavkanwal HTML5 Responsive Design CSS3 WordPress Who is this guy?
3. Bad display: none
4. :( display: none !important Worse
5. 1. Normalise Ref : Difference between Reset CSS & Normalise CSS? http://necolas.github.io/normalize.css/
6. <div class="box nav"> </div> <div class="box nav horizontal-nav"> </div> 2. Be Classy
7. 3. Be Predictable .box .body {} .box .body .title {} .box {} .box .body .title a{}
8. .box .body {} .box .body .title {} .box {} .box .body .title a{} .box-body {} .box-title {} .box {} .box-title a{}
9. 4. Abstract Visuals .theme-header{} .theme-border{} .theme-background{}
10. 4. Abstract Visuals .theme-header{ color: red} .theme-border{ border:1px solid grey} .theme-background{ background:blue} .red-header{ color: red} .grey-border{ border:1px solid grey} .blue-background{ background:blue}
11. 5. Attributes .data[class*=”col-”] { width: 25% } Ref : http://css-tricks.com/attribute-selectors/ h1[rel^="external"]{ text-decoration:underline; }
12. Questions?
13. I am hiring! @vaibhavkanwal