UX Design and Development course

Rules to live by

In this chapter we will examine:

  • Object Oriented CSS - OOCSS
  • Semantic vs. presentational classes

Starting a new project, as a developer you are typically given a design. The color scheme has been selected and the action buttons have been outlined. The Header, Footer, and most of the content is documented for you. Before you dive into writing the CSS, it is prudent to look at the design as a whole and take the time to break it down to it's individual components or objects. The mistake of writing the CSS before these points are considered can lead to a great deal of bloat within the stylesheet.

If you are familiar with the concepts of Object Orientated Cascading Stylesheets (OOCSS) and semantic HTML/CSS, then this chapter should be a good review.

For those of you who are new to OOCSS, I encourage you to pay close attention. Although OOCSS has little to nothing to do with Sass, learning these principals is a solid foundation to writing scalable and maintainable Sass.