I read this post from CSS Tricks that lists a number of “CSS utility libraries” with curiosity, which quickly turned into a mixture of confusion, panic and disgust, with each new example of CSS class names you would use with these libraries.
Let’s look at some of the class names; highlights are mine.
- d:i-b f-w:700 p-x:3 p-y:.7 b-r:.4 f:2 c:white bg:blue t-t:u hover/bg:blue.9
- mw9 center pa4 pt5-ns ph7-l
- f3 fw1 georgia i
- flex flex-wrap items-center mt4
- tcg50 ft10 fw3 mb2 md-mb3
- display-title color-white
- pad-1-bottom text-blue border-bottom marg-3-bottom
- bgr-green text-white grid-3 s-grid-12 pad-2-vert pad-1-sides
- constrain-md md:constrain-lg mx-auto pt-24 pb-16 px-4
- xs-col-12 sm-col-9 lg-col-10 sm-offset-3 lg-offset-2
These frameworks claim to use humanised classes that will make your development faster. But…
- Where is the separation of concerns? Did they not get the memo about not including font names, colours, and other visual attributes in the HTML? What if they decide to change the headers’ colour? Then you need to change all headers to go from class=”white” to class=”orange”, etc? Your development is going to be “fast” for a moment, but once you start having to maintain the code you’re going to regret this brilliant idea.
- There’s nothing human to using those classes. They are a step away from being a domain specific language… a programming language. Humans do not use programming languages to communicate between them (much to the chagrin of some “humans” who would like otherwise).
I can’t believe it’s 2017 and we still have to see this (let alone argue about it).
I guess they didn’t see the <p style=”color: red; font-family: Times New Roman;”><i><center>Old times</center></i></p> when we had to write crap like that not because we wanted, but because that was the only way. And oh how happy we were when we could take all that formatting out of the mark up and put it into a file and not have it scattered across all the files in the site, interspersed with the content. Ah, the audacity of youth…! Millenials are ruining web development! Groar! 👹
But if that wasn’t enough for you to disturb your calm on this fine Friday morning, here’s this excellent example of deeply offensive CSS, except we need to look at the class and the HTML tag to get the full kick in your ancient guts feeling 👟💥👵🏼:
<a href="#" download="" class="button button--secondary xs-mr1 xs-mb1">
If they want a button that looks and acts like a button… why… don’t… they… use… A <BUTTON>???!?! 😱
Please don’t do this. It’s not good for anyone–neither users, neither future developers that have to pick the maintenance after you were ‘clever’ and ‘humanised’ the code.
Or maybe it’s an ironic version of 90s vintage code, hipsterised. That must be it 💁🏻