【CSS】末尾分号与Prettier和ESLint的最佳实践

CSS 是网页开发中不可或缺的一部分，确保 CSS 代码的规范性和一致性对于项目的长期维护至关重要。本文将详细介绍为什么 CSS 语句需要以分号结尾，以及如何通过 Prettier 和 ESLint 工具实现自动化的代码格式化和规范校验。

一、CSS文件中分号的重要性

1. 分号在CSS中的作用

在 CSS 中，每条属性声明通常由以下结构组成：

选择器 {
   
   
  属性: 值;
}

分号 (;) 的作用是分隔每一条属性声明，明确告诉浏览器解析器当前规则的结束位置。例如：

color: red;
background: blue;

2. 没有分号会发生什么

虽然在某些情况下，最后一条属性声明可以省略分号，但这样可能导致以下问题：

• 潜在的解析错误：浏览器可能无法正确解析后续的样式。
• 代码维护困难：如果未来在末尾添加新属性，开发者可能忘记补充分号，导致解析错误。 例如：

color: red
background: blue;

在上述代码中，由于缺少分号，浏览器会将 background 和 color 解析为一条无效的规则。

3. 为什么不能用逗号（,）替代分号（;）

CSS 的语法严格规定，分号是属性声明的结束符，而逗号则用于其他特定场景，如多值属性或选择器分隔：

• 选择器分隔：

  h1, h2 {
       
       
    color