# CSS Formatting Rules · CSS-03

## Standard Metadata

- Area: CSS
- Owner: Frontend Steering group
- Last reviewed: 2026-09-09
- Next review due from: 2026-12-01
- Enforcement: Code review
- Status: Active

## Alphabetize declarations · CSS-03.1 · **SHOULD**

Sort declarations consistently within a project. In the absence of tooling to automate and enforce a consistent sort order, consider putting declarations in alphabetical order in order to achieve consistent code in a way that is easy to learn, remember, and manually maintain.

Ignore vendor-specific prefixes for sorting purposes. However, multiple vendor-specific prefixes for a certain CSS property should be kept sorted (e.g. `-moz` prefix comes before `-webkit`).

```css
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
```

## Indent all block content · CSS-03.2 · **MUST**

Indent all [block content](https://www.w3.org/TR/CSS21/syndata.html#block), that is rules within rules as well as declarations, so to reflect hierarchy and improve understanding.

```css
@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}
```

## Use a semicolon after every declaration · CSS-03.3 · **MUST**

End every declaration with a semicolon for consistency and extensibility reasons.

```css
/* Not recommended */
.test {
  display: block;
  height: 100px
}
```
```css
/* Recommended */
.test {
  display: block;
  height: 100px;
}
```

## Use a space after a property name's colon · CSS-03.4 · **MUST**

Always use a single space between property and value (but no space between property and colon) for consistency reasons.

```css
/* Not recommended */
h3 {
  font-weight:bold;
}
```
```css
/* Recommended */
h3 {
  font-weight: bold;
}
```

## Use a space between the last selector and the declaration block · CSS-03.5 · **MUST**

Always use a single space between the last selector and the opening brace that begins the [declaration block](https://www.w3.org/TR/CSS21/syndata.html#rule-sets).

The opening brace should be on the same line as the last selector in a given rule.

```css
/* Not recommended: missing space */
.video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
.video
{
  margin-top: 1em;
}
```
```css
/* Recommended */
.video {
  margin-top: 1em;
}
```

## Separate selectors and declarations by new lines · CSS-03.6 · **MUST**

Always start a new line for each selector and declaration.

```css
/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
```
```css
/* Recommended */
a:focus,
a:active {
  position: relative;
  top: 1px;
}
```

## Separate rules by new lines · CSS-03.7 · **MUST**

Always put a blank line (two line breaks) between rules.

```css
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}
```

## Use single (`''`) rather than double (`""`) quotation marks for attribute selectors and property values · CSS-03.8 · **MUST**

Do not use quotation marks in URI values (`url()`).

Exception: If you do need to use the `@charset` rule, use double quotation marks — [single quotation marks are not permitted](https://www.w3.org/TR/CSS21/syndata.html#charset).

```css
/* Not recommended */
@import url("https://www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
```
```css
/* Recommended */
@import url(https://www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}
```

## Group sections by a section comment · CSS-03.9 · **COULD**

If possible, group style sheet sections together by using comments. Separate sections with new lines.

```css
/* Header */

.adw-header {}

/* Footer */

.adw-footer {}

/* Gallery */

.adw-gallery {}
```

## Explain code as needed, where possible · CSS-03.10 · **COULD**

Use comments to explain code: What does it cover, what purpose does it serve, why is respective solution used or preferred?

(This item is optional as it is not deemed a realistic expectation to always demand fully documented code. Mileage may vary heavily for HTML and CSS code and depends on the project’s complexity.)