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.

Ido Shamun

@idoshamun

CSS tip 🦄
Use `rem` instead of `px`.
This takes into account the user's accessibility settings.
To convert `px` to `rem`, divide by 16.
For example:
8px = 0.5rem

07:01 AM - 01 Sep 2020

487 2108

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.