7. REDUNDANCY
• Symptom: Declaring styles that are inherent, styles that negate
other ones in the chain.
• Solution: Take your freebies and remove things
that don’t matter.
div { display: block; }
.my-class { display: block; float: left; }
img { display: inline-block; }
span { display: inline; }
.nav { position: absolute; float: left; }
9. REPETITION AND
DISORGANIZATION
• Symptom: See many of the same declarations over and over.
• Symptom: See styles being overridden in web inspector.
• Symptom: Having to reset styles because of previous
declarations.
13. DETOUR INTO
PREPROCESSORS
• Favorite benefits of preprocessors:
• Partials (architecture)
• Extendables (in Sass 3.2) %
• Sprite benefits (Compass)
14. OVERSPECIFICITY
• Wasting your time and the browser’s time
.header .logo .title.name { }
#nav ul li a { }
.content a.title { }
.logo > .title { }
.nav li > a { }
.content .title { }
16. HOW BROWSERS EVALUATE CSS
Resources:
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
The engine evaluates each rule from right to left, starting
from the rightmost selector (called the "key") and moving
through each selector until it finds a match or discards the
rule. (The "selector" is the document element to which the
rule should apply.)
17. HOW BROWSERS EVALUATE CSS
Specificity:
1. Ids
2. Classes
3.Tags
4. Universals
From SpeciFISHity by Weyl
18. INVALID DECLARATIONS
• Symptom: Crossed out in web inspector, because it’s wrong,
not overridden.
• Symptom:A style is written, but not rendering. (because it’s
wrong)
• Solution: ⌫.And read the MDN.
.classy {
background-position: inital initial;
font: Arial;
font: 14px/16px Arial sans-serif;
padding: -10px;
}
19. NO FALLBACKS
• Know what you support, and debug before you see it in the
browser.
• Most common with colors, so add a simple color
(background-, border-) declaration fallback.
• Includes setting position properly -- a common problem in
some browsers