Object-Oriented HTML, and OOCSS
Published on Aug 6, 2013 (updated Jul 8, 2024), filed under development, html, css (feed). (Share this on Mastodon or Bluesky?)
This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.
“Object-oriented CSS” is the idea of treating page elements as objects, giving all these objects classes, treating objects’ classes as single entities in style sheets, and taking it from there. I’ve never commented on OOCSS as it was never relevant for my work. As supposedly so useful it should have been relevant though, so it piqued my interest and I reviewed the old OOCSS site and Smashing Magazine’s introduction.
Objects and HTML
The idea of objects in HTML seems generally compelling. I was interested in a possible terminology, and jotted down the following:
Simple objects: elements (headings, paragraphs, &c.).
Complex objects, or composite objects: multiple elements combined (for articles, widgets, &c.).
Native objects: developed specifically for a site or page.
External objects: all-purpose, both by other teams (like a video module developed by other in-house developers) or of truly external origin (like Twitter or Facebook widgets).
Combinations thereof.
Objects and CSS
Now we meet OOCSS, and to me (who may err), it looks like we’re dealing with a misunderstanding of HTML and CSS:
There are different types of objects in HTML, and without a clear distinction (as attempted above) an object-oriented approach seems misguided. There are different levels of interaction and complexity between simple, complex, native, and external objects.
There’s nothing wrong with IDs; IDs are an important part of the cascade. Similarly, there’s nothing wrong with descendant selectors (performance? that argument is none); these are also important. In my view, depriving authors of these cannot be an option.
Suggesting authors to think objects without differentiation and then to stay away from vital parts of CSS may not be enough to establish a different web development technique (let alone paradigm).
The arguments set forth with OOCSS also appear contradictory (easier to use but learning curve, good for performance but also not).
OOCSS supporters then admit OOCSS to be problematic (“for smaller sites and apps […] OOCSS would be overkill”).
This is not good. It’s not a sign of our maturity that the topic of object-oriented CSS, conceived in 2009, isn’t entirely clear—or dead by now.
About Me
I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.
I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)