The cascade

Required

• Declare the layer order once

  Required

  Declare every cascade layer in one @layer statement at the top of the entry file. Put every style inside a named layer, so no style is left unlayered.

• Cap selector specificity

  Required

  Keep every selector at a specificity of 0,2,0 or lower. That is at most two classes, attributes or pseudo-classes, with no ids.

• Never style by id

  Required

  Use ids only for links, labels and scripts. No CSS selector contains an id.

• Keep !important inside the utilities layer

  Required

  Write !important only in the utilities layer. Every other layer has 0 !important declarations.

• Fence each component's styles in

  Required

  Make every selector in a component file start at the component's root. Use the module prefix on each class, or wrap the file in @scope on the root class.

• Import third-party CSS into its own layer

  Required

  Import every third-party stylesheet into a named layer placed before your own layers. Never edit a vendor file in place.

Avoid

• Let source order settle a tie

  Avoid

  Never depend on which file loads last to decide between two rules of the same layer and specificity.

Read this with

• Website optimization playbook

  Keep the cascade under control with layers and a specificity limit, so a later rule never wins by accident.