search

rafaelrinaldi / atomify

Automatically atomify your CSS (draft)
32 stars 1 forks source link

Initial thoughts² #5

Open filipelinhares opened 8 years ago

filipelinhares commented 8 years ago

I see as a very good tool for code refactoring. Use it in a code that does not use css atomic but will use, would be very handy.

Is a build tool a good way to approach this?

Yes, would be great to have a tool to do it.

Have some options that I think would be nice to have:

We can group related properties in section (with comments) or different files.

/* atomic/layout.css */

.fl { float: left; }
.db { display: block; }

or:

/* atomic/float.css */

.fl { float: left; }
.fr { float: right; }

How to handle media queries?

The input:

.container {
  width: 100%;
  padding: 3rem;
}

.full-width {
  width: 100%;
}

@media (min-width: 60em) {
  .container {
    width: 90%;
  }

  .full-width {
    width: 90%;
  }
}

The output:

.container {
  padding: 3rem;
}

.w100 {
  width: 100%;
}

@media (min-width: 60em) {
  .m60-w90 {
    width: 90%;
  }
}

How to sync dev vs. prod markup?

I think atomify don't need to care about markup.

Related tools

How does other projects are dealing with the atomic CSS approach?

rafaelrinaldi commented 8 years ago

@filipelinhares Thanks for your suggestions! I have a few notes:

  1. Don't really get how you would solve media queries?
  2. Regarding atomify being a build tool, I think the first implementation would be a simple CLI tool that you can plug and play into your existing workflow (shout out to Unix) but we can definitely think of other options in the future (such as loaders, etc)
  3. acss is rad, totally forgot about it!
filipelinhares commented 8 years ago

Hey @rafaelrinaldi, sorry for the delay to answer.

  1. I updated my previous comment.
  2. Yes, I agree. Maybe a configuration file (.atomifyrc) in a second step.