Lite Form SCSS Space-Saving Style Guide

1. Combine Related Properties

Group related CSS properties on a single line when possible:

.class { display: flex; flex-direction: column; margin-bottom: 12px; }

2. Nest Selectors Compactly

Use single-line to the inner nesting for short rules:

.class {
  .state {
    input { border: 1px solid #ccc; border-radius: 4px; padding: 8px; font-size: 14px; outline: none; }
  }
}

3. Use Minimal Indentation

Keep nesting shallow and avoid unnecessary whitespace.

4. Prefer Shorthand Properties

Use shorthand for border, padding, margin, etc.:

input { border: 1px solid #ccc; padding: 8px; }

5. Omit Optional Syntax

Omit units for zero values and use concise color codes:

margin: 0;
background: #f9f9f9;

6. Keep Selectors Short

Use short, meaningful class and state names.

---

Example:

.component { display: flex; flex-direction: column; margin-bottom: 12px;
  .edit {
    input { border: 1px solid #ccc; border-radius: 4px; padding: 8px; font-size: 14px; outline: none; }
  }
  .view { display: flex; flex-direction: column;
    label { font-weight: bold; margin-bottom: 4px; }
    .value { padding: 8px; border: 1px solid #eee; border-radius: 4px; background: #f9f9f9; }
  }
}

---

Follow these guidelines for compact, readable, and maintainable SCSS.