DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Stas Melnikov
Stas Melnikov

Posted on • Updated on

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;
}
Enter fullscreen mode Exit fullscreen mode

instead you can use that

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

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;
}
Enter fullscreen mode Exit fullscreen mode

instead you can use that

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

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");
}
Enter fullscreen mode Exit fullscreen mode

instead you can use that

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

Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another β€œCoder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.