CSS Style

Standards for consistent CSS style.

Follow Code Style Rules

All CSS must follow language-agnostic standards: 2-space indentation, 80-character line limit.

One Property Per Line

❌ DON'T

div { margin: 0; padding: 0; border: none; }

✅ DO

div {
  margin: 0;
  padding: 0;
  border: none;
}

Check for multiple properties on one line:

node checks/one-property-per-line.js file.css

Order Properties by Logical Grouping

1. Outer Layout: position, top, right, bottom, left, z-index, display
2. Inner Layout: flex, grid, width, height, margin, padding, border, overflow
3. Typography: font, font-size, line-height, text-align, color
4. Visuals: background, box-shadow, opacity
5. Motion: transform, transition, animation
6. Interaction: cursor, pointer-events

❌ DON'T order randomly

button {
  color: white;
  position: relative;
  background: blue;
  padding: 10px;
}

✅ DO group logically

button {
  position: relative;
  padding: 10px;
  color: white;
  background: blue;
}

Use CSS Custom Properties

:root {
  --color-primary: #007bff;
  --spacing-base: 8px;
}

Use Lowercase Hex Colors

❌ DON'T: #FF0000, #FFFFFF

✅ DO: #ff0000, #ffffff

Check for uppercase hex colors:

node checks/lowercase-hex.js file.css