CSS 编码模式可以让你成为一名初级开发人员。

最近我读了Alexey Chang 的《JS 编码模式：让你成为初级开发者》
。这本书很有意思！如果你是初级/中级 JS 开发者，我推荐你读一读。

不管怎样，我想我应该为 CSS 写一个！我经常看到不同级别的开发人员编写 CSS，而且总是能一眼就看出它是由初级还是高级前端开发人员编写的。

让我们来看看这些模式是什么，以及如何避免它们。让你的代码在同行评审时看起来更出色，并希望能够提升你的职业生涯。

多个填充/边距

好的，所以你想在顶部和底部添加 padding 和 margin。我看到很多初级开发人员这样做：

margin-top: 10px;
margin-bottom: 30px;

现在，这段 CSS 代码可以正常工作了，但它写得好吗？不行！你应该将所有的边距或内边距都分组。这对于响应式 CSS 工作尤其方便，因为你可以只更新一行 CSS，而不必同时更新margin-top和margin-bottom。

因此开始尝试这样写：

margin: 10px 0 30px 0;

一开始把它看成一行可能会让人望而生畏，所以让我来帮你分解一下。第一个数字代表margin-top，第二个数字代表margin-right，第三个数字代表margin-bottom，最后一个数字代表margin-left。

再举一个例子：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

与以下内容相同：

padding: 10px 20px 30px 20px;

另一件很酷的事情是，如果你有相同的价值观，比如：

padding: 20px 40px 20px 40px;

你可以写得更短，例如：

padding: 20px 40px;

如果顶部/底部或左侧/右侧的值相同，则一个数字就足够了。

如果不需要在侧面添加填充或边距，您可以简单地使用0或0px类似方法：

padding: 20px 0;

这将给我顶部和底部 20px 的填充，以及左侧和右侧 0 的填充。

使用 Sass / CSS 变量的静态值

变量为 CSS 带来了巨大的价值。它允许我们在某个地方更改颜色，所有使用该变量的 CSS 都会自动使用新的颜色。

如果您不熟悉 CSS 变量，请查看：Mozilla MDN。

我经常看到新开发人员选择不使用变量，有时是因为他们觉得很难实现，有时甚至是因为他们根本不知道变量的存在。

何时使用 Sass / CSS 变量？

这是我经常收到并看到的问题。通常我遵循以下规则：如果一个值在 3 个以上的地方使用，就将其设为变量。

这可能适用于：颜色、排版、框阴影、边框、动画以及几乎所有其他内容。

如何使用 CSS 变量

使用 CSS 变量非常简单。如以下代码片段所示：

:root {
  --primary-color: #333;
}

p {
  color: var(--primary-color);
}

对于那些想知道它:root是什么的人来说，:root它代表着你网站的绝对根目录。因此，这段 CSS 会被加载到整个文档中。这使得它成为设置全局变量（例如颜色）的理想位置。

现在如果我更新的颜色--primary-color就会自动更新！:rootp

不使用 :not()、:first-child 和 :last-child

您是否遇到过这样的问题：不想将 CSS 应用于列表的第一个或最后一个元素？好吧，有一些 CSS 语法可以解决这个问题！

经常发生的情况是，你有一个列表，例如：

<ul>
  <li>First Child</li>
  <li>Second Child</li>
  <li>Last Child</li>
</ul>

现在您想要在元素之间创建一些间距，因此您添加一些 CSS：

li {
  padding: 0 0 20px 0;
}

这样做的问题是，它也会将这个间距应用到最后一个元素上。这并不总是你想要的。

如果您使用：

li:not(:last-child) {
  padding: 0 0 20px 0;
}

CSS 应用于除最后一个子元素之外的所有<li>元素。因此语法如下。:not()

现在它有很多功能，:not()值得一试！光是介绍它能做的那些酷炫事情，我就能写一篇完整的文章了:not()。

也可能你只想将 CSS 应用于第一个或最后一个元素。与其为它创建单独的 class，不如开始使用first-childand last-child。

li:first-child {
  margin: 20px 0 0 0;
}

这样只会给第一个<li>元素 20px 的 margin-top ！不需要额外的类。

结论

希望你从这篇文章中学到了一些很酷的新 CSS 模式。如果你有任何疑问，我很乐意为你解答！

请告诉我你的想法。