Style Sheet Strategies

1
Style Sheet Strategies

• Charles Wyke-Smith
• Director, User Experience Group
• Benefitfocus.com
• Voice That Matter Conference
• Nashvillle, TN
• June 11th, 2008

2
Why be strategic?

• Realize your creative vision
• Minimize the effort
• Maximize the return
• share and reuse the code
• accessibility
• Simplify the technical integration
• Make the code understandable
• Evolve the site over time

3
1. You gotta keep em separated

• Structure and presentation
• XHTML and CSS
• Content and look
• Content image and presentational images
• Two folders images images_pres

4
2. Structure first, style later

• XHTML a mechanism for giving structure to
  content
• How do I break this pages content down into
  divs?
• Whats going into them?
• Think in content sections, not presentation

5
2. Structure first, style later
Branding
nav links
Content
Promo
Nav
premium links
Footer
6
2. Structure first, style later
ltdiv id"branding"gt lt/divgtlt!-- end branding
--gtltdiv id"nav"gtltdiv id"nav_links"gt lt/divgtlt!--
end nav_links --gtltdiv id"nav_premium"gt lt/divgtlt!--
end nav_premium --gt lt/divgtlt!-- end nav --gtltdiv
id"content"gtlt/divgtlt!--end content div--gtltdiv
id"promo"gt lt/divgtlt!-- end promo --gtltdiv
id"footer"gt lt/divgtlt!-- end footer --gt
7
2. Structure first, style later

• Start with the XHTML markup
• Think hierarchically its family affair
• Main layout areas
• branding, nav, content, promo, footer
• Area sections
• nav_links, premuim_links
• Compound elements
• form, ul, ol, table
• Generic elements
• h1-6, p, blockquote, etc.
• Markup us semantically
• Beware classitis
• Comment div closing tags

8
2. Structure first, style later

• Validate before you style
• Have a well-formed body but valid..?
• Review in browser before you style
• Default document flow
• Does the markup display in a meaningful way in
  the browser without CSS?
• Block and inline know the difference

9
3. Leverage the Cascade

• Mommy, where do CSS rules come from?
• From the top down
• Browser
• User
• Author
• External
• Embedded
• Inline

10
3. Leverage the Cascade

• Three options
• External scope is site
• ltlink rel"stylesheet" media"all"
  href"css/mystylesheet" type"text/css" /gt
• Embedded scope is page
• ltstyle type"text/css"gt
• p colorred
• lt/stylegt
• Inline scope is tag
• ltp style"colorred"gtOne red paragraph!lt/pgt

11
3. Leverage the Cascade

• External Styles
• Can be used by multiple pages
• Style sheet is cached by the browser
• Only downloaded once for all pages
• Associate with
• link tag
• or
• _at_import in an style tag

12
3. Leverage the Cascade

• Rules - nav p colorred
• Selectors - p last selector is target
• Declarations colorred
• Property color
• Value red
• Contextual selectors - nav context
• ID ltdiv idnavgt nav
  width12em
• once in page
• Class ltp classerrorgt p.error colorred
• multiple times in page

13
3. Leverage the Cascade

• Specificity resolves style conflicts
• From low to high
• p
• p.warning
• nav p
• nav p.warning
• Rough specificity guide
• Rules with IDs trump rules with classes
• Rules with classes trump element-only rules

14
3. Leverage the Cascade

• Inheritance
• Styles passed down from the parent
• Only some styles are passed down
• Width, text, font yes
• Borders, padding no
• Computed values, not stated values
• is weak
• ltdiv id"promo"gt
• ltulgt
• ltligtlta href""gtNav item 1lt/agtlt/ligt
• ltligtlta href""gtNav item 2lt/agtlt/ligt
• lt/ulgt
• lt/divgtlt!-- end nav --gt
• promo ul li colorred / high specificity
  inherited styles for a /
• a colorgreen / type is
  green /

15
4. Leverage the box model

