Spoilers! Like with so many things, the answer is “it depends.” How come? Read on.
Tailwind and BEM are two approaches to writing and maintaining CSS. Comparing them is a bit like comparing apples and oranges, in that while they’re separate, they’re still fruit. This is to say that having an approach to manage your CSS—like any other code—is a good thing.
Tailwind is the newer of the two, with the first stable release in May of 2019. BEM was made open source in 2010, although it’s been around since 2006. Chances are good that if you’re working on a modern web project you’ll find one of these approaches.
I won’t bore you with the particulars of my experiences, but I will say that I’ve been a consultant for over five years and have had practical experience using both on a variety of projects and scales. Here’s the benefits and drawbacks for both:
Tailwind provides a series of pre-written classes to work with. These classes are utility CSS, meaning many small, single-purpose classes that are assembled en masse to create an overall visual effect.
Instead of predefined class names to draw from, BEM is a methodology to inform how to describe things. It’s a technique pioneered by Nicolle Sullivan’s Object Oriented CSS (OOCSS).
BEM stands for Block, Element, Modifier, an acronym used to describe its styling methodology. Blocks are standalone entities, what we’d consider a component. Elements are the parts of the component, and Modifiers serve as flags for conditionally altering appearance or user-facing state.
Personally, I’ve been really enjoying CUBE CSS, a new approach that capitalizes on the strengths of both approaches (plus a nice dash of axiomatic CSS). And capitalizing on strengths is the name of the game: By keeping an open mind about these sorts of things, you’re able to adapt to the challenges each projects requires.
Whether you’re a new founder, a large enterprise, or somewhere in between, we’ll partner with you to bring digital products from validation to success and teach you how.
© 2020 thoughtbot, inc. The design of a robot and thoughtbot are registered trademarks of thoughtbot, inc. Privacy Policy