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.
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.
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.
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— Ido Shamun (@idoshamun) September 1, 2020
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/
