与 CSS 建立良好的关系

“CSS 糟透了！”、“我该如何提高 CSS 水平？”、“我被 CSS 的小问题困扰了很久”。这些说法是否符合你对 CSS 的看法？如果是，请继续阅读，我将分享一些关于如何提升你与 CSS 关系的个人技巧。我保证我会简短地分享，不会让你感到无聊。首先，让我先讲讲我与 CSS 的爱情故事。

我刚开始编程的时候，跟 CSS 的关系非常糟糕。我总是喜欢先处理 JavaScript，让应用能正常运行，然后再设计样式。由于我跟 CSS 的关系不好，我觉得自己更像是一个 JavaScript 开发者，而不是前端开发者。现在情况已经改变了，我不再这么看自己了。可以肯定地说，我热爱 CSS（实际上，非常热爱）。现在开发应用时，我更喜欢先设计样式，然后再实现任何逻辑。

这个故事的寓意是：任何人都可以精通 CSS。如果你现在觉得 CSS 很难，只要你采取正确的方法，就能做得更好。

因此，以下列出了您可以做的一些事情来提高 CSS 水平（无先后顺序）。

• 学习 CSS
• 抛弃图书馆
• 学习调试代码
• 阅读其他人的代码
• 正确命名你的课程
• 实践

让我们简要讨论一下每一个。

学习并理解 CSS
CSS 的语法很简单。也就是说，你不需要写很多行代码就能让元素的背景颜色变成绿色。正因为其简洁，很多人认为它很容易上手。

是的，如果你真正了解并理解 CSS 规则以及样式的应用方式，那么使用 CSS 就很容易。如果你知道哪个 CSS 属性可以用于什么用途，那么使用 CSS 就很容易。如果你理解 CSS 的特殊性，并且知道这可能是你的 CSS 规则不适用于某些元素的原因，那么使用 CSS 就很容易。如果你了解 CSS，那么调试你的样式就很容易。

话虽如此，要想精通 CSS，学习 CSS 至关重要。学习 CSS 的基础知识，例如 CSS 盒子模型、内边距、外边距、优先级、定位等。然后学习更高级的主题，例如 CSS 过渡、动画、弹性框、网格等。阅读 CSS 书籍，参加 CSS 课程，定期阅读 CSS 文章，订阅 CSS 新闻简报，并采取更多措施来真正学习 CSS。这让我们想到了另一件能真正帮助你精通 CSS 的事情。

抛弃 CSS 库
这个建议是我朋友给我的，我相信这是我收到的最好的建议之一。它让我回过头来认真学习 CSS。

所以，抛弃 Bootstrap、Bulma 以及你熟悉的所有其他库，在项目中使用原生 CSS。好吧，并非完全如此。有时，它们确实能让我们的工作效率更高。我的意思是，在学习使用它们之前，先学习 CSS 非常重要。在不了解库底层工作原理的情况下学习如何使用它们，就像在不了解 JavaScript 的情况下学习 React 一样。这可能会让你的生活在某些时候变得痛苦不堪。

如果你想更好地掌握 CSS，最好尝试不用这些库。这样，你就能更深入地理解 CSS 及其工作原理。

为了更灵活地使用这些库，请尝试研究它们的代码、它们所采用的样式，并尝试调整这些样式。这样，它们会对你更有帮助。

学习调试代码
浏览器中的检查器对前端开发人员来说是一个福音。学习如何使用它。学习使用浏览器的检查器调试代码，将使你的调试更轻松、更快捷。

遇到 bug 时，请打开检查器，找出应用了哪些 CSS 规则。浏览器的检查器工具功能强大，您可以查看所有应用的 CSS 规则及其应用顺序，还可以编辑 HTML，为任何元素添加样式，甚至伪类。与其先在 IDE 上修复，不如先在浏览器上尝试，看看是否有效。然后返回 IDE 进行修复。这样可以节省大量时间。

阅读别人的代码
是的，你应该这样做。Codepen 上有很多漂亮的代码， Awwwards上也有很多漂亮的网站。看看他们的样式表，试着理解是什么让网站看起来很漂亮。如果你遇到一个你以前没处理过的布局，检查一下元素，找出它们使用的样式。

一开始可能不太容易，尤其是刚开始学习 CSS 的时候，但相信我，情况会越来越好。试着通过查看你访问的每个网站的代码，至少学习一项新知识。随着时间的推移，这些小知识会逐渐积累，最终让你的 CSS 水平更高。

有时，当我在网站上看到一些我以前没做过的东西时，我会创建一个 Codepen 并尝试重新做一遍。最终，当我需要类似的东西时，我会访问这个 Codepen 并学习我之前做过的东西。这对我来说很有帮助。

学习正确命名
你的 CSS 类 正确命名 CSS 类可以节省你数小时的调试时间。它可以帮助你避免因类名相似而导致的错误。例如，命名一个类title可能看起来没问题，但这是你在 CSS 文件中唯一的标题。最好使用更具体的名称，例如post-title或card-title。

如果命名不够具体，可能很难追踪所有使用过的 CSS 类名。最终，你可能会因为使用了已经用过的类名而将不必要的样式应用到元素上。

遵循 BEM、SMACSS 或 OOCSS 等命名约定，可以简化类名的选择。即使你不想严格遵循，也要学习它们的原则，运用这些原则，并坚持一种模式。为了你自己，也为了将来可能维护你代码的人，这样做是值得的。

练习！练习！练习！
没有什么比练习更重要。当你尝试更多具有不同功能和布局的UI设计时，你会积累经验。你可能会遇到各种各样的问题，尤其是你以前从未做过的事情。然而，一旦你弄清楚了，以后处理类似的事情就会花费更少的时间。

坚持接受具有挑战性的 UI 设计并努力实践。这样，你就能更快地进步。

最后的话：
如果你在 StackOverflow、Codepen 或其他论坛上找到了任何 CSS 问题的解决方案，请找出它有效的原因。避免复制粘贴不必要的样式。它们可能是你以后遇到 bug 的根源。

不要被需要学习的内容数量吓到。CSS 会定期添加新功能。请确保先掌握基础知识，然后持续学习，提升你的知识水平。

这是包含有用 CSS 内容的网站链接。

W3Schools
MDN
A List Apart
CSS Tricks
CSS Weekly
Smashing Magazine
Bits of Code
CSS Wizardry
响应式设计周刊

就这样吧。希望我信守承诺，不会让你们感到无聊 ;)。欢迎分享一些帮助你提升 CSS 的个人技巧，以及任何你拥有的有用的 CSS 资源。

感谢您的阅读。:)