Leo

<p>"I guess it all started pretty innocently enough. The <abbr title="User Expert">UX</abbr> 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."</p> <p>"Then some guy told me about this thing called 'selector performance'. The idea was you could make the page <em>faster</em> by using classes more as selectors. So I would start putting classes inside these blocks, on pretty much anything. Instead of using <code>.paginator li</code>, I'd put a class of, like, <code>.page</code> 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."</p> <p>"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 <code>input</code> element with three classes on it. I stared at it for ages, then it finally hit me: 'There's no <code>type</code> attribute!'"</p> <pre> <input class="formelem input input--email" /> </pre> <p>"The thing I regret the most is how my class addiction affected my relationship with <abbr title="Hypertext Mother Lode">HTML</abbr>. 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 <code><div></code>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 <code><div></code>s for everything: buttons, headings, checkboxes, whatever. It was like Drupal, but <em>even more obsolete</em>."</p> <p>"At the height of my addiction, I was using <abbr title="Not An Acronym">Sass</abbr> <code>for</code> 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 <abbr title="Cascading Satire Sheets">CSS</abbr> expert."</p> <p>"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."</p> <pre> <input data-style="formelem input input--email" /> </pre>