打破 CSS 污名：我的分步 CSS 备忘单。

🔥 别忘了在 Twitter 上关注我！我们一起交流吧！如果你喜欢这篇文章，欢迎关注我，我很快会发布更多内容（每周至少一篇）！

CSS 并不难，但有时会让人非常沮丧；你常常很难找到适合自己目标的“正确”方法。对我来说，我常常觉得不应该花太多心思去设计样式，但事实证明，使用特定的方法论非常有效。我推荐遵循以下几个步骤，还有很多资源，我相信你会觉得它们很有用。

我希望本文能帮助您组织编写优秀 CSS 的逐步过程。

第一步：准备、主体和：root

不知道:root是什么？我也不知道。看看CSS-tricks 的这篇文章，他们解释得很清楚。
第一步是准备好 CSS 样式，在<body>元素和:root选择器中设置任何你想要的样式。你可能想用以下样式设置一些：

注意：定义字体大小:root允许您设置em测量标准（因此您可以将其设置为 16px，并且 1em 将保证为 16px）

容器类应该是用来存储整个应用程序的 div。在这里，我定义：

在父 div 内部，为应用本身添加更多 div。想要使用不伤脑筋的网格系统吗？看看bulma 吧。

在此步骤之前，您基本上已经按照每个步骤操作了，并且可以轻松地设置基础样式。现在，您需要掌控全局。我无法确定您的应用内包含哪些元素，但我可以为您提供一些最佳实践：

确保练习非常清晰的造型
你的 CSS 可能无法在所有浏览器上运行！如果你还在纠结 CSS 哪些功能可以用，哪些不能用，那就来看看这个神奇的应用程序吧。
ARIA 属性对视障人士（使用屏幕阅读器的用户）非常有用。点击此处查看一篇精彩文章。
偷师！使用 CSSscan 对学习 CSS 超级有用。如果你看到一个看起来很棒的表单，别害怕查看它的 CSS 代码，自己动手试试。选择你喜欢的 CSS，修改一下，让它变成你自己的，然后为自己节省了时间而感到自豪。不过，也别太过火（这篇文章真的很有趣，快去读一读！）
动画就是动画a w e s o m e，只要不过度使用，它就能让事情变得更清晰。所以，好好利用它吧！这里有一篇关于动画的文章——不过我也会写一些关于 CSS 动画的文章，并介绍一些有趣的具体用法。
框架很有趣，但别忘了学习基础知识！很容易沉迷于使用Bootstrap、TailwindCSS、Bulma或任何其他当下流行的框架，但学习如何打造自己的风格至关重要。这些框架只是暂时的。真正的风格和设计技能才是永恒的，并且会永远让你受益。而且，如果有人查你使用的是什么框架，却发现你根本没用，那你看起来真是太酷了 😎⛱
渐变和斑点
CSSreference和HTMLreference