# CssClassName

**Kind:** Interface

**Source:** [`src/helper/css/common.ts`](https://github.com/honojs/hono/blob/main/src/helper/css/common.ts#L13)

**Part of:** [Helper](subsystem-src-helper)

`CssClassName` describes a CSS class definition and its related selector data. It stores the selector text, generated class name, CSS style string, nested selector entries, and external class names that should be associated with the class.

## Properties

| Property | Type |
|---|---|
| `[SELECTOR]` | `string` |
| `[CLASS_NAME]` | `string` |
| `[STYLE_STRING]` | `string` |
| `[SELECTORS]` | `CssClassName[]` |
| `[EXTERNAL_CLASS_NAMES]` | `string[]` |

## Diagram

```mermaid
graph LR
  CssClassName[CssClassName]
  CssClassName --> Selector[SELECTOR: string]
  CssClassName --> ClassName[CLASS_NAME: string]
  CssClassName --> StyleString[STYLE_STRING: string]
  CssClassName --> Selectors[SELECTORS: CssClassName[]]
  CssClassName --> ExternalClassNames[EXTERNAL_CLASS_NAMES: string[]]
  Selectors --> NestedSelector[CssClassName]
```

## Usage

```ts
import type { CssClassName } from "./helper/css/common";

const buttonClass: CssClassName = {
  SELECTOR: ".button",
  CLASS_NAME: "button",
  STYLE_STRING: "background: blue; color: white;",
  SELECTORS: [
    {
      SELECTOR: ".button:hover",
      CLASS_NAME: "button-hover",
      STYLE_STRING: "background: navy;",
      SELECTORS: [],
      EXTERNAL_CLASS_NAMES: [],
    },
  ],
  EXTERNAL_CLASS_NAMES: ["btn", "btn-primary"],
};

console.log(buttonClass.SELECTOR);
console.log(buttonClass.SELECTORS[0].STYLE_STRING);
```

## AI Coding Instructions

- Populate every `CssClassName` field when creating an object; use empty arrays when no nested selectors or external class names exist.
- Store CSS selector text in `SELECTOR` and the emitted class token in `CLASS_NAME`; do not treat them as interchangeable.
- Add nested or related selector definitions to `SELECTORS` using the same `CssClassName` shape.
- Keep `STYLE_STRING` as the CSS declaration content associated with the selector.
- Add class names from outside the generated CSS flow to `EXTERNAL_CLASS_NAMES`.