---
url: /reference/@cssdoc/core/interfaces/CssModifier.md
---
# Interface: CssModifier

Defined in: [packages/core/src/model.ts:19](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L19)

A modifier variation on a component's base class. How modifiers are spelled is configurable (see
[ParseOptions.modifierConvention](CompileCustomMediaOptions.md#modifierconvention)); the default is BEM (`.button--primary`).

## Properties

### affects?

```ts
optional affects?: object[];
```

Defined in: [packages/core/src/model.ts:75](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L75)

Set via an authored inline `@modifier -x — @affects <component>.<target> …` marker: this modifier
changes how a *descendant record* (typically a sub-component reached via `@structure`/`@memberOf`)
renders — e.g. `.table.-layout-stacked .table-cell::before {…}`. `target` is a part, pseudo-element,
or state name on `component`; the CSS rule causing the effect lives in that other record's own
stylesheet, not this one, so there'd otherwise be nothing on this modifier pointing a reader there.

#### component

```ts
component: string;
```

#### description?

```ts
optional description?: string;
```

#### target

```ts
target: string;
```

***

### alias?

```ts
optional alias?: object;
```

Defined in: [packages/core/src/model.ts:54](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L54)

Set when the modifier is an alias of another modifier. `canonical` names the canonical modifier;
`note` carries optional authored guidance from an inline `@alias` tag.

#### canonical?

```ts
optional canonical?: string;
```

#### note?

```ts
optional note?: string;
```

***

### deprecated?

```ts
optional deprecated?: object;
```

Defined in: [packages/core/src/model.ts:49](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L49)

Set when the modifier is deprecated. `canonical` (from an AST alias marker) is the modifier class
to use instead; `note` (from an authored inline deprecation tag on the `@modifier` line) is
free-text replacement guidance for cases where the replacement isn't itself a modifier.

#### canonical?

```ts
optional canonical?: string;
```

#### note?

```ts
optional note?: string;
```

***

### description?

```ts
optional description?: string;
```

Defined in: [packages/core/src/model.ts:37](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L37)

Prose from a `@modifier` doc tag, when authored.

***

### global?

```ts
optional global?: boolean;
```

Defined in: [packages/core/src/model.ts:67](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L67)

Set via an authored inline `@modifier -x — @global …` marker: this modifier applies to any
component/layout/rule/declaration (not just its parent record). When set, the modifier is matched
globally during validation and consumption checks.

***

### interaction?

```ts
optional interaction?: boolean;
```

Defined in: [packages/core/src/model.ts:61](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L61)

Set via an authored inline `@modifier -x — @interaction …` marker: a class toggled by script (a
JS interaction hook, e.g. `-should-animate`) that carries no CSS declarations of its own. Exempts
the modifier from the "documented modifier isn't defined by any selector" check, since it's
expected to have no CSS backing.

***

### name

```ts
name: string;
```

Defined in: [packages/core/src/model.ts:25](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L25)

The modifier as written, minus its outer punctuation — its exact spelling depends on the
convention: `button--primary` (BEM, the default), `-color-secondary` (rscss), `primary`
(bare/OOCSS), or `data-variant="ghost"` (CUBE attribute).

***

### pattern?

```ts
optional pattern?: boolean;
```

Defined in: [packages/core/src/model.ts:35](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L35)

Set when this is a `*` family (e.g. `-icon-*`) rather than a single modifier — authored as
`@modifier -icon-*` and/or derived from a `[class*="-icon-"]` selector. Concrete usages
(`-icon-arrow`) are matched against it as instances.

***

### prop

```ts
prop: string;
```

Defined in: [packages/core/src/model.ts:27](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L27)

The property segment — a grouping key derived from the modifier (e.g. `color`, `variant`, `primary`).

***

### selector?

```ts
optional selector?: string;
```

Defined in: [packages/core/src/model.ts:43](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L43)

The original CSS selector when the modifier was authored with a non-class form (attribute, ID,
`:host`) or an alias — parallel to [CssPart.selector](CssPart.md#selector). Absent for class and bare-name
modifiers, which are the common AST-derived forms.

***

### value?

```ts
optional value?: string;
```

Defined in: [packages/core/src/model.ts:29](https://github.com/thedannywahl/cssdoc/blob/main/packages/core/src/model.ts#L29)

The value segment, e.g. `secondary` or `ghost`; absent for boolean/flag modifiers.