Extract components painlessly from Tachyons with Less

Posted on

With the rising popularity of utilities CSS libraries (or functional CSS, it you are into fancy names) such as Tachyons, Basscss and the likes, there some emerging question going with them:

CSS helper libraries are good for rapid prototyping, there’s no deny of that

What’s the point of CSS helper libraries? Are they just inline style

TBH inline style is not essentially a bad thing. I mean Basecamp lead designer use it, we do it all the time with React components, and frankly that’s what we have been told not to do since day one. The real reason for that is it’s not maintainable, has high specificity and hard to override. Tachyons helps with 1/ consistent specificity 2/ consistent measure system - vertical rhythm. Once you have your design it’s perfectly fine to extract to components and style guide

Component extraction: looking at Tailwind, and the article,

Here’s how I’ve been doing it, with Less