CSS rules

Longhand only

Write margin-top, margin-right, border-width, border-style, border-color — never the shorthand that packs them together.

margin: 20px 0;
border: 1px solid #ccc;

margin-top: 20px;
margin-bottom: 20px;
border-width: 1px;
border-style: solid;
border-color: #ccc;

Everything is scoped to the block

All selectors are scoped to the section's BEM block class. No body, no html, no *, and no unscoped tag selectors — a section must not restyle anything outside itself.

Grid declares both axes

Any rule using grid-template-columns must also declare grid-template-rows, normally 1fr.

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  column-gap: 20px;
  row-gap: 20px;
}

Three breakpoints, written as blocks

Only 991px, 767px and 479px. Prefer the named block over a raw query; see Breakpoints for the full detail and for the cases where a real media query is still required.

Interactive states are required

Every button, link, card and other clickable element must have a visible :hover state written in CSS, and a :focus-visible state for keyboard users. Never remove a focus ring without replacing it.

.hero__cta {
  background-color: #111;
  transition-property: background-color;
  transition-duration: .2s;
}
.hero__cta:hover { background-color: #333; }
.hero__cta:focus-visible { outline-width: 2px; outline-style: solid; outline-color: #111; }

Hovering a parent to restyle a child is fine: .card:hover .card__title. Keep state changes in CSS — use JavaScript only for motion CSS cannot express.

Units

Relative units (rem, em) for typography, so a designer's type scale still works after import.