An Event Apart: The Lessons of CSS Frameworks

by Luke Wroblewski June 23, 2008

At An Event Apart Boston 2008, Eric Meyer walked through common characteristics of several Cascading Style Sheet (CSS) frameworks and outlined lessons that can be learned from their structure.

  • CSS frameworks abstract away a lot of the layout work that is required when coding CSS.
  • Popular frameworks include: 960, blueprint, content with style, elements, that standards guy, Tripoli, WYMStyle, YAML, YUI
  • None of these CSS frameworks are right for you. You need to create solutions that are appropriate for the work you do. However, they can provide valuable lessons.
  • All frameworks have set of reset styles, default color sets, and fonts defaults. Most frameworks leave forms alone as styling forms is difficult. Few have print styling options. Many frameworks support multiple layout options.
  • Most font resetting is done at 12 or 13 pixels. Line height should always use a scaling factor. If set in ems, it will propagate through the document tree.
  • No frameworks make headings smaller than paragraph text. HTML4 allows some headings to be smaller.
  • Header size averages (based on all CSS frameworks analyzed): h1 2.33/2, h2 1.8/1.67 h3 1.45/1.38, h4 1.25, h5 1.11, h6 1.05
  • Naming Conventions: pick whatever layout and add appropriate class name (grid1, column2, column3) or use universal element naming (header, main, footer, nav)
  • Layout can be managed by invoking an appropriate style when all styles are included in a single CSS file. Though you are loading every possible layout when only need 1-2, this can improve performance for sites with lots of traffic. In these cases, the fewer hits on the server the better as the number of hits quickly becomes the gating factor for performance not the size of a document.
  • An alternative method for managing styles is simply linking to an appropriate style sheet with the layout you want. Caching allows linked files to be available for some returning users.
  • Hacks in CSS frameworks tell us what CSS is missing and what browser issues exist. Common hacks in CSS frameworks include: fixing problems with clearing for ways to wrap content around floating elements, pseudo-padding for defining what width means for an element, and Internet Explorer 6 support.
  • Frameworks can include styling for external, internal, mailto, links using attribute selectors but we can’t relay on these as IE6 does not understand them.
  • Some frameworks include compressed files with no comments or extra white space, which are designed for machines.
  • Several frameworks include debugging styles: show grids, layouts
  • Best practices from CSS frameworks include:
    • Use a directory structure for different CSS file types
    • Link to style sheets
    • Utilize separate files for layout, not classes
    • Use a reset file, and default text sizes
    • Default colors can be set per body
    • Build debug styles