Final 12 months at Mud we adopted a utility-first strategy to CSS (often known as atomic CSS). Particularly we determined to make use of TailwindCSS, a utility class framework, which gives a bunch of lessons you possibly can apply to your initiatives to quickly construct a UI.
Sarah Dayan printed an important article final 12 months in regards to the advantages of utility-first CSS, and I like to recommend studying that to get overview of some benefits to the strategy on the entire. On this article I’ll summarise what I’ve learnt from adopting atomic CSS in an company context over the previous 12 months, and the place it would or won’t be applicable to use it.
What are utility lessons?
Utility lessons are CSS class names that serve one explicit goal, and are named as such. Sometimes a category like .bg-blue would offer you background-color: blue, for instance. It’s not unusual to make use of utility lessons inside CSS, however on the entire they are typically used sparingly – at the very least with well-established methodologies equivalent to BEM and ITCSS.
The pondering across the rise of utility class frameworks turns this on its head, and advocates growing with utility lessons first, with lessons that cowl just about any widespread fashion you may wish to apply to a component. There are numerous utility class frameworks round (Tachyons is one instance), however Tailwind particularly gives easy class names that stroll the positive line between brevity and being sufficiently descriptive. It would take a short time to memorize them at first, however many of the class names are pretty intuitive, and I discovered that after having a window open with the documentation alongside my challenge for a few days, I hardly wanted to check with them in any respect. (There’s even a plugin for VS Code to entry the docs, so that you don’t even want to depart your editor! I haven’t used this, so can’t vouch for it.)
A string of lessons like block p-1 mb-1 text-white bg-blue hover:bg-red could be the equal to the next:
.some-element {
show: block;
padding: 0.25rem;
margin-bottom: 0.25rem;
shade: #ffffff;
background-color: #3490dc;
}
.some-element:hover {
background-color: #e3342f;
}That signifies that our specificity tree is just about flat. You’re not likely utilizing the “cascading” a part of CSS in any respect – with a couple of exceptions, as we’ll quickly see.
A phrase on frameworks
The phrases “CSS framework” might be fairly deceptive, and conjure up various things for various folks. For many individuals these phrases instantly call to mind Bootstrap, Basis and different comparable frameworks, which give HTML elements and CSS lessons that will help you construct interfaces. You’ll be able to find yourself with loads of additional CSS, as a result of the frameworks embrace every little thing you may want. You may as well spend loads of time overriding the framework’s out-of-the-box kinds if you’d like one thing that feels extra bespoke.
The way in which utility class frameworks are utilized is sort of completely different – though not with out points themselves, as we’ll see.
Configuration
One attraction of a utility class framework is that it might probably make improvement quicker when you’ve turn into accustomed to the syntax. You don’t want to leap forwards and backwards continually between you HTML and CSS information, and lessons are fast and simple to jot down – even quicker in case you use an autocomplete plugin like Intellisense in your editor.
The draw back is it’s essential to put in some preliminary legwork in configuration. Tailwind comes with a config.js file, the place you outline all of your variables: colors, typography, sizing (padding, margins, and so forth.) and rather more. There’s a default config, however the chances are high you’ll want to customize it fairly extensively, and it’ll actually repay to do that upfront. It will probably really feel such as you’re spending loads of time organising earlier than you’ve written any code, however in case you make investments on this the following stage turns into so much faster and simpler.
(In the event you’re attempting out Tailwind for the primary time, otherwise you simply wish to use it for some fast prototyping then don’t fear, it comes with a default config file, so you possibly can skip this step.)
Naming is tough
At Mud we beforehand used BEM for naming CSS lessons. This labored fairly properly on the entire, when utilized appropriately, however was nonetheless vulnerable to human error or (in some circumstances) misapplication. Usually, when going again to an older challenge, you would see a unique strategy had been taken by two completely different individuals who had labored on it. Tailwind removes such inconsistencies by lowering the hazard of anybody going off-piste with their class names.
Utilizing Tailwind means worrying about naming issues so much much less. A typical drawback is naming a element, say .news-card after which end up repurposing mentioned element for a very non-news-related factor. It’s good to not have to consider naming issues. However however, it’s possible you continue to have to call your element one thing, in order a promoting level for Tailwind this solely will get you to this point. It has positively impacted the best way I take into consideration naming although, and I’m rather more thoughtful of reusability as of late.
Utility lessons in motion
The very first thing you’re prone to discover about utility lessons, is that as a result of they’re single goal, it’s a must to use loads of them. Which means, successfully, placing a shortened model of all of your CSS lessons into your HTML. That may make selectors fairly lengthy, cumbersome, and fairly frankly, ugly. I don’t thoughts admitting that this was extraordinarily off-putting the primary time I attempted it, and went towards each fibre of my being that railed towards placing kinds in markup. Nonetheless, after utilizing Tailwind for a short time it quickly felt intuitive, and there’s so much to be mentioned for with the ability to take a look at a block of HTML and see at a look which kinds are being utilized.
This isn’t with out its downsides. Seeing all of your kinds displayed as one lengthy string inside your HTML could make it harder to see while you’ve made an error – duplicate or conflicting selectors, typos and incorrect class names can all go unnoticed. A number of instances I’ve typed a category identify that I assumed was appropriate, solely to finish up scratching my head, determining why my kinds weren’t being utilized. (I imagine there could also be a VS Code extension within the works for Tailwind linting, however don’t maintain me to that.)
When you’ve gotten an excellent lengthy selector string to deal with, Tailwind has another choice up it’s sleeve. You’ll be able to merely extract these lessons into your CSS file, like so:
.my-super-class-name {
@apply bg-blue text-white font-bold uppercase px-2 py-1 mx-auto mb-1 border-1 w-200;
}That’s fairly helpful. However then, why not write common CSS, since we’re writing in our CSS file? Plus Tailwind doesn’t have lessons for each potential CSS fashion, so that you may want to jot down some common CSS anyway. Abruptly we have now three potential methods we could be making use of kinds:
- Inline Tailwind lessons
- Tailwind-in-CSS
- Common previous CSS
I’ve tied myself into specificity knots far worse with Tailwind than with common CSS, although Tailwind seems to be promoted as an answer for such conundrums.
One other place the place I discovered Tailwind tough to work with was with element variants. We might usually must construct a number of variants of the identical element – e.g. a piece containing a heading, a block of textual content and a picture, which could have a couple of potential format mixtures however would in any other case embrace all the identical CSS. With BEM you might need one thing like this:
<article class="media-object">
<h2 class="media-object__heading"></h2>
<determine class="media-object__figure">
<img class="media-object__image" src="some-image.jpg" />
</determine>
<div class="media-object__text-block"><p>...</p></div>
</article>Class names are descriptive, and making some fashion modifications to all these element variants would often imply merely updating your CSS in a single place. Now think about you’re utilizing utlity class in your HTML and also you wish to change each element’s padding from 1rem to 2rem. You’d want to enter the HTML file for every one, discover that utility class and replace it (with out by chance updating it within the incorrect place). It could be a good suggestion to extract the kinds right into a CSS file the second you end up repeating selector strings, however this additionally throws up some points as beforehand talked about. (I recognise that this received’t be an issue for everybody – in case you construct your elements in React as an illustration, utilizing Tailwind with Styled Parts, you’re possible going to have simply the one file and account to your variant by passing in props.)
Plugins
As a result of Tailwind is configured with Javascript, you are able to do issues like writing features and passing them into your config. The benefit is it provides you all the facility of Javascript, and you may also write your individual customized utilites as plugins.
With common CSS you might need a handful of utility lessons in a Sass partial that you would be able to apply thoughout your challenge when the necessity arises (I’ve usually performed this with a couple of reusable typography kinds, for instance). In the event you attempt to apply these alongside Tailwind lessons this could find yourself inflicting confusion the place you may anticipate kinds to be overridden and so they aren’t. (Which kinds override which is dependent upon the order of your imports.) Having learnt this the laborious method, I might advocate writing your individual customized utilities as Tailwind plugins reasonably than writing them in Sass. You get the advantage of having these output alongside all of Tailwind’s common utilities, in addition to with the ability to entry Tailwind’s state and breakpoint syntax (e.g. hover:bg-green would offer you a hover state of background-color: #38C172.)
The draw back is this may be extra of a studying curve for folks coming who’re much less acquainted with Javascript. I’m not satisfied but that figuring out Javascript needs to be a prerequisite for writing good HTML and CSS.
Efficiency
Theoretically, utility lessons are designed to be re-usable and subsequently you ought to find yourself delivery a smaller CSS file. A smaller file ought to equate to raised efficiency. Nonetheless, left untouched, the framework would generate all of the lessons you may ever want, and go away you’ll a complete load of unused CSS, until you are taking steps to strip it out. The expectation nonetheless, is that you’d realistically by no means ship your complete framework. The documentation particulars various methods to take away pointless CSS and cut back the general file measurement.
A technique that’s really useful in Tailwind’s documentation is utilizing a instrument like Purge CSS as a part of your construct course of. In follow it’s essential to be vigilant about which lessons you’re eradicating, notably in case you have some lessons which might be being added with Javascript. The Purge whitelist is your buddy right here – it took me a short time to get this proper, and on a number of events I bumped into bother getting it to play properly with my important CSS.
One other factor…
It’s slightly factor, however I actually just like the media question features, which you should utilize in your CSS information. Writing @display md is a lot faster and nicer than writing common media queries, and even mixins.
When NOT to make use of Tailwind
Some folks advocate utilizing utlities for completely every little thing – and by that I imply creating new utilities every time they don’t exist already in Tailwind. I completely do not advocate this strategy. I work so much with CSS Grid, and making an attempt to configure a utitity class for each potential format mixture could be loopy, to not point out severely limiting your self in relation to with the ability to absolutely utilise Grid’s energy. There’s a Grid plugin for Tailwind, however even its documentation says:
It is not likely sensible to show the entire energy of CSS Grid via utilities, however this plugin is an effective instance of utilizing CSS Grid to exchange a cell-only float or Flexbox grid.
There are many different CSS properties that it’s simply not sensible to attempt to replicate with Tailwind, so that you’re in all probability nonetheless going to wish common CSS in some form or type.
Conclusion
Tailwind isn’t the magic bullet to repair all of CSS’s supposed issues, nor does it excuse you as a developer from understanding the cascade. In the event you’re somebody who appreciates CSS’s underlying rules you may discover it feels counterintuitive at first, however it’s price persevering earlier than you resolve whether or not it’s the appropriate strategy for you. Whereas I wouldn’t select to make use of it for each challenge, there are clear advantages. I imagine adopting Tailwind at Mud was the appropriate determination for the crew, making out CSS extra reusable, maintainable and performant.
