5. Selector Repetition
Even if we do everything right,
we still end up with something like this
#navigation {...}
#navigation ul {...}
#navigation ul li {...}
#navigation ul li.first {...}
#navigation ul li.last {...}
#navigation ul li a {...}
#navigation ul li a:hover {...}
6. Style Repetition
#navigation ul li#nav_home {
background: url(/images/home_off.gif) no-repeat; }
#navigation ul li#nav_features {
background: url(/images/features_off.gif) no-repeat; }
#navigation ul li#nav_tour {
background: url(/images/tour_off.gif) no-repeat; }
#navigation ul li#nav_business_care {
background: url(/images/business_care_off.gif) no-repeat; }
#navigation ul li#nav_quantum {
background: url(/images/quantum_off.gif) no-repeat; }
#navigation ul li#nav_payroll_solutions {
background: url(/images/payroll_solutions_off.gif) no-repeat; }
#navigation ul li#nav_addons {
background: url(/images/addons_off.gif) no-repeat; }
#navigation ul li#nav_system_reqs {
background: url(/images/system_reqs_off.gif) no-repeat; }
9. Browser have different
CSS defaults
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline; }
Part of Eric Meyer’s CSS Reset
10. Can we improve it?
• Avoid selector repetition with nesting
• Avoid style repetition with functions
• Build IE Hacks into the language
• Require well-formatted code
• Reset browser defaults without googling
16. Avoid Selector
Repetition
CSS Sass
#navigation {...} #navigation
#navigation ul {...} ul
#navigation ul li {...} li
#navigation ul li.first {...} &.first
#navigation ul li.last {...} &.last
#navigation ul li a {...} a
#navigation ul li a:hover {...} &:hover
17. Avoid Style Repetition
CSS
#navigation ul li#nav_home {
background: url(/images/home_off.gif) no-repeat; }
#navigation ul li#nav_features {
background: url(/images/features_off.gif) no-repeat; }
#navigation ul li#nav_tour {
background: url(/images/tour_off.gif) no-repeat; }
#navigation ul li#nav_business_care {
background: url(/images/business_care_off.gif) no-repeat; }
Sass
=nav-item(!name)
&#nav_#{!name}
:background url(/images/#{!name}_off.gif) no-repeat
#navigation ul li
+nav-item("home")
+nav-item("features")
+nav-item("tour")
+nav-item("business_car")
21. Reset Stylesheets
• Take your pick
• @import compass/reset.sass
• @import blueprint/reset.sass
• @import yui/reset.sass
22. Putting it all together
• Re-implement the Blueprint sample page:
• Semantic HTML
• All layout in CSS, not HTML classes
• Using Sass mixins for Blueprint