DEV Community

Discussion on: Introducing nanostyled: CSS-in-JS without CSS-in-JS

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Do not misunderstand me, technically speaking i like your library :) but i think also it "force" two completely different worlds to work together.

Using shorthand properties sometime allow you to write more concise css and save some bytes. Following my example, where all padding values are different, you can't use the padding shorthand (padding: 16px 8px 34px 32px) because you have to separate each value into longhand form, and it will become:

.pt16 {
  padding-top: 16px;
}

.pr8 {
  padding-right: 8px;
}

.pb34 {
  padding-bottom: 34px;
}

.pl32 {
  padding-left: 32px;
}

Tons of classes to write where it could be just:

.Element {
  padding: 16px 8px 34px 32px;
}

This is just an example, think also animations handling. How many classes do you need to write this example with atomic CSS?

.fadeSlow {
  animation: fade 2s infinite cubic-bezier(0.4, 0, 1, 1);
}

.fadeFast {
  animation: fade 300ms 1 cubic-bezier(0.2, 1, 0, 1);
}

It become:

.anim-fade {
  animation-name: fade
}

.anim-2s {
  animation-duration: 2s;
}

.anim-300ms {
  animation-duration: 300ms;
}

.anim-iter-1 {
  animation-iteration-count: 1;
}


.anim-iter-loop {
  animation-iteration-count: infinite;
}

.anim-cubic-1 {
   animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.anim-cubic-2 {
   animation-timing-function: cubic-bezier(0.2, 1, 0, 1);
}

Why i don't like ACSS? Because in 2018, it can be mooore simple:

@keyframes fade {
   from { opacity: var(--startingOpacity, 0), pointer-events: none; }
   to   { opacity: var(--endingOpacity, 1), pointer-events: auto; }
}

/* One animation to handle in-out */
.FadeAnimation {
  --startingOpacity: 0;
  --endingOpacity: 1;
  --duration: 300ms;
  --iterations: 1;
  --easing: linear;
  --fill-mode: both;

  animation: fade var(--duration) var(--itarations) var(--easing);
  animation-fill-mode: var(--fill-mode);
}
Thread Thread
 
conorcussell profile image
Conor Cussell

I think it's important to remember that writing atomic css does not preclude you from writing your more simple example.

Clearly writing that animation as a bunch of separate atomic classes would be a bad idea, so in a real world app, you would write it exactly as you did. To me always writing functional css is not a hard and fast rule, just a good tool for preventing bloat and enabling consistency.