---
title: "Fence each component's styles in · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/the-cascade/scope-component-styles
updated: 2026-10-21
licence: "All rights reserved"
---

# Fence each component's styles in

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- Level: Required
- Chapter: [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)
- Rule: 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.
- How: A prefix such as `.booking-form-` keeps names apart, as [Give every module its own class names](https://agentwranglers.se/playbook/website/site-architecture/module-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.
- Check: Every selector in a component file starts with that file's prefix, or the file's only top-level rule is `@scope (.<prefix>)`.

## 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

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

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

### HTML example

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

## Sources

- [CSS Cascade 6 on scoped styles](https://www.w3.org/TR/css-cascade-6/#scoped-styles)

## Related rules

- [Give every module its own class names](https://agentwranglers.se/playbook/website/site-architecture/module-class-names) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/html-css/the-cascade/scope-component-styles">Agent Wranglers html and css playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Keep !important inside the utilities layer](https://agentwranglers.se/playbook/html-css/the-cascade/important-only-in-utilities)
- Next: [Let source order settle a tie](https://agentwranglers.se/playbook/html-css/the-cascade/source-order-wins)
- [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)