Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 26, 2022 05:30 pm GMT

The 3 Short December CSS tips

Hey folks!

Id like to talk about why you should define what you need to define, the poor habit to define display: block for pseudo-elements ::before and ::after, what to better between align-items: center and margin: auto.

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, Tatiana Ten, Konstantinos Kapenekakis. I didnt write this article without their support.

Define only what you need to define

Code#1 defines background: tomato via the .example selector. So we have 9 implicitly defined background properties. Code#2 defines the same but with background-color: tomato without defining implicitly properties

Theres the perfect trick to write scalable CSS that wont make you suffer. Dont define what is unnecessary. If you need to define a background color make it with background-color and not with background

display: grid gets rid of the habit of defining display: block

Code#1 defines display: block for the ::before pseudo-element via the .parent::before selector when display: grid is defined to the parent via the .parent selector. Code#2 defines the same but without defining display: block for the ::before pseudo-element because browsers make it themselves

Are you used to defining display: block for ::before or ::after? Folks, there is no need to make it if you define display: grid or display: inline-grid to the parent. Browsers make it themselves

align-items: center or margin: auto. Whats better?

Code#1 demonstrates using align-items: center. As a result the top part of the dialog might be hidden if the user display height will be less than the element height

Code#2 demonstrates using margin: auto. As a result the top part of the dialog won't be hidden
Warning! Using justify-content or align-items might lead to losing data. Its why I cant close a dialog. margin: auto is the best alternative


Original Link: https://dev.to/melnik909/the-3-short-december-css-tips-1m31

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To