Fence each component's styles in

How to do it

A prefix such as .booking-form- keeps names apart, as Give every module its own class names describes. @scope adds a lower boundary, so a component's styles stop at a slot that holds another component. Use one of the two methods across the whole project, not both.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

CSS example

/* Prefix method */
.booking-form-field { }

/* @scope method: styles stop at the slot that holds another component */
@scope (.booking-form) to (.booking-form-slot) {
  :scope { }
  label { }
}

HTML example

<form class="booking-form">
  <label>Guests <input name="guests"></label>
  <div class="booking-form-slot"><!-- another component, untouched --></div>
</form>

How to check

Every selector in a component file starts with that file's prefix, or the file's only top-level rule is @scope (.<prefix>).

Sources

• CSS Cascade 6 on scoped styles

Related rules

• Give every module its own class names in Website