CHAPTER 1 Modern CSS Architecture and Front-End Development
I picked up so much from these guys, things like abstraction, DRY-
ness, object-oriented development, performance, extensibility. I learned
firsthand from some of the cleverest people I’ve ever met that code isn’t
about prettiness, or being expressive, or avoiding something just because.
I learned that you don’t get points for being pretty, you get points for being
powerful. This shift in approach, for me, was what started the ball rolling.
I started asking about concepts like the single responsibility principle,
abstraction, the high-level thinking behind object orientation, and lots, lots
more. Then I started to wonder how to apply these tried-and-tested pro-
gramming principles to front-end code: namely CSS.
I still maintain that CSS was left in the hands of the wrong people.
Sure, designers like myself often make the most use of CSS, but CSS is still
code. Granted, it might not have any logic behind it, it’s not a program-
ming language, but code is code is code, and it’s still subject to all the same
things that programming languages are: things like speed, efficiency,
reuse, maintainability, scalability. I took what I’d learned about certain CSS
misconceptions and then rolled that up with what I gleaned from my col-
leagues and started putting CSS on steroids. I totally changed my outlook
on CSS and the benefits were tangible.Takeaway: It’s time we looked at our code with a fresh pair of eyes to em-
brace and manage the shift in focus, size and nature of front-end projects.Object-Oriented CSS
In my opinion, one of the biggest, single shifts in writing and scaling CSS
was the advent of object-oriented CSS^8 , or OOCSS.
OOCSS — a term and methodology coined by Nicole Sullivan^9 — bor-
rows a lot from the world of software development and programming. OO
programming is a paradigm which aims to separate code into discrete,8 https://github.com/stubbornella/oocss/wiki
9 http://stubbornella.org