Enforcing CSS Style Conventions

1. Semicolons: every declaration ends with ;, including the last one.
2. Indentation: 2 spaces, never tabs or 4 spaces.
3. Brace spacing: one space before {; selector and { on same line; } alone on its own line.
4. Colon spacing: no space before :, one space after (margin-top: 10px;).
5. Combinators: one space around >, +, ~, ||.
6. Comma-separated values: one space after , (e.g., rgba(0, 0, 0, 0.5), multi-value box-shadow).
7. Comments: one space inside /* comment */; blank line above a comment unless it's the first line in a block or follows another comment.
8. One declaration per line, even if the block has only one declaration.
9. Line length: max 100 chars, except for url() values or values that cannot be split (no spaces/commas).
10. Multiple selectors: each selector on its own line, separated by ,.

• Never use ID selectors (#foo). Convert to class-based specificity, e.g. #special → .normal.special.
• Quote attribute selector values: [type="text"], not [type=text].
• Performance/maintainability: prefer classes over element/tag selectors; avoid attribute selectors like [class^="..."] on frequently-rendered components; keep each selector chain to ≤3 combined parts. Efficiency order (best→worst): ID > class > element > adjacent sibling > child > descendant > universal > attribute > pseudo-class/element (still avoid ID despite its efficiency, per the no-ID rule).

• Hex colors: shortest form, lowercase (#fff not #FFFFFF).
• Zero lengths: omit units (margin-top: 0; not 0px).
• Decimals: keep leading zero (0.5, not .5) — this is the recommended default, prioritizing readability/consistency over the one saved character.
• No !important — resolve specificity conflicts structurally instead.
• Shorthand properties (margin, padding, font, background, border, border-radius): only use when setting all/most sides or sub-values. For a single side, use longhand: margin-bottom: 10px; not margin: 0 0 10px;.

Property declaration order

Group and order declarations as:

1. Positioning (position, top/right/bottom/left, z-index)
2. Box model (display, float, width, height, margin, padding, border)
3. Typography (font, color, line-height, text-align)
4. Appearance (background, box-shadow, etc.)
5. Other (opacity, transition, cursor, etc.)

CSS
.declaration-order {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  border: 1px solid #e5e5e5;
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
  opacity: 1;
}

• Operators: space around arithmetic operators — $default-width / 2, not $default-width/2.
• Mixin calls: no space between name and (; no space before ,, one space after — .size(30px, 20px);, .clearfix(); (not .clearfix ()).
• File organization order: @import statements → global variable declarations → style rules.
• Declaration order inside a rule: standard properties (following the CSS order above) → mixin includes (@include, Less mixin calls) → nested child selectors last, preceded by a blank line.

SCSS
.btn {
  background: #ccc;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

• Nesting depth: max 3 levels. Deeper nesting couples CSS to HTML structure and inflates specificity.
• Comments: // is fine for source-only notes (stripped on compile); use /* */ only when the comment must survive in compiled CSS.
• Code reuse: prefer @mixin/@include over @extend. @extend is fragile with nested selectors and load-order dependent; rely on gzip to handle any resulting duplication.

• Never use @import in CSS (adds a network round-trip in the critical rendering path). Use <link rel="stylesheet"> in HTML instead.
• Consider whether a preprocessor is even needed for new projects — PostCSS is the recommended alternative, offering plugin extensibility without the maintenance overhead of Sass/Less across teams.

• Wire up stylelint (e.g., stylelint-config-ali) so these rules are enforced automatically rather than manually checked every review.
• When in doubt about shorthand vs. longhand, ask "am I setting all sides/values intentionally?" — if no, use longhand.
• Keep selectors resilient to markup changes; avoid over-nesting and ID-based hooks.

• Don't drop the leading zero on decimals (.5 should be 0.5).
• Don't use shorthand just to set one value — it silently resets the others.
• Don't use !important as a quick fix — it compounds into worse specificity wars.
• Don't nest Sass/Less selectors more than 3 levels deep "just because you can."
• Don't use @import in plain CSS for production stylesheets.
• Don't mix tabs and spaces, or use 4-space indentation.