Geez. Those selectors.. "<footer class="pv4 ph3 ph5-m ph6-l mid-gray">"

quaunaut · on May 20, 2016

It's definitely weird at first, but the aim of atomic CSS is to not have a CSS file that just grows and grows and grows.

This article(written by the creator of Tachyons) helps to explain the issue: http://mrmrs.io/writing/2016/03/24/scalable-css/

Where I work, we're using it on a new project and while it definitely requires a lot of learning(and just generally understanding CSS), it's faster to debug with, easier to take care of edge cases, and the total size for our app is incredibly small.

sdnguyen90 · on May 20, 2016

It is a bit weird to use at first but I highly recommend giving it a shot.

I've built some complex UI's with the same class name styles (Basscss). 99% of the time I'm reusing classes and I don't have to write anything custom.

Prototyping is great once you memorize the classnames.. Just write HTML, no need to switch to CSS files.

If you're working with global styles this is by far the most scalable CSS methodology as of right now IMO.

fn1 · on May 21, 2016

"...once you memorize the classnames"

I don't know which editor you are using, but for TextMate I've written a 20 line-plugin that greps the tachyons.css file and gives me code-completion.

http://postimg.org/image/tq038rwqp/

ryanto · on May 21, 2016

As others have said it's very strange at first. My co-worker introduced it to me a little over a month ago and I remember thinking "how is this maintainable?". After a few hours it started to make sense and now I can't imagine going back to BEM.

Being able to design UIs without opening a single CSS file has made HTML pretty fun and I've found I'm much better at componentizing the right things.