Initial thoughts

[riqswe]

Hey bro,

I think this is an interesting idea idea indeed.

Initial thoughts:

• I can see this working as a webpack loader not only as a CLI tool
• Possible having a .atomifyrc to keep some of the settings
• It does need to generate some kind of document/styleguide as reference. CSS Stats is open source, maybe have a look to see how they do it
• We need reinforce a few things such as comments so we can generate the proper docs
• Rather give unique IDs we could use the modular approach like http://tachyons.io does by using the selector property name and value. For this we need have in place a measure system let's say from 1-7 where the 1 represents the min value and 7 the max i.e. .w7 = 100%
• However what happens if you use ten plus different max-width in your project?
• Media queries could be tricky but I think there are some possible solutions. See #2

Sorry for the long list. I'm on mobile, will break down this a bit better later.

✌️

[rafaelrinaldi]

@henriquea Thanks for your suggestions.

One thing to keep in mind is that this tool would allow you to write CSS the way you want and then perform optimizations on top of it. A lot of things you mention rely on a solid design foundation (such as type scale, color palette and so on) which is an ideal scenario. But this tool should also work if you don't follow any approach specifically. So the output would not look as human if you run it through a spaghetti CSS file with no standards in place. That's actually why I don't really care if we go with unique ids or something else, because it would be dynamically generated anyway and the tool would be able to diff it. Maybe using something like w100 would be better for debugging, but not really a problem.

[giuseppeg]

Hi @rafaelrinaldi I've been fiddling with the atomify idea as well – needless to say that I am excited to see a repo and someone else trying to do something similar to what I had in mind.

As I imagine it, a tool like atomify would produce a bunch of atomic classes to reduce redundancy. i.e.

.full-width {
   width: 100%;
}
.foo-bar {
  width: 100%;
  background-color: red;
}
/* becomes */
.width:\100\% { width: 100% }
.backgroundColor\:red { background-color: red }

and like in CSS Modules you'd get a map back:

{
  'full-width': ['width:100%'],
  'foo-bar': ['width:100%', 'backgroundColor:red']
}

The benefit of this technique vs creating unique classnames for .full-width and .foo-bar is that eventually many rulesets will share the atomic classes and the end result is a smaller CSS footprint.

More examples

If you end up opting for a similar solution, I'd be happy to be involved and help out – just ping me!