DEV Community

Cover image for My 5 Practical CSS Tips
Ido Shamun for daily.dev

Posted on • Originally published at daily.dev

My 5 Practical CSS Tips

This is going to be a short post with my best CSS tips. I'll do my best to share references for every tip so you can read more and get a better understanding.

rem

When you use pixels, you ignore the user's browser settings and break your website accessibility. If the user chooses to change its default font-size, by using pixels you override this setting. Enter rem! rem is a CSS unit to set an property relative to the HTML root font-size (16px by default). Using rem makes your site responsive to font-size changes and aligned to the user's settings.

References:
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/

Nesting

Nesting is still not an official CSS feature (it's in discussion) but already very common. It's available in frameworks such as PostCSS, and Sass.
By utilizing nested selectors, you improve the readability and maintainability of your CSS code. It eliminates the need to duplicate classes, ids, and selectors all around.

References:
https://github.com/postcss/postcss-nested
https://drafts.csswg.org/css-nesting/#:~:text=3.1.-,Direct%20Nesting,compound%20selector%20of%20the%20selector.

content-visibility

content-visibility is a new CSS property that boosts your rendering performance. You can tell your browser to lazy render an element. The browser will skip the rendering which includes both layout and painting until it's necessary. You can set content-visibility: auto on any below the fold elements for an immediate performance boost.

References:
https://web.dev/content-visibility/

Using padding-top to keep aspect ratio

It might be surprising by padding in percentages is calculated based on the parent element's width. Yes, yes, even padding-top and padding-bottom. This is super weird by it's handy if you want to keep an aspect ratio. Why? For example when using images. It's a best practice to set the size of an element that is dependent on a large payload, such as an image. It prevents annoying changes in layout and makes it easier to design responsive components.

References:
https://css-tricks.com/aspect-ratio-boxes/

Use a framework

PostCSS (my favorite), Sass, no matter what just use one. They usually have a built-in prefixer to add browser compatibility at build-time. And they have plugins that will make CSS development a bit easier.

References:
https://postcss.org/
https://sass-lang.com/


Daily delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Daily Poster

Top comments (6)

Collapse
 
maxart2501 profile image
Massimo Artizzu

Using padding-top to keep aspect ratio

This is a glorious tip, but since you've mentioned the quite recent content-visibility, also aspect-ratio is very recent (support in Chrome 79 and Firefox 71). If only we had that in, like, 2003...

Use a framework

I wouldn't call PostCSS and SASS "frameworks". I'd say they're more like "processors", "compilers" or something like that. They allow you to use syntaxes that aren't in CSS, basically superpowering the language.
I'd call Bootstrap a CSS framework. Let me know if you agree.

Collapse
 
idoshamun profile image
Ido Shamun

You're right about aspect-ratio, no doubt. I'm just so used to padding-top but aspect-ratio is another way to achieve the same thing.

I agree processors are much a better wording for them. Thanks for clarifying.

Collapse
 
jabo profile image
Jabo

Damn, I didn't even know that content-visibility exists.

Collapse
 
idoshamun profile image
Ido Shamun

Now you do! Enjoy ✨

Collapse
 
dailydevtips1 profile image
Chris Bongers

Content-visibility is so promising, need to actually start testing it out.

Collapse
 
idoshamun profile image
Ido Shamun

Yes, it's one of the most hyped CSS properties right now πŸ¦„