Property Ordering

Introduction

This standard defines the recommended order of CSS properties within a declaration block. Consistent ordering improves readability and makes it easier to locate specific properties during code review.

Property Order

Properties SHOULD be ordered in the following logical groups:

1. Positioning — position, top, right, bottom, left, z-index
2. Box Model — display, flex, grid, width, height, margin, padding, box-sizing
3. Typography — font-family, font-size, font-weight, line-height, text-align, text-transform, color
4. Visual — background, border, border-radius, box-shadow, opacity
5. Animation — transition, animation, transform
6. Misc — cursor, overflow, pointer-events, user-select

Example

.card {
  // Positioning
  position: relative;
  z-index: -index__card;

  // Box Model
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: ;

  // Typography
  font-family: ;
  font-size: -size__text;
  color: ;

  // Visual
  background: -light;
  border-radius: ;
  box-shadow: ;

  // Animation
  transition: box-shadow ;
}

Notes

Group separators (empty lines between groups) are OPTIONAL but RECOMMENDED for blocks with 8 or more properties.