CSS 基础：重要的语法和不重要的语法

当您开始接触 CSS 时，就像任何其他语言一样，您需要从一开始就习惯语法。 像任何语法一样，您需要了解一些小细节。 一些字符及其放置位置对 CSS 正确工作非常重要且必不可少。 而另一些字符则更侧重于代码的整洁外观和普遍遵循的标准，但对于 CSS 的工作并不重要。

首先，让我们了解一下术语

重要：大括号

所有 CSS 规则集都必须包含左大括号和右大括号

如果您缺少左大括号，CSS 会继续读取，就好像下一部分文本仍然是选择器的一部分。 然后，它可能会找到一个字符，比如 ;，这在选择器中是无效的，并导致中断。 中断可能意味着它会破坏自身和下一个规则集，并且 在之后恢复。

缺少右大括号更糟糕一些，因为它可能会破坏整个 CSS 文件的剩余部分，除非它以某种方式找到双右大括号，并能够先解决第一个缺少的大括号。

总而言之：大括号非常重要！

像 Sass 和 Less 这样的预处理语言提供了一种称为 嵌套 的语法功能。 这可能很方便，但请注意，当这些预处理器运行并生成 CSS 时，嵌套将被移除，因为 CSS 本身不支持嵌套。 如果您将嵌套 CSS 复制到普通 CSS 中，就会遇到大括号问题。

有时很重要：空格

在 CSS 中，只有少数地方空格很重要。 最重要的一个是在选择器中。 选择器中的一个空格表示您正在选择前一部分选择器的后代。 选择器 body p 表示“选择作为 body 元素的后代的 p 元素”。 这个空格非常重要。 希望它与 bodyp 明显不同，后者不会选择任何内容（没有 <bodyp> 元素）。 但它与 body p 并不不同。 多个空格与一个空格的意义相同。

您不能在属性、函数名或任何命名事物的地方添加空格。 在这些情况下添加空格实际上会更改名称，导致它们失效。

除此之外，空格在 CSS 中并不重要。

我鼓励您在空格使用方面保持一致，并生成干净且可读的 CSS。 您可能想要参考一些 CSS 样式指南，了解一些格式化最佳实践。

即使是 CSS 中的 !important 规则，它位于声明中的值之后，例如 body { background: white !important; }，也没有任何空格要求。 它可以在其前面有任意数量的空格，或者没有空格。

在 CSS 中移除空格实际上是一种性能最佳实践，因此您可能会注意到，当查看生产环境中网站的原始 CSS 时。

您最好将 CSS 的压缩留给处理 CSS 的工具，保持原始 CSS 不变。 我们将在其他文章中介绍相关选项。

非常重要：分号

规则集中的每个声明（属性和值对）都以分号结尾。 分号是必需的，否则 CSS 会继续读取下一个属性，就好像它属于前一个声明的值一样。

您可以省略规则集中的最后一个声明的分号。 我要提醒您，手动这样做会带来比它带来的价值更多的麻烦，最好将其留给压缩工具。

重要：避免多余的字符

这在任何语言中都很重要。 代码中的每个字符都很重要，因此随机的其他字符几乎肯定会导致问题。

不重要：换行符

换行符在 CSS 中被视为任何其他空白字符，因此您可以随意使用它们，只要它不违反上述任何其他空格规则即可。

---

总而言之，CSS 语法并不难。 祝您好运！