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. lessloc catches it as style-copy.

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.

• 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:

.card { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.panel { border: 1px solid #ccc; padding: 8px; border-radius: 4px; }

Written well:

.surface, .notice { padding: 6px; border: 1px solid #ddd; border-radius: 6px; }

Caught as style-copy:

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:

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:

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