---
title: "Use plain CSS before adding a CSS · Agent Wranglers"
url: https://agentwranglers.se/playbook/stack/web-frameworks/plain-css
updated: 2026-10-21
licence: "All rights reserved"
---

# Use plain CSS before adding a CSS framework

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

- Level: Recommended
- Chapter: [Web frameworks](https://agentwranglers.se/playbook/stack/web-frameworks)
- Rule: Write styles in plain CSS files with custom properties, and add a utility framework only when the team already writes it.
- Cost: Open source. CSS is an open web standard with no licence fee. Tailwind CSS is MIT licensed.
- How: CSS is a W3C standard, so it passes every test with no dependency, no upgrade and no licence. Browsers now support nesting, custom properties and cascade layers, which once needed a tool. Keep colours and sizes as [named design tokens](https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens). Choose something else when the team already uses Tailwind CSS, which passes the tests too. Its 1.0 came out in May 2019, version 4.3.3 shipped in July 2026, and it has an MIT licence with about 85 million weekly downloads.
- Check: The project has at most one CSS tool in package.json, and every colour value in the stylesheets is a custom property defined in one file.

## 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
:root { --color-action: #2347d6; --space-m: 1rem; }

.order-card {
  padding: var(--space-m);
  & .order-card-button { background: var(--color-action); }
}
```

### JavaScript example

```js
import { readFileSync } from 'node:fs';

const HEX_COLOUR = /#[0-9a-f]{3,8}\b/i;
export const coloursOutsideTokens = file =>
  readFileSync(file, 'utf8').split('\n').filter(line => HEX_COLOUR.test(line) && !line.trim().startsWith('--'));
```

### Python example

```python
import re

HEX_COLOUR = re.compile(r"#[0-9a-fA-F]{3,8}\b")

def colours_outside_tokens(path: str) -> list[str]:
    return [line for line in open(path) if HEX_COLOUR.search(line) and not line.strip().startswith("--")]
```

## Sources

- [W3C CSS current work](https://www.w3.org/Style/CSS/current-work)
- [Tailwind CSS](https://tailwindcss.com/docs)

## Related rules

- [Take every style value from design tokens](https://agentwranglers.se/playbook/app-ui/styles-and-components/design-tokens) in App interface

**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/stack/web-frameworks/plain-css">Agent Wranglers software choices playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Use Zod or Pydantic to check every input](https://agentwranglers.se/playbook/stack/web-frameworks/zod-pydantic)
- Next: [Avoid Create React App](https://agentwranglers.se/playbook/stack/web-frameworks/create-react-app)
- [Web frameworks](https://agentwranglers.se/playbook/stack/web-frameworks)