我的 5 个实用 CSS 技巧

雷姆

嵌套

内容可见性

使用 padding-top 保持纵横比

使用框架

这篇文章会简短地介绍我最棒的 CSS 技巧。我会尽力分享每个技巧的参考资料，以便你阅读更多内容并加深理解。

雷姆

使用像素会忽略用户的浏览器设置，从而破坏网站的可访问性。如果用户选择更改默认字体大小，使用像素会覆盖此设置。rem 来了！rem 是一个 CSS 单位，用于设置相对于 HTML 根字体大小（默认为 16px）的属性。使用 rem 可以让您的网站响应字体大小的变化并与用户的设置保持一致。

参考文献：
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/

嵌套

嵌套目前还不是 CSS 的官方功能（仍在讨论中），但已经非常常见。PostCSS 和 Sass 等框架都支持嵌套选择器。
使用嵌套选择器可以提高 CSS 代码的可读性和可维护性，无需重复使用类、ID 和选择器。

参考文献：
https://github.com/postcss/postcss-nested
https://drafts.c sswg.org/css-nesting/#:~:text=3.1.-,Direct%20Nesting,compound%20selector%20of%20the%20selector 。

内容可见性

content-visibility 是一个新的 CSS 属性，可以提升渲染性能。您可以让浏览器延迟渲染某个元素。浏览器会跳过渲染（包括布局和绘制），直到需要渲染时才进行。您可以设置content-visibility: auto任何非首屏元素，以立即提升性能。

参考文献：
https://web.dev/content-visibility/

使用 padding-top 保持纵横比

你可能会惊讶地发现，padding 的百分比是根据父元素的宽度计算的。没错，padding-top 和 padding-bottom 也是如此。这很奇怪，但如果你想保持宽高比，它却很方便。为什么？例如，在使用图像时。最佳实践是设置依赖于大负载（例如图像）的元素的大小。这可以避免布局中令人烦恼的变化，并使设计响应式组件更容易。

参考文献：
https://css-tricks.com/aspect-ratio-boxes/