# The same CSS declarations under another selector; the same long utility-class string again and again

*Code that already exists*: one of the ways AI coding agents bloat software, from lessloc's [pattern catalog](https://lessloc.org/patterns/index.md). lessloc catches it as [`style-copy`](https://lessloc.org/guide/reference.md#tier-2).

## What makes the same CSS declarations under another selector a bad practice?

The standards that call it a bad practice: DRY; Tailwind docs: Reusing Styles.

## What does lessloc do about the same CSS declarations under another selector?

lessloc catches it as [`style-copy`](https://lessloc.org/guide/reference.md#tier-2).

- `style-copy` (tier 2): The same CSS declarations under another selector, or the same long utility-class string written again and again.

## Examples

Caught as `style-copy`:

```css [ch.css]
.card { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.panel { border: 1px solid #ccc; padding: 8px; border-radius: 4px; }
```

Written well:

```css [ch.css]
.surface, .notice { padding: 6px; border: 1px solid #ddd; border-radius: 6px; }
```

Caught as `style-copy`:

```jsx [ci.jsx]
export const List = () => (
  <>
    <div className="flex items-center gap-2 rounded-md border px-3 py-2">a</div>
    <div className="flex items-center gap-2 rounded-md border px-3 py-2">b</div>
    <div className="flex items-center gap-2 rounded-md border px-3 py-2">c</div>
  </>
);
```

Written well:

```jsx [ci.jsx]
const Row = ({ children }) => <div className="grid place-items-center gap-1 rounded-lg border px-2 py-1">{children}</div>;
export const List = () => (
  <>
    <Row>a</Row>
    <Row>b</Row>
    <Row>c</Row>
  </>
);
```

## Related patterns

The other patterns in [Code that already exists](https://lessloc.org/patterns/index.md#code-that-already-exists):

- [Reimplementing a helper the project already has](https://lessloc.org/patterns/reuse-helper.md): lessloc gives every session the rule: take what is already in the codebase before new code.
- [Copying a rule another function owns](https://lessloc.org/patterns/copied-rule.md): lessloc catches it as `repeated-literal`.
- [Keeping old and new versions side by side](https://lessloc.org/patterns/side-by-side.md): lessloc gives every session the rule: one implementation per rule.
- [Rebuilding what the standard library or framework has](https://lessloc.org/patterns/rebuilt-library.md): lessloc gives every session a rule against it and catches it as `simpler` and `reinvented`.
- [Copy-pasted test cases instead of one parametrized test](https://lessloc.org/patterns/copied-tests.md): lessloc catches it as `copied-tests`.
- [A second library for a job an installed one already does](https://lessloc.org/patterns/second-library.md): `new-dependency` names the library that is already installed.
- [The same data shape in several layers (DTO, model, entity)](https://lessloc.org/patterns/duplicate-shapes.md): `copy` catches identical type bodies.