Media queries

[chrisjames-work]

My first immediate concern is how do you handle media queries?

e.g.

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

  @media (min-width: 800px) {
    width: 50%;
  }
}

.full-width {
  width: 100%;

  @media (min-width: 800px) {
    width: 90%;
  }
}

.half-width {
  width: 50%;

  @media (min-width: 800px) {
    width: 90%;
  }
}

I guess you could compile to something like:

._15QFk {
  width: 100% !important;
}

._15QFk_800 {
  @media (min-width: 800px) {
    width: 90%;
  }
}

etc

But yeah, media queries...

[riqswe]

Media queries could sit at the global level e.g.

.w7 { width: 100%; }
.w3 { width: 50%; } 

@media (min-width: 800px) {
  .w7 { width: 90%; }
  .w3 { width: 90%; }
}

Rather use unique IDs I think we should use the CSS property name and value in the same way http://tachyons.io does?

Anyway, I'll create a separated issue with some thoughts.

H.