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

View post

Replies for: This is called Atomic CSS not functional css and it being used years ago. This is an old approach that doesn’t works anymore with component based a...

Hi Mattia,

Thanks for your comment. You're right that this approach is also called Atomic CSS, and that it has been around for years.

I think you're also right that it was hard to make functional CSS work well with component-based styles.

But that's precisely the point of nanostyled: it makes it easy to use functional CSS in a component-based era.

As for your comment re: padding, I'm not sure I understand. Whether you can use shorthands or not just depends on whether your functional CSS framework has the necessary classes defined.

In tachyons, for example, this would work fine:

<Button padding="pa3">Padding all around</Button>
<Button padding="pv3 ph2">Lots of vertical padding, less horizontal padding></Button>
<Button padding="pl1">Tiny bit of left padding only</Button>

Mattia Astorino • Oct 2 '18 • 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);
}

Conor Cussell • Oct 10 '18

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.