How to Format CSS Code

Writing CSS is easy. Maintaining a 5,000-line CSS file written by three different developers is hard. Establishing and adhering to strict formatting guidelines is the only way to prevent your stylesheets from becoming an unreadable mess.

1. The One-Property-Per-Line Rule

Never chain multiple properties on the same line. While it saves vertical space, it makes Git diffs impossible to read and scanning for specific properties significantly harder.

Bad:

.card { background: white; border: 1px solid #ccc; padding: 20px; }

Good:

.card {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
}

2. Spacing Around Punctuation

Consistent spacing reduces visual friction. Follow these rules:

• Always put one space before the opening brace {.
• Always put one space after a colon :.
• Never put a space before a colon or a semicolon.
• Always include a trailing semicolon on the last property (it prevents errors when adding new properties later).

3. Grouping and Ordering Properties

When a selector has 15 properties, finding the one you want to change takes time. Many teams adopt a specific ordering strategy. The most common is ordering by layout impact (outside-in):

1. Positioning (position, top, z-index)
2. Box Model (display, flex, width, margin, padding)
3. Typography (font, line-height, text-align)
4. Visuals (background, color, border, shadow)
5. Animation (transition, transform)

4. Use Empty Lines to Separate Blocks

Always leave exactly one blank line between CSS rulesets. This visual breathing room is essential for readability.