Benjamin
Charity

Published:

CSS Bracket Formatting Styles

Reading time: 2min

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

Close-up of a computer screen displaying CSS code with keyframes and properties, illustrating the syntax and structure of web styling.
Close-up of a computer screen displaying CSS code with keyframes and properties, illustrating the syntax and structure of web styling.

Default

.foo {
  color: red;
  display: block;
}
.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 GNU style. 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, reach out on Twitter: @benjamincharity

Get the latest updates

Sign up to hear about new resources & articles.

No data sharing. Unsubscribe at any time.


🛠️ 🌟 🎯

Copyright © 2024 Benjamin Charity.
All rights reserved.