CSS 属性分组的各种逻辑方式 | CSS-Tricks

这是一段 CSS 代码

.module {
  background: rgba(198, 148, 72, 0.75);
  color: #222;
  clear: both;
  margin: 0 0 2rem 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  border-radius: 4px;
  padding: 1rem;
  font-family: sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 1;
  transform: opacity 0.2s ease-in-out;
  transform-origin: right center;
}

这看起来很像我写的 CSS 代码。我承认，我传统上对 CSS 属性的排序并没有太多意见。我只是添加我需要的属性。我认为它们最终会根据相关性进行“分组”，因为这正是我大脑的输出方式。

尽管我不特别介意这种“随机”（没有应用任何真正逻辑）的排列方式，但我可以看到反对它的论点。如果存在重复声明，则很难发现，并且可能会导致一些令人费解的故障排除。现在回想起来，这种情况确实发生过很多次。

我还要承认，我确实有一些风格指南偏好，例如使用 2 个空格、在开括号前使用空格、在冒号后使用一个空格等等。那是另一篇文章的内容。

让我们看看我们可以如何将不同的逻辑应用于此规则集。

按字母顺序排列

让我们按字母顺序重新排列它们

.module {
  background: rgba(198, 148, 72, 0.75);
  border: 2px solid black;
  border-radius: 4px;
  clear: both;
  color: #222;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 2rem 0;
  opacity: 1;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  transform: opacity 0.2s ease-in-out;
  transform-origin: right center;
}

现在这里应用了一点逻辑。如果您特别想查看此声明是否具有 opacity 属性名称，则可以扫描列表以查找“o”在字母表中的位置，并理想情况下非常快速地找到它。您必须相信字母顺序格式得到完美遵守，但我可以看到它的吸引力。

Jerry Low 是一位大力倡导者

字母表具有普遍理解的顺序。我们大多数人可能都能按字母顺序排列事物，而不会过度思考……速度和明确的排序是按字母顺序排列 CSS 属性的一个充分论据，但对我来说，最大的优势在于协作——没有学习曲线。

您还会在这里看到一些自然分组。请注意，字体属性和转换属性仅凭其名称就放在一起。在偶然的情况下，flexbox 相关内容也彼此相邻，但是如果插入 filter 或 fill 属性，它们就不会相邻。某些您可能期望彼此相邻的内容，例如 margin 和 padding 则不会相邻。这让我们想到了……

按类型分组

正如我们看到的，“类型”分组在按字母顺序排列时会自然发生，但也有很多例外情况，因此根据属性的作用而不是属性名称对属性进行分组可能更有意义。我将“类型”用引号括起来，因为我们将属性分组为类型的形式完全取决于我们自己，它不是语义或编程的概念。

使用一些空行来帮助分隔类型，也许我们最终会得到以下结果

.module {
  background: rgba(198, 148, 72, 0.75);
  color: #222;
  opacity: 1;

  border: 2px solid black;
  border-radius: 4px;

  font-family: sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  
  position: relative;
  display: flex;
  flex-direction: column;
  clear: both;
  overflow: hidden;

  margin: 0 0 2rem 0;
  padding: 1rem;
  
  transform: opacity 0.2s ease-in-out;
  transform-origin: right center;
}

然后这就引出了问题：如何对类型组进行排序？什么属于什么类型？如何对每种类型内的属性进行排序？这些问题不一定需要答案，它们只是供大家思考。

Michael Arestad，他对属性的排序方式并不太在意，他说

通常情况下，即使没有经过培训，人们也会很好地对定位、盒模型和排版属性进行分组。

但他确实明确表示这种“可读性”的东西并不是一个很好的论点

易读性是我提出的一个稻草人论点。它很容易被推翻，因为所有重要的只是查找属性的容易程度。这两种方法都同样容易，而且在我看来，大多数情况下，查找是从浏览器开始的。

按行长排序

想变得奇怪一点？比你想象的更多的人这么做

.module {
  background: rgba(198, 148, 72, 0.75);
  transform: opacity 0.2s ease-in-out;
  transform-origin: right center;
  border: 2px solid black;
  font-family: sans-serif;
  flex-direction: column;
  margin: 0 0 2rem 0;
  position: relative;
  border-radius: 4px;
  font-size: 0.9rem;
  overflow: hidden;
  line-height: 1.4;
  display: flex;
  padding: 1rem;
  color: #222;
  clear: both;
  opacity: 1;
}

我无意冒犯，称别人的编码风格很奇怪，但对我来说，这似乎是一种出于某种目的而强迫症的表现。我看不出有任何优势，除了它看起来有点整洁。但缺点很多，例如更改值可能需要您重新排序。

CSS Comb

值得一提的是 CSS Comb，这是一个旨在组织 CSS 属性的项目，这是其默认的开箱即用功能。

它也具有极强的可配置性。他们有一个 24 步配置工具，可以让你按照自己的喜好进行设置。我必须说：这对我很有吸引力。事实上，我刚刚创建了自己的新配置并计划开始使用它。它在团队环境中似乎特别有用。这样，您就可以获得逻辑排序（如果有的话！）的好处，以及一致且强制执行的代码风格，而且几乎无需任何努力。

还有一个 PostCSS 插件。但请记住，您的处理后 CSS 文件最终会是什么样子并不重要，我们这里讨论的是处理我们编写的样式表，因此它作为 IDE 中的功能（此插件提供）可能更有意义。

其他

您是否知道组织属性的其他方法？例如“按日期最后添加”？根据您对属性的喜爱程度排序？！根据您认为属性的重要性排序？！