Hey Justin, thanks for responding! I’m glad you got something out of my article.

The main difference between Bootstrap/Foundation (or any other full framework for that matter) and functional CSS (AKA Atomic CSS or Utility-first CSS) is that the full frameworks make a lot of decisions for you. Adding the Bootstrap ‘btn’ class to a link applies about 450 lines of CSS. You don’t have a lot of control over what your product looks like.

With a functional CSS library like Tachyons, all of the classes are essentially utility classes (yes, Bootstrap has some of these too, along with all the other stuff). There’s no ‘btn’ class in Tachyons. So you get to decide what your buttons look like. You can compose these utility classes and get the visual effect you want.

And if you want to have 2 buttons that are similar, but say one is a pill shape and the other is a rounded rectangle, you can simply change the Tachyons classes applied to each button. But something like that would be much harder to do with Bootstrap, as you’d need to write custom CSS and potentially override some properties.

Just to clarify what I mean here and make sure we’re both on the same page, the single responsibility thing means that each class does 1 thing. And that 1 thing is a single visual effect. It doesn’t mean that the class styles my button (which could be considered 1 thing).

For example, the ‘fw7’ class applies ‘font-weight: 700’. And that’s it. The ‘no-underline’ class applies ‘textDecoration: none;’. Nothing else.

Does that answer your question?

Thanks,
Harry