close icon
daily.dev platform

Discover more from daily.dev

Personalized news feed, dev communities and search, much better than whatโ€™s out there. Maybe ;)

Start reading - Free forever
Start reading - Free forever
Continue reading >

My 5 Practical CSS Tips

My 5 Practical CSS Tips
Author
 Ido Shamun
Related tags on daily.dev
toc
Table of contents
arrow-down

๐ŸŽฏ

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/

โ€

Why not level up your reading with

Stay up-to-date with the latest developer news every time you open a new tab.

Read more