CSS格式的约定

Question

有些开发人员特别关注他们的代码格式，这是有原因的。CSS是这样一个项目，它的格式并没有严格遵循的约定(很可能是因为它的声明性)。

我们的团队通常遵循这个“约定”。可以找到更长、更详细的文档这里。

/* Separate each selector to its own line. */
selector-1,
selector-2<1-space>{
  <indent>property:<1-space>value;
}

selector {
  /* Float. */
  /* Positioning related declarations. */
  /* Visibility. */
  /* Box related declarations. */
  /* Font related declarations. */
}

是否有一个工具，我可以很容易地定制，以产生这种格式？

实际上，我非常有兴趣收集其他有经验的CSS程序员的输入，例如，是否最好将多个选择器合并到一行中，还是将它们分隔成多行，是否需要手动美化和维护代码的逻辑顺序。

注：，这可能不是一个非常合适的问题。不过，我非常肯定，一些这样的人在他们的任期内积累的经验，编写和维护CSS代码肯定会给这个问题带来深刻的见解。

一些CSS自动格式化工具存在，但没有很好的可扩展性。

Answer 1

我通常遵循这个惯例。也只使用一个缩进。这允许在我们的团队中获得最大程度的可读性。

.selector {
    Style Defs: 
      * dimensions (width, height) styles
        * positioning (with coordinates) styles
        * float/clearstyles
      * spacing (margin, padding, border) styles
        * display/visibility styles
        * typography-related (line-height, color, etc.) styles
        * miscellaneous (list-style, cursors, etc.) styles
}

Answer 2

我通常将布局样式定义、颜色/图像样式定义和@media打印分成三个完全独立的样式表，然后由定制处理程序组合、缩小和缓存这些样式表。