投票结果:你如何排列 CSS 属性?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

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

以下是投票结果的细分

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

作为记录,**按类型分组** 类似于这样(大量借鉴自 Nicolas GallagherIdiomatic 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 文件进行投票的?