The web stack (simplified) between you and your users

On the last day of TXJS, a developer asked me:

Doesn’t Object Oriented CSS leave you with a pile of presentation based class names?

Each layer in the web stack has its own architecture. You wouldn’t expect the DB schema to be used to architect the PHP middleware, and yet people expect that of the HTML and CSS. HTML needs to be written with a sense of the meaning of the data or content, something I call code semantics. Code semantics are incredibly important in the HTML for both portability and accessibility. On the other hand, CSS really is a separate layer in the stack, and it needs its own architecture that reflects the visual semantics of the page.

Visual semantics describe all the repeating patterns in the design of the page. They represent the fundamental building blocks of your website. In fact, they are often portable across sites with only minor modifications. Visual semantics shouldn’t necessarily be tied to HTML semantics, because you want an architecture that fits the unique requirements of each layer of the stack.

Separating Template Architecture From Styles

Similarly, many PHP developers are tempted to match the CSS and HTML architecture to the PHP. Perhaps it is common to try to apply the abstractions of the layer with which you are most comfortable to those that you find more challenging? I’ve certainly been guilty of it. During my time at Facebook, I expected the PHP layer to match the CSS layer. Luckily Facebook has some smart developers who pushed back and helped grow my understanding.

Shoehorning CSS and HTML into PHP abstractions prevents the code from being DRY and ultimately leads to code bloat, because, the CSS and HTML require a far more granular object structure than the PHP. In fact, PHP templates are not a very natural fit because each template includes many different HTML and CSS objects combined in different ways.

Visual Semantics != Presentation Based Classes

It is important to note that I’m not suggesting class names like “giantBlueHeading.” Class names need to represent the object structure you are defining, not the specific visual look and feel of this particular instance. For example, I often choose abstract class names that are easy to remember, like “media”. The media block combines of a fixed width image or flash with some text or other content that describes it.

The media block may be used in many different contexts, for example, to join an icon and a link or a profile picture and user name. The specific use case is separate from the object structure. The HTML can be looked at as instances of the CSS object.

The code for the media block, and many other base objects are available on the OOCSS open source project.