Cleanliness Is Key to Maintainability

Good CSS code reads like a book. When a project grows to thousands of lines, comments and proper organization become vital.

1. Comments: Notes for Your Future Self

CSS comments are used to explain complex sections or divide code into logical blocks.

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

.header {
  height: 80px; /* Fixed height for desktop */
}

/* Hide on mobile */
.header__nav {
  display: flex;
}

2. Grouping Selectors (DRY)

If you want to apply the same properties to different elements, don't copy code. Use a comma.

h1, h2, h3, .title-large {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--text-dark);
}

3. Grouping Properties (Shorthands)

Many properties have a " shorthand " that allows setting multiple parameters in one line.

• Instead of border-width, border-style, border-color write simply border: 1px solid red;.

Tip: Always try to group common styles at the beginning of the file, and component-specific ones at the end.