Visual semantics

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.