Question

出于某些原因，一些开发人员特别关注他们如何格式化代码。 CSS是其格式之一并不具有强烈约定的项目之一（很可能是因为它的声明性质）。

我们小组通常遵循这个“惯例”。可以找到更长，更详细的文档here。

/* 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程序员关于例如是否最好将多个选择器合并为一行或将它们分成多行，我是否应该费心去美化并维护我的代码的逻辑顺序。

注意：这可能不完全适合作为SO问题。但是，我很确定一些SO-ers在任职期间所积累的经验以及编写和维护CSS代码肯定会对这个问题有所了解。

一些CSS自动格式化工具exist，但不太可扩展。

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打印分成三个完全独立的样式表，然后由定制处理程序在视图时进行组合，缩小和缓存。

CSS格式约定

2 个答案: