大家好，我是耍玩志，今天带来一篇JoseGranja的文章，希望对大家有所帮助。文字意见，仅供参与，非标准答案。正如我们今天所知，CSS语言是网络的重要组成部分。它使我们能够绘制元素在屏幕、网页或其他媒体上的显示方式。它简单、强大且具有声明性。我们可以很容易地实现复杂的东西，比如暗/亮模式。但是，它存在许多误解和错误使用。这些将CSS标记变成复杂的不可读和不可扩展的代码。我们怎样才能防止这种情况发生？通过遵循最佳实践避免最常见的错误。在本文中，我们将总结5个最常见的错误以及如何避免它们。1.没有预先设计或思考，立即去做。这样可能会更快的完成任务，也让我们有速度感和成就感。然而，从长远来看，这可能会产生相反的效果。在编写代码之前，您必须想清楚。我们将采用什么方法来设计组件？我们想要原子地构建我们的组件吗？我们要创建一个可组合的实用程序系统吗？我们想要一个已经内置的UI库吗？我们希望我们的CSS是全局作用域的还是组件作用域的？有一个明确的目标将有助于我们选择最好的工具。这将使我们免于冗余和违反DRY。有许多有效的方法来设计应用程序。最常见的无效是即兴创作。我们的代码必须是可预测的、易于扩展和维护的。看例子：/*?处处添加离散值*/.card{color:#edb361;background-color:#274530;padding:1rem;}/*?定义基于主题的属性*/:root{--primary-bg-color:#274530;--accent-text-color:#edb361;--spacing-unit:0.5;}.card{color:var(--accent-text-color);background-color:var(--primary-bg-color);padding:calc(var(--spacing-unit)*2rem);}在上面的例子中我们可以看到，当使用CSS变量进行主题化时，一切都变得可读和清晰。第一个.card定义看起来完全是随机的，这个组件不容易扩展。2.CSSCodeSmellsCodeSmell的中文翻译一般是“代码味道”，或者“代码味道”，是代码某处出现错误的提示。开发者可以利用这种气味（smell）在代码中追查。问题。代码味道不是错误。它们也不会干扰系统的正常运行。它们只是使我们的代码更难阅读和维护的不良做法。在这里，一些最常见的以及如何克服它们：::表示法在伪元素和伪类中使用::表示法是很常见的。这是旧CSS规范的一部分，浏览器继续支持它作为后备。然而，我们应该在像::before,::after,::frist-line...这样的伪元素中使用::并且在像:link,:visited,:first-child这样的伪类中使用:这很流行使用字符串连接类使用Sass预处理器来帮助我们的CSS代码库。有时在尝试DRY时，我们通过连接&运算符来创建类。.card{border:0.5solidrem#fff;/*?failedattempttobedry*/&-selected{border-color:#000;}}似乎没有问题，直到开发人员尝试在代码库中搜索.card-selected类.开发人员将很难找到此类。不恰当地使用缩写CSS速记是非常好的，可以让我们避免过于冗长的代码。但是，有时我们不会故意使用它们。大多数时候，背景速记是偶然使用的。/*?因为我们只是设置一个属性，所以没有必要使用速记。*/.foo{background:#274530;}/*?使用正确的CSS属性*/.foo{background-color:#274530;}!important错误使用!important规则来覆盖特异性规则。它的使用主要集中在覆盖无法以任何其他方式覆盖的样式上。它通常用于更具体的选择器可以完成工作的场景。 Thistextisintheinnerdiv.