• Block level element behavior
• Dimensioned elements
• Width stated widthpaddingbordersmargins
• Width of content stated width
• Undimensioned elements
• Width width of parent element
• Width of content width of parent-paddding-borde
  rs-margins

16
4. Leverage the box model

• Dimension the main divs
• Dont dimension contained elements
• The key to scalable layouts
• Use an inner div to pad the contents
• ltdiv id"nav"gt
• ltdiv id"nav_inner"gt
• lt/divgt lt!-- end nav --gt
• lt/divgt lt!-- end nav --gt
• nav width170px
• nav_inner margin10px / dont add other
  styles to me /

17
5. Style from the top down

• Style at the highest level possible
• Let the styles match the flow of the document
  hierarchy
• Could I have styled this higher up?

18
5. Style from the top down

• 1. Main layout divs (header, nav, etc.)
• 2. Generic styles (h1, p, etc.)
• 3. Section divs (sign_up, sub_links)
• 4. Library elements (tables, forms)
• Use multiple style sheets
• but not too many
• each in turn

19
5. Style from the top down

• 1. Main layout divs
• Building the page framework
• Floating or absolute positioning?
• Floating
• Retains document flow
• Clearable footer
• Prone to breakage slip-under use inner divs
• Absolute
• Takes layout elements out of document flow
• More robust columns wont slip-under
• Needs JavaScript to clear a footer

20
5. Style from the top down

• 2. Generic styles (h1, p, etc.)
• Improve the browser style sheet
• Add your personal style here
• Affects all elements

21
5. Style from the top down

• 3. Section divs (sign_up, sub_links)
• Margins and padding, not width
• Sequentially style the elements
• Always add plenty of context!
• Higher specificity
• Clarity of meaning
• ltdiv idsub_links"gt
• ltulgt
• ltligtlta href""gtXHTMLlt/agtlt/ligt
• ltligtlta href""gtCSSlt/agtlt/ligt
• lt/ulgt
• lt/divgtlt!-- end sub_links - -gt
• sub_links ul li a font-size.8em NOT
  sub_links a font-size.8em

22
5. Style from the top down

• 4. Library components
• Recurring compound elements
• Lists, menus, forms, tables
• Run a separate style sheet(s)
• Containing element with a class
• Style every rules with the context
• Break out the visual from the functional

23
5. Style from the top down

• Sequence of declarations in a rule
• Put what is most important to you first
• Positioning
• Relative, absolute, fixed, floated, z-index
• Dimensions
• Width and height, Margins, paddings and borders
• Font-related
• Color, font-size, font-weight, font-style
• The rest
• Text-decoration, vertical-align

24
5. Style from the top down

• Keep it simple
• Clearing floats
• try floating the container before resorting to
  clearing elements or clearfix
• Dont pile on the classes
• Try using contextual selectors first
• Go with the document flow
• Retain static positioning wherever you can

25
6. Think components

• Write for reuse
• Use a contextual div with a class
• ltdiv classspecial_list"gt
• ltulgt
• ltligtlta href""gtNav item 1lt/agtlt/ligt
• ltligtlta href""gtNav item 2lt/agtlt/ligt
• lt/ulgt
• lt/divgt
• Separate from other styles in style sheet

26
7. Best browsers first

• Firefox, Safari, IE7
• IE6 will enclose floated objects
• IDWIMIE and it never will
• Look at IE6 last and tweak where needed
• Ensures pseudo-classes and CSS3 degrade
• Hack it afterwards if you must
• Separate style sheet for hacks
• / just for IE6 \/
• html .whatever
• / reset comment /
• Test, test, test, test, test...

27
Style Sheet Strategies

• 1. You gotta keep em separated
• 2. Structure first, style later
• 3. Leverage the Cascade
• 4. Leverage the box model
• 5. Style from the top down
• 6. Think components
• 7. Best browsers first

28
Style Sheet Strategies

• Questions?
• Charles Wyke-Smith
• Stylin with CSS XHTML CSS
• Codin for the Web PHP SQL
• www.stylinwithcss.com
• charles_at_stylinwithcss.com