#CSS FTW My way to face the challenge: Maintainable + Efficient + Optimized
##General
- YSlow + Page Speed (Performance Rules)…
- CSSLint Rules…
- Don’t use too many web fonts
talk to your designer, and explain the impact of loading many sources.
##Tools
- Profiling Chrome Developer Tools
- Stress CSS https://github.com/andyedinborough/stress-css
- CSS Lint http://csslint.net/
- YSlow http://yslow.org/
- Page Speed https://developers.google.com/speed/pagespeed/
##BAD or GOOD?
#####Why not, one new class for a group?
BAD
.soccer { background: #ccc; color: #f00; border-radius: 5px; }
.surf { background: #ccc; color: #ff0; border-radius: 5px; }
GOOD
.sport { background: #ccc; border-radius: 5px; }
.sport-soccer { color: #f00; }
.sport-surf { color: #ff0; }
…then, you must have only one reference for the same sprite
.flag { background:url(sprite.png) 0 0 no-repeat; }
.flag-brazil { background-position: -16px 0px; }
.flag-usa { background-position: -32px 0px; }
We're working on Pitomba Sprite Generator
#####Avoid universal selector
* { margin:0; padding: 0; } BAD
YUI CSS Reset GOOD
#####Avoid thousand classes for a selector
.namespace .header .description .link {} BAD
.namespace .header-description-link { } GOOD
#####Avoid implicit universal selector
.checkbox[checked="true"] {} BAD
.checkbox-checked { } GOOD
#####Don't tag qualifying
nav.navigation { } BAD
.navigation { } GOOD
#####Don't use IDs in selectors, ID impact specificity and can't be reused
#generic-widget { } BAD
.generic-widget { } GOOD
#####Removing Zero values
.widget { margin: 0px; } BAD
.widget { margin: 0; } GOOD
####Any help, contribution is welcome...