Question

Some developers are particular about how they format their codes, for some good reasons. CSS is one of the items whose formatting doesn’t really have a strong convention to follow (most probably because of its declarative nature).

Our group typically follow this “convention.” The longer and more detailed doc can be found 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. */
}

Is there a tool, which I can easily customize, in order to produce this formatting?

Actually, I’d be really interested to gather other experienced CSS programmers’ inputs about e.g. whether it’s better to lump multiple selectors into one line or separate them into multiple lines, whether I should even bother to prettify and maintain logical orders of my code manually.

Note: This probably doesn’t perfectly fit to be a SO question. However, I am pretty certain the experience accumulated by some SO-ers during their tenure writing and maintaining CSS codes will definitely give insights to this issue.

Some CSS auto-format tools exist but there are not quite extensible.

Answer 1

I typically follow this convention. Also using only one indent. This allows maximum readability in our team.

.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
}