/Knowledge/sources/honojs__hono/llms-full/css-helper-css-extending--19f081b81d7e.md
css Helper: css > Extending - hono-docs
css Helper: css Extending Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt extending Summary You can ex...
css Helper: css > Extending
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#extending
Summary
You can extend the CSS definition by embedding the class name. ```tsx const baseClass = csscolor: white; background-color: blue; const header1Class = css${baseClass} font-size: 3rem; const header2Class = css` ${baseClass} font-si...
Content
You can extend the CSS definition by embedding the class name.
const baseClass = css`
color: white;
background-color: blue;
`
const header1Class = css`
${baseClass}
font-size: 3rem;
`
const header2Class = css`
${baseClass}
font-size: 2rem;
`
In addition, the syntax of ${baseClass} {} enables nesting classes.
const headerClass = css`
color: white;
background-color: blue;
`
const containerClass = css`
${headerClass} {
h1 {
font-size: 3rem;
}
}
`
return c.render(
<div class={containerClass}>
<header class={headerClass}>
<h1>Hello!</h1>
</header>
</div>
)
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#extending",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / css Helper > `css` > Extending",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 696,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "css Helper: css > Extending",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki