The 3 Short November CSS tips

Hey folks!

I'd like to talk about why we should be careful with the animation property, in which cases you can use :not([class]) and why the background-color property is useful.
 
But before embarking on reading I leave the link on my Substack newsletter about CSS. If you wanna read more tips you know what to make 😎

Also, thank you so much, my sponsors: Ben Rinehart, Jesse Willard, Tatiana Ten, Konstantinos Kapenekakis. I didn't write this article without their support.

The animation property without the prefers-reduced-motion media feature can lead to dizziness or headache

Motion animation might lead to users with vestibular disorders experience dizziness and headache😩So we should wrap it in prefers-reduced-motion. It’ll help users avoid problems if they disabled animations in OS settings💡

don't make that

.example {
  animation: zoomIn 1s;
}

instead you can use that

@media (prefers-reduced-motion: no-preference) {
  .example {
    animation: zoomIn 1s;
  }
}

What does :not([class]) make useful?

How do you define basic typography styles? If you set styles via the type selector and reset via class I’ll offer to make it without resetting. Just use :not([class]) 😉

don't make that

li:not(:first-child) {
  margin-block-start: 1rem;
}

.list__iten {
  margin-block-start: 0;
}

instead you can use that

li:not([class]):not(:first-child) {
  margin-block-start: 1rem;
}

background-color doesn’t allow controls merge with the white screen

I’m angry when controls merge with a white screen before loading pictures. Uh uh, why don’t you show me them?😡It’s easy to add background-color if you use background-image. I’ll use the app without waiting of loading pictures🙂

don't make that

.hero {
  background-image: url("hero.jpg");
}

instead you can use that

.hero {
  background-image: url("hero.jpg");
  background-color: #ff6347;
}