Great article!
Yangshun Tay
11

Definitely it has some cons as well. I have listed many in the article too, but here they are according to me:

  1. First of all, the looks of it. This isn’t a bad thing, but just something to get used to seeing in HTML.
  2. Initial learning of all the short classes for every property/value pair. (Though there is an auto-complete plugin for that too). Related to this, if the pull-request reviewer isn’t familiar with those classes, he might feel left-out.
  3. Some things might not be possible with ACSS at the moment. (Eg. CSS Grids, some advanced selectors possible with CSS).
  4. You’ll need to have templates/components in your app. Otherwise duplicating same set of classes every time might make you crazy.
  5. Because of it’s convention, classes which need to have spaces in their value, need to be put in ACSS config file. Eg Bd(1px solid red) is invalid.
  6. ACSS linter (https://github.com/roderickhsiao/eslint-plugin-atomic-css)is in very early stage, way to go till it becomes equivalent to something like stylelint.
  7. Changing classes while inspecting element from devtools isn’t that trivial. Because new classes you put might not be present in the already generated CSS file. There is Chrome extension for that also -> https://github.com/acss-io/acss-browser :)

That said, I feel all the above mentioned things are just minor restrictions and initial friction. They are so small compared to the huge problems it solves. Happy to answer any further questions.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.