# good-css

> Strong opinions about modern CSS technique, borrowed from experts, for agents to know and reach for.

47 techniques for modern CSS in 8 categories. Every entry has the same shape: when to use it, the CSS, why it works, the rules, and who it is borrowed from. Every entry also runs as a live specimen in the browser.

## When to use this

- You are about to write, edit or review CSS for a page or a component. Read the skill first and reach for an entry instead of a set of breakpoints, a wrapper element or a script.
- You need the current technique for one problem, such as a centered content column, a color palette, a carousel, an accordion, a focus ring or a view transition. Find the entry by its title under its category below.
- You want to see a technique running before you use it, or test it in another browser. Open the entry's specimen.

Do not use it as a framework or a component library. It ships no package and no class names. The properties and values are the technique, and the names in the examples are illustrative. Write them in whatever the project already uses.

## How to use it

To write CSS, read the skill. It is the same list, cut down to what an agent needs while writing.

- Fetch [SKILL.md](https://good-css.com/skills/good-css/SKILL.md). It is 5 KB and holds the rules for all CSS and a table that says which reference file to read before which task.
- Fetch only the reference files the table names for your task. They sit beside it, under `https://good-css.com/skills/good-css/references/`. One component needs two or three.
- Install the skill only when your user asked you to. [The README](https://github.com/vojtaholik/good-css#if-you-are-an-agent) has the command.

To study the list, or to learn why a technique works and who it is borrowed from, read the entries.

- Fetch [the whole list as Markdown](https://good-css.com/index.md). It is one file of 89 KB with every entry and its code.
- Or fetch one entry. Each link under a category below is that entry as Markdown, and its specimen is at the same URL without `.md`.
- Any page answers a request with `Accept: text/markdown` in Markdown.
- Follow the "Rules" of an entry when you apply it. They are the conditions under which it works.
- A specimen page runs the entry's own code blocks, verbatim, with a fixture around them. View its source to see the technique in a working document.

## Foundations

- [The reset](https://good-css.com/specimen/the-reset.md): Start every new project with it. [Specimen](https://good-css.com/specimen/the-reset)
- [Logical properties](https://good-css.com/specimen/logical-properties.md): Use them in place of every left, right, top and bottom, in spacing, borders, offsets and alignment. [Specimen](https://good-css.com/specimen/logical-properties)
- [OKLCH color](https://good-css.com/specimen/oklch-color.md): Write colors in oklch() and derive every related color from a base with color-mix(in oklch, …). [Specimen](https://good-css.com/specimen/oklch-color)
- [One set of color tokens for light and dark](https://good-css.com/specimen/one-set-of-color-tokens-for-light-and-dark.md): Use it on any site with a dark mode. [Specimen](https://good-css.com/specimen/one-set-of-color-tokens-for-light-and-dark)
- [Fluid sizes with clamp()](https://good-css.com/specimen/fluid-sizes-with-clamp.md): Use it for anything that should grow with the screen, starting with font sizes and section spacing. [Specimen](https://good-css.com/specimen/fluid-sizes-with-clamp)
- [One fluid scale for type and space](https://good-css.com/specimen/one-fluid-scale-for-type-and-space.md): Use it when a design has more than two or three font sizes. [Specimen](https://good-css.com/specimen/one-fluid-scale-for-type-and-space)

## Layout

- [Content grid with breakouts](https://good-css.com/specimen/content-grid-with-breakouts.md): Use it wherever you would reach for a centered max-width container. [Specimen](https://good-css.com/specimen/content-grid-with-breakouts)
- [Intrinsic grid](https://good-css.com/specimen/intrinsic-grid.md): Use it for any set of equal cards or tiles. [Specimen](https://good-css.com/specimen/intrinsic-grid)
- [Subgrid rows shared across cards](https://good-css.com/specimen/subgrid-rows-shared-across-cards.md): Use it when cards in a row have parts that should line up, such as title, body and footer, whatever the length of their content. [Specimen](https://good-css.com/specimen/subgrid-rows-shared-across-cards)
- [Sidebar that wraps on its own](https://good-css.com/specimen/sidebar-that-wraps-on-its-own.md): Use it for any pair where one side has an ideal width and the other takes the rest, such as a media object, an input with a button, or a page with an aside. [Specimen](https://good-css.com/specimen/sidebar-that-wraps-on-its-own)
- [Container queries with container units](https://good-css.com/specimen/container-queries-with-container-units.md): Use it for any component that appears in slots of different widths. [Specimen](https://good-css.com/specimen/container-queries-with-container-units)
- [Stack layers with grid](https://good-css.com/specimen/stack-layers-with-grid.md): Use it whenever things sit on top of each other, such as text over an image, a badge on a card, or two icons that swap. [Specimen](https://good-css.com/specimen/stack-layers-with-grid)
- [Safe alignment](https://good-css.com/specimen/safe-alignment.md): Use it wherever content is centered or end-aligned in a container that can become too small, such as a tab row, a toolbar or a vertically centered modal. [Specimen](https://good-css.com/specimen/safe-alignment)
- [overflow: clip over hidden](https://good-css.com/specimen/overflow-clip-over-hidden.md): Use it whenever you want to cut off overflow and do not need scrolling. [Specimen](https://good-css.com/specimen/overflow-clip-over-hidden)

## Spacing and shape

- [Section spacing that depends on its neighbors](https://good-css.com/specimen/section-spacing-that-depends-on-its-neighbors.md): Use it on any page built from reorderable sections, above all in a CMS where an editor decides the order. [Specimen](https://good-css.com/specimen/section-spacing-that-depends-on-its-neighbors)
- [Space between siblings set by the parent](https://good-css.com/specimen/space-between-siblings-set-by-the-parent.md): Use it wherever elements sit one above another, such as form fields, the parts of a card or the blocks of an article. [Specimen](https://good-css.com/specimen/space-between-siblings-set-by-the-parent)
- [Push one item away with an auto margin](https://good-css.com/specimen/push-one-item-away-with-an-auto-margin.md): Use it when one item in a flex row or column sits apart from the rest, such as the actions at the bottom of a card, the account link at the end of a toolbar, or a title centered in a full-height section between a header and a footer. [Specimen](https://good-css.com/specimen/push-one-item-away-with-an-auto-margin)
- [Concentric nested radius](https://good-css.com/specimen/concentric-nested-radius.md): Use it wherever a rounded element sits inside a padded rounded parent, such as an image in a card or a button in an input. [Specimen](https://good-css.com/specimen/concentric-nested-radius)

## Text and media

- [Long text that wraps, truncates or clamps](https://good-css.com/specimen/long-text-that-wraps-truncates-or-clamps.md): Use it on any text that comes from a user or a CMS, such as names, titles, URLs and excerpts. [Specimen](https://good-css.com/specimen/long-text-that-wraps-truncates-or-clamps)
- [Image box that holds any upload](https://good-css.com/specimen/image-box-that-holds-any-upload.md): Use it on every image, video or embed whose file you do not control, such as thumbnails, cover photos and avatars. [Specimen](https://good-css.com/specimen/image-box-that-holds-any-upload)
- [Tabular numbers](https://good-css.com/specimen/tabular-numbers.md): Use it on any number that changes or sits in a column, such as prices, tables, timers and counters. [Specimen](https://good-css.com/specimen/tabular-numbers)
- [Label centered on its letters with text-box](https://good-css.com/specimen/label-centered-on-its-letters-with-text-box.md): Use it on single-line labels in buttons, badges and chips, so equal padding looks equal in any font. [Specimen](https://good-css.com/specimen/label-centered-on-its-letters-with-text-box)
- [Icon sized by the text beside it](https://good-css.com/specimen/icon-sized-by-the-text-beside-it.md): Use it on every icon that sits next to a label, in buttons, links, list rows and notices. [Specimen](https://good-css.com/specimen/icon-sized-by-the-text-beside-it)

## Interaction

- [One focus ring with :focus-visible](https://good-css.com/specimen/one-focus-ring-with-focus-visible.md): Use it as the focus style for every interactive element. [Specimen](https://good-css.com/specimen/one-focus-ring-with-focus-visible)
- [Hover styles only where hover exists](https://good-css.com/specimen/hover-styles-only-where-hover-exists.md): Use it on every :hover rule, so a tap on a touch screen does not leave the hover state stuck. [Specimen](https://good-css.com/specimen/hover-styles-only-where-hover-exists)
- [Press feedback](https://good-css.com/specimen/press-feedback.md): Use it on every button and anything else that can be pressed. [Specimen](https://good-css.com/specimen/press-feedback)
- [Hit area larger than the visual](https://good-css.com/specimen/hit-area-larger-than-the-visual.md): Use it on icon buttons, close buttons and any target that looks smaller than 44px. [Specimen](https://good-css.com/specimen/hit-area-larger-than-the-visual)
- [Whole card clickable from one link](https://good-css.com/specimen/whole-card-clickable-from-one-link.md): Use it for cards, list rows and tiles where the whole area should navigate. [Specimen](https://good-css.com/specimen/whole-card-clickable-from-one-link)
- [:has() for parent and page state](https://good-css.com/specimen/has-for-parent-and-page-state.md): Use it wherever a script adds a class to a parent because of what it contains or what state a child is in. [Specimen](https://good-css.com/specimen/has-for-parent-and-page-state)
- [Form feedback with :user-invalid](https://good-css.com/specimen/form-feedback-with-user-invalid.md): Use it for inline form validation, in place of blur listeners and a "touched" class. [Specimen](https://good-css.com/specimen/form-feedback-with-user-invalid)
- [Textarea that grows with its content](https://good-css.com/specimen/textarea-that-grows-with-its-content.md): Use it for any multi-line input, such as a chat composer or a comment box. [Specimen](https://good-css.com/specimen/textarea-that-grows-with-its-content)

## Motion

- [Opt-in motion](https://good-css.com/specimen/opt-in-motion.md): Use it for every transition or animation that moves or scales something. [Specimen](https://good-css.com/specimen/opt-in-motion)
- [Motion tokens](https://good-css.com/specimen/motion-tokens.md): Use them in every transition and animation. [Specimen](https://good-css.com/specimen/motion-tokens)
- [Transition a custom property with @property](https://good-css.com/specimen/transition-a-custom-property-with-property.md): Use it when one state change should drive several values together, or when a script feeds a number such as pointer position or progress into CSS and the result should ease. [Specimen](https://good-css.com/specimen/transition-a-custom-property-with-property)
- [Shadow change that fades and does not repaint](https://good-css.com/specimen/shadow-change-that-fades-and-does-not-repaint.md): Use it on cards that lift on hover, most of all in a grid of many cards or with a large blur. [Specimen](https://good-css.com/specimen/shadow-change-that-fades-and-does-not-repaint)
- [Cross-document view transitions](https://good-css.com/specimen/cross-document-view-transitions.md): Use it on any multi-page site to crossfade between pages. [Specimen](https://good-css.com/specimen/cross-document-view-transitions)
- [Indicator that slides to the active item](https://good-css.com/specimen/indicator-that-slides-to-the-active-item.md): Use it for the underline on a tab row or the bar beside a side nav. [Specimen](https://good-css.com/specimen/indicator-that-slides-to-the-active-item)

## Show and hide

- [Enter and exit transitions from display: none](https://good-css.com/specimen/enter-and-exit-transitions-from-display-none.md): Use it for dialogs, popovers and anything else toggled with display. [Specimen](https://good-css.com/specimen/enter-and-exit-transitions-from-display-none)
- [Popover anchored to its trigger](https://good-css.com/specimen/popover-anchored-to-its-trigger.md): Use it for dropdown menus and other popovers opened by a click. [Specimen](https://good-css.com/specimen/popover-anchored-to-its-trigger)
- [Accordion that animates its height](https://good-css.com/specimen/accordion-that-animates-its-height.md): Use it for FAQs and any other disclosure. [Specimen](https://good-css.com/specimen/accordion-that-animates-its-height)
- [Reveal with clip-path](https://good-css.com/specimen/reveal-with-clip-path.md): Use it for dropdowns, menus and panels that open over the page and whose height is not known. [Specimen](https://good-css.com/specimen/reveal-with-clip-path)

## Scroll and viewport

- [Carousel on native scroll](https://good-css.com/specimen/carousel-on-native-scroll.md): Use it for any horizontal row of cards. [Specimen](https://good-css.com/specimen/carousel-on-native-scroll)
- [Scroll area between a fixed header and footer](https://good-css.com/specimen/scroll-area-between-a-fixed-header-and-footer.md): Use it for the body of a modal, a chat list, a drawer or a sidebar. [Specimen](https://good-css.com/specimen/scroll-area-between-a-fixed-header-and-footer)
- [Styles that apply only when a scroller overflows](https://good-css.com/specimen/styles-that-apply-only-when-a-scroller-overflows.md): Use it on any row that may or may not fit, such as tabs, a toolbar or a table wrapper. [Specimen](https://good-css.com/specimen/styles-that-apply-only-when-a-scroller-overflows)
- [Anchor targets that clear a sticky header](https://good-css.com/specimen/anchor-targets-that-clear-a-sticky-header.md): Use it on any page with in-page links and a fixed or sticky header. [Specimen](https://good-css.com/specimen/anchor-targets-that-clear-a-sticky-header)
- [No rubber-band bounce on desktop](https://good-css.com/specimen/no-rubber-band-bounce-on-desktop.md): Use it on app-like pages with fixed UI, such as a sidebar or a sticky header. [Specimen](https://good-css.com/specimen/no-rubber-band-bounce-on-desktop)
- [Content clear of the notch](https://good-css.com/specimen/content-clear-of-the-notch.md): Use it on fixed headers, bottom bars, toasts and sheets in anything that should feel like an app on a phone. [Specimen](https://good-css.com/specimen/content-clear-of-the-notch)

## Files

- [The skill for agents](https://good-css.com/skills/good-css/SKILL.md)
- [The whole list as Markdown](https://good-css.com/index.md)
- [The same file as llms-full.txt](https://good-css.com/llms-full.txt)
- [The page for people, with every specimen](https://good-css.com/)
- [Sitemap](https://good-css.com/sitemap.xml)

## About this site

- [About](https://good-css.com/about.md): what the list is and who maintains it
- [Contact](https://good-css.com/contact.md): where to report a wrong technique or credit
- [Privacy](https://good-css.com/privacy.md): what the site does with a visit