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.
Top comments (6)
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...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.
You're right about
aspect-ratio, no doubt. I'm just so used topadding-topbutaspect-ratiois another way to achieve the same thing.I agree processors are much a better wording for them. Thanks for clarifying.
Damn, I didn't even know that content-visibility exists.
Now you do! Enjoy ✨
Content-visibility is so promising, need to actually start testing it out.
Yes, it's one of the most hyped CSS properties right now 🦄