/Knowledge/sources/honojs__hono/llms-full/css-helper-createcsscontext-classnameslug--27c7aa00e667.md
css Helper: createCssContext > classNameSlug - hono-docs
css Helper: createCssContext classNameSlug Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt classnamesl...
css Helper: createCssContext > classNameSlug
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#classnameslug
Summary
By default, CSS class names are generated in the format css-1234567890. You can customize this by passing a classNameSlug function. The function receives three arguments: - hash - the default generated class name (e.g. `css-1234567...
Content
By default, CSS class names are generated in the format css-1234567890. You can customize this by passing a classNameSlug function.
The function receives three arguments:
hash- the default generated class name (e.g.css-1234567890)label- extracted from a/* comment */at the start of the CSS template (empty string if none)css- the minified CSS string
const { css, Style } = createCssContext({
id: 'my-styles',
classNameSlug: (hash, label) => (label ? `h-${label}` : hash),
})
const heroClass = css`
/* hero-section */
background: blue;
`
// Generated class name: "h-hero-section"
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#classnameslug",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / css Helper > `createCssContext` > `classNameSlug`",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 702,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "css Helper: createCssContext > classNameSlug",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki