转载说明：原创不易，未经授权，谢绝任何形式的转载
当开发 Web 应用时，良好的用户体验是至关重要的。通过使用正确的 CSS 属性和值，我们可以创建易于使用和功能强大的应用程序。然而，在实践中，开发人员经常遇到 CSS 相关的问题，这些问题会导致页面布局混乱、滚动不流畅或者使用户难以理解内容。本文将介绍一些 CSS 最佳实践，帮助您避免这些常见问题，提高 Web 应用的用户体验。
1、"scroll-behavior"属性可能会导致用户头晕或头痛。
scroll-behavior 属性控制网页滚动行为的平滑程度。当设置为 scroll 时，页面将以传统的方式滚动，用户可以看到内容在屏幕上移动。当设置为 smooth 时，页面将更平滑和逐渐滚动，给人以内容在屏幕上滑行或漂浮的印象。
对于一些用户，尤其是对运动敏感的用户来说，smooth 设置可能会导致头晕或头痛。这是因为平滑滚动可以产生微妙的运动，对一些人的大脑来说处理起来可能会很困难，从而导致不适或甚至晕动症。
为了解决这个问题，引入了 prefers-reduced-motion 媒体功能。该功能允许用户在浏览器设置中指定他们偏好减少运动，Web 开发人员可以根据此功能调整其页面的行为。如果用户启用了 prefers-reduced-motion，则 scroll-behavior 的 smooth 设置将被忽略，并且页面将以传统方式滚动，以避免引起不适。
总之，如果不考虑 prefers-reduced-motion 媒体功能，使用 scroll-behavior 属性的 smooth 设置可能会对一些对运动敏感的用户造成不适。重要的是要以体贴所有用户的需求和偏好的方式使用此属性。
2、有了H5标签中的 hidden 属性，尽量少用 display: none
hidden 属性是一个标准的 HTML 属性，可以添加到元素中以指示它应该从视图中隐藏。当 hidden 属性出现在元素上时，浏览器会自动应用 display: none 到该元素，有效地将其隐藏在视图中。
在引入 hidden 属性之前，开发人员通常会使用 display: none 来隐藏页面上的元素。然而，这种方法可能有一些缺点。例如，如果开发人员使用 display:none 来隐藏一个元素，然后稍后尝试使用 JavaScript 再次显示它，他们必须首先将 display 属性更改回其原始值（例如 display:block）。这可能很麻烦且容易出错。
相比之下，隐藏属性简化了这个过程。当元素具有隐藏属性时，浏览器会根据需要负责应用和删除适当的显示值。因此，如果开发人员想要根据某些条件（例如单击按钮）显示或隐藏元素，他们可以简单地切换隐藏属性的存在，而不是直接修改显示属性。 意味着开发人员可以在其 CSS 规则中使用 :not() 伪类来排除具有隐藏属性的元素。
例如，如果开发人员想要将特定样式应用于所有未隐藏的元素，他们可以使用如下规则：
:not([hidden]) {
/* CSS styles for elements that are not hidden */
} 以下是一个使用使用 hidden 属性根据按钮点击显示或隐藏元素的示例，帮助你更好的理解：
<button id="toggleButton">切换元素可见性</button>
<div id="elementToToggle" hidden>
这个元素默认情况下将被隐藏，但是可以通过按钮点击进行显示/隐藏。
</div> const toggleButton = document.getElementById('toggleButton');
const elementToToggle = document.getElementById('elementToToggle');
toggleButton.addEventListener('click', () => {
elementToToggle.hidden = !elementToToggle.hidden;
}); 这个代码示例中，我们首先获取了用于切换元素可见性的按钮和要进行显示/隐藏的元素。然后，我们为按钮添加了一个点击事件监听器，当按钮被点击时，我们使用 hidden 属性来控制元素的可见性。每次按钮被点击时，hidden 属性的值都会被取反，从而切换元素的可见性。
3、不要使用 resize: none
resize CSS 属性用于控制用户调整元素大小的能力。默认情况下，textarea 元素可以被用户调整大小，这在某些情况下可能很有用，但如果您想保持固定的布局，则可能会成为问题。（比如手机等触屏设备，造成不好的用户体验）
过去，开发人员经常使用 resize: none 属性值完全禁用 textarea 元素的调整大小功能。然而，这可能会导致用户感到不适，因为他们可能想要调整元素以获得更好的可读性或可用性。
更好的方法是使用 resize: vertical 属性值，它允许用户仅在垂直方向（即上下方向）调整 textarea 元素的大小。这可以是在给用户控制布局和维护固定设计之间的一个很好的平衡点。
为了限制 textarea 元素的高度并防止无限扩展，您可以在其上设置 max-height 属性。例如，如果您想将 textarea 的高度限制为200像素，则可以使用以下 CSS：
textarea {
resize: vertical;
max-height: 200px;
}
这将允许用户垂直调整 textarea 元素的大小，但会防止其超出200像素的高度。
总结
当开发 Web 应用时，使用正确的 CSS 属性和值可以显著提高用户体验并减少问题和不必要的麻烦。在本文中，我们讨论了一些有关 CSS 的最佳实践，包括使用 hidden 属性来隐藏元素、使用 resize: vertical 属性值来限制 textarea 元素的高度调整以及使用 scroll-behavior 属性来平滑地滚动页面。通过遵循这些最佳实践，您可以创建更具可用性和易用性的 Web 应用程序，从而提供更好的用户体验。
今天的CSS小知识就分享到这里，希望对你有所帮助，感谢你的阅读，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。
https://medium.com/@stasmelnikov/the-3-short-september-css-tips-2aae8ec85bfa
作者：Stas Melnikov
非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正