已关闭。此问题为opinion-based。当前不接受答案。
**想要改进此问题吗？**请更新此问题，以便editing this post可以用事实和引文来回答。

6小时前关门了。
Improve this question
在开发一个网站的过程中，我偶然发现了两种组织我的css（实际上是scss）的方法。第一种是围绕一个属性来组织我的选择器/组合器，这样（如下面的例子）我相信我避免了属性的重复。（更多的例子在例子之后）

.footer {
  background-color: $primary;
  & a,
  & i,
  & h2,
  & p {
    color: #ffffff;
  }
  & a,
  & p {
    @include font(20, 300);
    display: block;
    margin-bottom: 10px;
  }
  & h2 {
    @include font(24, 700);
    margin-bottom: 15px;
    text-transform: uppercase;
  }
}

在第二种方法中，我会将具有相同样式的元素中的属性分组（如下面的示例所示）。
我相信这种方式更有意义，因为你把每个属性块都当作样式来引用，而元素看起来很相似。但是第一种情况似乎提供了更清晰的视觉效果。是否有争论哪种方式更好，哪种方式在理解代码时提供了更好的组织和更少的精力？

.footer {
  background-color: $primary;
  & a,
  & p {
    @include font(20, 300);
    color: #ffffff;
  }
  & h2 {
    @include font(24, 700);
    color: #ffffff;
    text-transform: uppercase;
  }
  & i {
    color: #ffffff;
  }
}