Confessions Of A CSS Expert

"I guess it all started pretty innocently enough. The UX guys would be asking for a new module or something. You know the sort of thing: a search box or paginator. Whatever. So I'd give that block a class like 'search-widget' or 'paginator'; something to make my stylesheet more readable and to help me contain styles within those blocks. It really helped."

"Then some guy told me about this thing called 'selector performance'. The idea was you could make the page faster by using classes more as selectors. So I would start putting classes inside these blocks, on pretty much anything. Instead of using .paginator li, I'd put a class of, like, .page on each of the list items. It was a bit time consuming 'cos I'd have to change the template logic to add the class. There was a lot of pressure to be 'perf', though, so I put the time in. I was so caught up that I never thought to check if selector performance was a real thing."

"Before long, I'd gotten into the hard stuff. I was putting multiple classes on any one element. They weren't your normal classes either; they were those high-power 'modified' classes you get. There were hyphens all over the shop. I knew I had a problem when I was looking at an input element with three classes on it. I stared at it for ages, then it finally hit me: 'There's no type attribute!'"

<input class="form_elem input input--email" />

"The thing I regret the most is how my class addiction affected my relationship with HTML. I'd write blog posts about how to structure classes using whatever methodology I was on at the time and I'd provide some code snippets. I'd always use <div>s in the examples. You know, just as placeholders. But these examples started making their way into my UI prototypes after a while, which turned out to be a slippery slope. Soon enough, sites in production were using <div>s for everything: buttons, headings, checkboxes, whatever. It was like Drupal, but even more obsolete."

"At the height of my addiction, I was using Sass for loops to generate classes for elements that I wasn't sure would ever exist. It was a bitter pill to swallow, but I had to face up to the truth: I had become a CSS expert."

"These days I'm doing a lot better. It's been a long road, but I've managed to give up using classes in my CSS altogether. They said it couldn't be done but, little by little, I made the changes I needed to make. The whole experience has been a learning curve and I think I've come out the other end a much wiser person."

<input data-style="form_elem input input--email" />