CSS isn't magic

Home
Archive
About
animation without prefers-reduced-motion might lead to dizziness or headache
Motion animation might lead users with vestibular disorders to experience dizziness.
 • 
Stas Melnikov
Please, stop using resize: none
We used to use resize: none to disable textarea resizing.
 • 
Stas Melnikov
The hidden attribute removes the need to define display: none
We don't need to define display: none by hand when creating the elements that can be shown or hidden.
 • 
Stas Melnikov
scroll-behavior: scroll can lead to dizziness or headache
Please, wrap it in the prefers-reduced-motion media feature.
 • 
Stas Melnikov

May 2025

We don't need to use 0 anymore to define margins and paddings
I had to make a not logical thing, i.e.
 • 
Stas Melnikov
position: absolute frees us from using display: block
Are you used to defining display: block for ::before or ::after?
 • 
Stas Melnikov
justify-content: center and align-items: center leads to loss of elements
Warning!
 • 
Stas Melnikov
The gap property smashes margins!
Stop, stop, stop defining margins to set the gap between a few elements.
 • 
Stas Melnikov

April 2025

Let's reduce the combination of the width and max-width properties to one
The min() function allows us to define values, and browsers will choose the smallest value from them.
 • 
Stas Melnikov
Reduce top: 0; right: 0; bottom: 0; left: 0 to one line!
Did you use the top, right, bottom and left properties to stretch elements over the full width and height of the parent?
 • 
Stas Melnikov
When is using display: block for ::before or ::after unnecessary?
Folks, did you define display: flex or display: inline-flex to the parent?
 • 
Stas Melnikov
Stop to use transform functions where they aren't needed
A lot of time we have to use transform functions together even if we need to change only one.
 • 
Stas Melnikov
© 2025 Stas Melnikov
Privacy ∙ Terms ∙ Collection notice
Start writingGet the app
Substack is the home for great culture