# ClassNameSlug

**Kind:** Type

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

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

A function that customizes generated CSS class names.

`ClassNameSlug` defines a callback for customizing CSS class names generated by the styling layer. It receives the class-generation context and returns the string used as the generated class name, allowing applications to apply consistent naming or scoping rules.

## Definition

```ts
(hash: string, label: string, styleString: string) => string
```

## Diagram

```mermaid
graph LR
  Styles[Style definition] --> Generator[CSS class-name generator]
  Generator --> Slug[ClassNameSlug callback]
  Slug --> ClassName[Generated CSS class name]
  ClassName --> DOM[Rendered element]
```

## Usage

```ts
import type { ClassNameSlug } from './helper/css/common';

const createScopedClassName: ClassNameSlug = (rule, sheet) => {
  const sheetName = sheet?.options.name ?? 'styles';

  return `${sheetName}-${rule.key}`;
};

// Pass the callback to the CSS generation configuration.
const cssOptions = {
  classNameSlug: createScopedClassName,
};
```

## AI Coding Instructions

- Return deterministic class names so matching style rules produce stable output.
- Keep generated names valid for CSS selectors and avoid whitespace or unsupported characters.
- Preserve rule and stylesheet context when adding prefixes or scopes.
- Use this callback at the CSS generation configuration boundary rather than rewriting class names after rendering.