Agency front-end development (FED) teams face unique challenges because of the wide variety of work they have to support. Work that spans many different technologies, from singe page applications (SPAs) to Craft CMS driven content sites to native apps. Working on a wide range of technologies, and jumping from project to project, has its advantages—you won’t get bored—but it comes with drawbacks as well:
How we structure our CSS has to be in service of alleviating the pain points of agency front-end development work. What Adam Wathan describes in his article CSS Utility Classes and “Separation of Concerns” matches our thinking. For the past decade, we have tried “semantic” CSS and having a clear “separation of concerns” between our HTML and our CSS. We’ve also spent time writing generic CSS components with additional classes. We have used traditional BEM and then BEM with sassier modifiers. The latest iteration of our process is a utility-first approach to writing CSS with Tailwind. For the past two years we’ve found it to be the most maintainable, accessible, and fast way for us to write CSS.
Tailwind is many things to many people, so it’s important to know what we mean when we say we: “have settled on a utility-first approach to writing CSS with Tailwind”. There could be a whole article written about the many flavours of Tailwind, but broadly speaking those flavours are: