当我们谈论网页开发时，必不可少的要谈论 CSS，因为它定义了整个应用程序的架构和设计。当涉及到 CSS 时，同样的效果可能会有多种实现方式：CSS3 的新特性让以前通过 Javascript 实现的动画和效果，可以用 CSS 的方式实现。
然而，我们不能滥用语言赋予我们的自由。Web 应用程序允许我们以想要的方式格式化样式，但是好的习惯可以让一切变得不同。
正确的使用，能够避免让最有经验的 UI 程序员都头疼的陷阱。本文将介绍 7 个应该避免的常见 CSS 错误，并给出更优雅、专业的方式解决方案！
1. 所有的浏览器都是可用的
兼容所有的浏览器对于你的网站是非常重要的，至少兼容市场上的主流浏览器。在 CSS 中尊重浏览器的特性就是尊重你的最终用户
但是如何知道代码是否兼容所有浏览器呢？其中一个可能比较有趣的解决方案是，通过 W3C’s own Markup Service 验证你的网站。此在线工具中，你的网站将由规范接口标准验证。之后需要做的是调整你的脚本使其跨浏览器。
2. 不要被内联 CSS 诱惑
最常见且最危险的其中一个错误就是内联 CSS。当尝试一个新的结构或者想解决一些紧急问题时在 HTML 标签中直接写样式代码非常的方便和常见，但是发布产品时需要非常的小心！
今天的“快”可能在将来会变得非常耗时。对于用户，通过网络访问更多的代码会造成性能有所下降，导致页面呈现的更慢。对于程序员，想象下需要调整整个视觉效果的维护：必须逐个获取和修改内联 CSS。最好让它们远离网站！
3. 表格: 仅需要时使用！
不幸的是，基于表格开发的企业网站仍然很常见。加载这些元素不仅开销更大，而且还有许多的限制，图片通常需要裁剪以适应布局划分，一些布局属性元素（例如对子元素 <td> 使用 height:100%），并且使开发和维护极其混乱和困难。
如果你的目的不是明确的网格数据，在绝大多数情况下都有更好的方式实现你的布局，比如 flexbox。
4. 小心使用 !important
所有的 CSS 功能都是有用的，你需要了解的是何时以及如何使用它们。 !important 其中一个我们必须非常小心使用的功能。
CSS 选择器是具有权重的，id 选择器权重高于 class 选择器，内联 CSS 的权重更高。可以在这里了解更多选择器权重的信息。
使用 !importang 时，其他地方定义的都会被忽视。你必须非常小心，特别是在多个元素中存在的类中使用 !important，不要浪费几个小时去想为什么布局不生效。
5. 不要只使用绝对单位
通常可以找到一些在 CSS 中丢失的数据。虽然可能需要固定的"px"属性，但是高效优雅的跨平台设计应尽可能的使用百分比，无论是宽度，高度，边距还是更复杂的属性。
另外，你可以使用如 Less 和 Sass 这样的预处理器，定义尺寸和颜色变量，更轻松的使用 @media 创建响应式布局，保持标准化并且是改变容易。对于排版你可以使用 em 或者 rem 代替 px 或者 pt 来定义相对的字体大小。
6. 尊重 HTML 标签
CSS 样式加上 HTML 标签是可以的，但不可取。创建更多的 CSS 类比将标签附加到 CSS 更好。这使得代码更加的独立，并且开发人员可以更加自由的改变 HTML 而不需要破坏页面布局。
7. 添加注释
干净的代码和正确的语义，就已经为 CSS 增加了很多的安全性和清晰度。但是还没有完呢！即使是经验丰富的开发人员也害怕面对旧代码。
CSS 看似直观但需要细心。为了避免面对困难，最好注释每个 CSS 样式块的作用。这样包括作者在内任何人都可以了解其完成的功能。在开发过程中可以将代码分成几个文件，这样更容易的了解每个元素的应用效果。
值得一提的是，即使是有语义且注释良好的代码，还是不建议直接放在生产环境中，因为文件体积太大了，理想情况下是 minify 尽可能的在加载上获得更好的性能（即使是从云端提供资源）。
总结
今天就到此为止。你觉得这些建议怎么样呢？以上错误你有发生过吗？你能想到 CSS 中其他的常见性错误吗？请在下方评论，帮助其他开发人员构建更好的网站。
感谢阅读 👋
