3 个易于应用的 CSS 改进，您现在就可以在项目中使用

CSS 可能很杂乱，通常是因为缺乏约定俗成的规则或深思熟虑的执行系统。正因如此，对于那些可能因代码臃肿而令人窒息的项目来说，轻松且毫不费力的修复无疑是一股清风。

字体加载

如果您的项目是在 2019 年 5 月之前创建的，则可能没有为 Google 字体设置 font-display 属性。字体显示定义了字体的加载方式（这里有一个模拟演示）。对我来说， swap最有效，因为它可以确保在实际字体仍在下载时立即加载文本内容。其他值包括none、block、optional和fallback。

最简单的方法是在导入链接的末尾添加&display=swap。如下所示：

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');


或者如果您自己托管字体：

@font-face{
font-family: ‘Roboto’;
font-display: swap;
}


顺畅滚动

带有可滚动内容的 div 是网站常用的元素，它可以在不占用大量屏幕空间的情况下管理较大的内容。然而，你可能会注意到，在 iOS 系统中，滚动浏览这些 div 可能会感觉有点卡顿，而且响应有点迟钝。

您可以添加 -webkit-overflow-scrolling 属性来改进它。

.scrollable-div{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}


空元素

对于通过 tinyMCE 生成内容的组件（例如文章正文内容），我总是遇到编辑者不经意地添加不必要的换行符的问题。

.article p:empty { display: none; }


在这种情况下，我针对的是文章中的空白段落。这样，我可以轻松地删除它们，同时保持网站的视觉规则。

你还有其他适用于现有项目的简单 CSS 技巧吗？请在下方评论区分享。我洗耳恭听！

我还会分享如何在开始项目前轻松应用 CSS。感兴趣的话，请继续关注。