投票结果：你如何排列 CSS 属性？

超过 10,000 人参与了投票：最流行的 CSS 属性排序方式是 **按类型分组**。

以下是投票结果的细分

**按类型分组** (45%) 紧随其后的是 **随机排列** (39%)。 **按字母顺序排列** (14%) 的受欢迎程度要低得多，只有少数人使用 **按行长排列** (2%)。

作为记录，**按类型分组** 类似于这样（大量借鉴自 Nicolas Gallagher 的 Idiomatic CSS）

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff
  
  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}

它可能不会像那样用注释专门标记，但属性会彼此相邻。

大多数人比我更有条理！我不得不遗憾地投票“随机排列（没有特定计划）”。我感觉它并没有给我造成太大困扰，但话说回来，如果我不尝试更规范的方法，我怎么会知道呢？

我还有其他一些想法。

我认为这在团队中是一个更大的问题。必须有一个标准，否则整个 CSS 项目看起来会很杂乱。我知道不一致的样式会让我良心不安，我宁愿花时间修复一些琐碎的格式问题，也不愿做实际工作。

认知负荷也影响着这一点。如果您可以始终依赖某些属性位于相同的位置，则可以更快地理解 CSS（减少扫描）。同样，在团队中且查看不太熟悉的代码（因为您没有编写它）时，这是一个更大的问题。

另一个需要考虑的是“最初编写时”的 CSS 和“几个月后”的 CSS。我敢打赌，我们很多人都一开始就打算非常有条理，并且确实一开始就很有条理，但随后当您稍后调整内容时，会将属性随意放置在任何位置。那么，这如何影响投票结果呢？您是根据您的意图还是实际的 CSS 文件进行投票的？