Object Oriented CSS

Object Oriented CSS

Object Oriented CSS Approach

  • Create a CSS component library
  • Use the wireframes to identify reusable components
  • Build base classes and base structures for them
  • Create a library consisting of HTML markup and respective CSS rules for all such components
  • Design individual pages only after all components have been defined
  • New pages should not normally require additional CSS
  • Rarely specify elements when defining IDs and classes

Object Oriented CSS Principles

  • Use consistent semantic styles and semantic class names
  • Separate structure and skin. Abstract the structure of the block from the skin which is being applied
  • Define repeating visual features, such as background and border styles, as separate “skins”
  • Separate container and content. Differentiate the rules for containers and the content that comes within them.  Enable content to be plugged into any containers irrespective of their parents. Remove dependencies between the content objects within a container and the container module itself
  • Rarely use location-dependent styles
  • An object should look the same no matter where you put it. Instead of styling a specific <h2> with .myClass h2 {...}, create and apply a class to modify the <h2>, like <h2 class="special">
  • All unclassed <elements> should look the same
  • All <elements> with a specifc class name (called a mixin) should look the same
  • Extend base objects using class names. Extend objects by adding more class names to it depending on the context, rather than tightly coupling the object with the class names of the containers in which it is located
  • Use reset and fonts from Yahoo! User Interface Library (YUI)
  • Use Grids to control width and content to control height

Site-wide CSS Components

  • Headings
  • Lists
  • Module headers and footers
  • Grids (used to break any space into fractions)
  • Buttons

Sources