CSS isn't magic

Home
Archive
About
New
Top
Discussion
We don't need to use 0 anymore to define margins and paddings
I had to make a not logical thing, i.e. use 0 to define margins, paddings with opposite sides šŸ˜’ Now margin-block, margin-inline, padding-blockā€¦
Ā ā€¢Ā 
Stas Melnikov
Does flex-basis effect on the element with position: absolute?
flex-basis stops to work after applying position: absolute or fixed to the element because it is out of flex context. The right answer ā€” 1rem šŸ’” ā¤ Thankā€¦
Ā ā€¢Ā 
Stas Melnikov
position: absolute frees us from using display: block
Are you used to defining display: block for ::before or ::after? Folks, there is no need to make it if you define position: absolute. Browsers make itā€¦
Ā ā€¢Ā 
Stas Melnikov
Create custom checkboxes and radio buttons with the attribute selector
The majority of developers define 2 classes for unchecked and checked states when creating custom checkboxes and radio buttons. Stop!šŸ¤šLet's use 1 classā€¦
Ā ā€¢Ā 
Stas Melnikov
April 2023
Is the element with position: absolute always positioned at the edge?
Browsers save the start position of the element after applying position: absolute if we don't define coordinates using the top, right, bottom, left andā€¦
Ā ā€¢Ā 
Stas Melnikov
justify-content: space-between leads to weird display of items
Do you use justify-content: space-between to distribute the spacing between items evenly? Then you should know it works weird when the items count inā€¦
Ā ā€¢Ā 
Stas Melnikov
Use the power of CSS inheritance when defining line-height
Folks, I messed up. I forgot I can use CSS inheritance and add line-height to <body> instead of adding it to <p>, <h*>, <ul>, et al. separately šŸ˜‰ ā¤ā€¦
Ā ā€¢Ā 
Stas Melnikov
justify-content: center and align-items: center leads to data loss
Warning! Using justify-content or align-items might lead to losing data. It's why I can't close a dialog. margin: auto is the best alternative šŸ˜‰ ā¤ā€¦
Ā ā€¢Ā 
Stas Melnikov
March 2023
The gap property smashes margins!
Stop, stop, stop defining margins to set the gap between a few elements. gap helps to make it in one rule šŸ˜Ž ā¤ Thank you so much, my sponsors: Benā€¦
Ā ā€¢Ā 
Stas Melnikov
1
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. How can it be used? Define the width and max-widthā€¦
Ā ā€¢Ā 
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? šŸ¤” Reduce it to one line withā€¦
Ā ā€¢Ā 
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? Yeap? Stop defining display: block for ::before or ::after. Browsers make itā€¦
Ā ā€¢Ā 
Stas Melnikov
Ā© 2023 Stas Melnikov
Privacy āˆ™ Terms āˆ™ Collection notice
Start WritingGet the app
SubstackĀ is the home for great writing