Separation of structure from skin

To build a site that the structure or the markup or the HTML separated from the skin or the style or the CSS, requires a lot of dedication and forethought. Prime example of this separation is the example of CSS Zen Garden. Zen Garden is a site that allows designers and developers to create new websites not by changing the HTML but by creating a whole new CSS.

In order to have a good grasp of this concept, let's create some individual building blocks for our site. Creating individual CSS objects that can be assembled to create the desired style is one of the main guidelines of OOCSS. One of the most commonly used and created CSS object is the container object (which also sometimes goes by the name of block object or panel object). A starting container object can look something like this:

.container {
  background: transparent;
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  overflow: auto;
}

However there will subtle variation that will be extended or created to compliment or assemble other styles. For example in our online resume project, we have a container on the left, our side navigation bar, which has dark background and light colored text. As a result, we will create a style as such:

.side-nav {
  background: black;
  color: white
}

If a bordered container is needed then create a selctor like the following.

.bordered {
  border: 1px solid #cecece;
}

.main-content-bordered {
  border: 5px solid #b7d9a8;
}

It is the assembly of the individual objects that will allow for flexibility in creating individual components and that is part of the OOCSS process. As we get into more details, we can see that more assets can be added to individual areas. For example, a container may contain individual areas of header, footer, and body that can be expressed in the following way.

.container {
  background: transparent;
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  overflow: auto;
}

.container > .head {
  font-size: 14px;
  font-family: 'Share Tech', Arial, sans-serif;
}

.container > .content {
  font-size: 12px;
  line-height: 1.4;
}

.container > .foot {
  font-size: 11px;
  font-family: 'Anaheim', Arial, sans-serif;
}

OOCSS is a great set of rules that will allow for a better built CSS framework. It will also help in reducing a tremendous amount of CSS bloat which in turn will help quite a bit in CSS and site performance. For further information on OOCSS visit OOCSS Github site.