---
title: "Keep script hooks apart from style hooks · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/naming-and-state/separate-script-hooks
updated: 2026-10-21
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Keep script hooks apart from style hooks

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

For AI agents: [llms.txt](https://agentwranglers.se/llms.txt) is a short guide that sends you to the rules your problem needs, and [rules.json](https://agentwranglers.se/playbook/html-css/rules.json) holds every rule of this playbook as JSON.

- Level: Recommended
- Chapter: [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)
- Rule: Let scripts find elements through `data-` attributes or ids, never through styling classes. Stylesheets never select the attributes that scripts use as hooks.
- How: When a script selects `.order-card-button`, renaming the class for styling silently breaks the behaviour. Give the element a hook such as `data-action="add-to-basket"`. State attributes from [Show state through attributes](https://agentwranglers.se/playbook/html-css/naming-and-state/state-in-attributes) are the exception, because both sides read them on purpose.
- Check: A search of the scripts finds 0 `querySelector` or `closest` calls with a class selector. A search of the stylesheets finds 0 selectors on `data-action`.

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

### HTML example

```html
<button class="order-card-button" data-action="add-to-basket" data-product="rye-loaf">Add to basket</button>
```

### JavaScript example

```js
document.addEventListener('click', event => {
  const button = event.target.closest('[data-action="add-to-basket"]');
  if (button) addToBasket(button.dataset.product);
});
```

### Python example

```python
# Build check: scripts never select by class
import pathlib, re, sys
CLASS_QUERY = re.compile(r"(querySelector(All)?|closest)\(\s*['\"][^'\"]*\.[a-z]")
hits = [f"{p}:{n}" for p in pathlib.Path("src").rglob("*.js")
        for n, line in enumerate(p.read_text().splitlines(), 1) if CLASS_QUERY.search(line)]
print("\n".join(f"FAIL {hit} selects by class" for hit in hits))
sys.exit(1 if hits else 0)
```

## Related rules

- [Show state through attributes](https://agentwranglers.se/playbook/html-css/naming-and-state/state-in-attributes) in HTML and CSS

**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/naming-and-state/separate-script-hooks">Agent Wranglers HTML and CSS playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Prefix a component's custom properties with its name](https://agentwranglers.se/playbook/html-css/naming-and-state/component-custom-properties)
- [Naming and state](https://agentwranglers.se/playbook/html-css/naming-and-state)