---
title: "prefer-direct-styling"
description: "Reports a selector variant that styles another element, such as [&_button]:."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# prefer-direct-styling

This rule reports a selector variant that styles another element from the
current one, such as `[&_button]:` on a parent. The styles of the button then
live in the parent, so reading the button does not show them. The `stylistic`
preset enables this rule.

## Reported

```tsx
const toolbar = style("flex gap-2 [&_button]:p-4");
```

> prefer-direct-styling: variant selector `& button` styles another element. Attach these styles directly to that element
> 
> Example:1:35

## Fixed

```tsx
const toolbar = style("flex gap-2");
const button = style("p-4");
```

## How to fix

- Give the styles to the element itself with its own `style()` call, as in the
  example.
- If the element comes from markup that you cannot change, such as rendered
  Markdown, keep the selector and add a
  [suppression comment](/docs/configuration#suppression-comments) with the
  reason.

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | off |
| `strict` | off |
| `stylistic` | warn |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/prefer-direct-styling/index.mdx