CSS Bracket Formatting Styles

Ever wondered what the various CSS bracket styles were called? (neither did I but it's actually pretty interesting)

Default

.foo {
  color: red;
  display: block;
}

Banner

.foo {
  color: red;
  display: block;
  }

Saver

.foo { color: red;
  display: block;
}

Aligned

.foo { color: red;
  display: block;
  }

Pico

.foo { color: red;
  display: block; }

Extra

.foo {
 color: red;
 display: block; }

GNU

.foo
{
  color: red;
  display: block;
}

HMANN

.foo
{ color: red;
  display: block;
}

Personally, I feel that the 'default' style is by far the most readable, followed closely by the saver and GNU styles. My primary issue with styles such as saver or pico is that you cannot move entire lines up and down due to the first and/or last declaration sharing a line with the selector or bracket.

Note: I couldn't actually find documentation to verify some of these naming conventions. If anyone knows a source or possibly a different name for a style, ping me on twitter: @benjamincharity

Tags :

Benjamin Charity

Self-motivated UXE technical lead focused on building highly scalable systems for both the web and mobile platforms. Currently focused on Design Language Systems and Component Libraries.