Why it works

1. min-width: 0 lets flex and grid items shrink below their content. Their default is min-width: auto, which is why a long word or a wide child overflows a grid.
2. interpolate-size: allow-keywords turns on transitions to and from auto for the whole page. Accordion that animates its height depends on it.
3. text-wrap: pretty tells the browser to spend more effort on line breaks. It avoids a last line that holds one short word, and Safari also evens out the ragged edge. The property inherits, so :root reaches every element.
4. text-wrap: balance gives headings lines of similar length.
5. font-synthesis: none stops the browser from faking a bold or italic that the font file lacks.
6. The two smoothing rules switch macOS from subpixel to grayscale antialiasing. Text renders thinner and matches the weight shown in Figma. Other systems ignore them.
7. 100svh is the viewport height with the mobile browser toolbars showing, so the page never sits behind them. 100dvh changes as the toolbar moves and re-lays out the page each time.
8. scrollbar-gutter: stable reserves the scrollbar's space. The page does not shift sideways when a modal locks scrolling or when content grows past one screen.
9. overflow-wrap: break-word breaks a word that cannot fit on a line, such as a URL, where it would otherwise run out of its box. Long text that wraps, truncates or clamps has the rest.
10. -webkit-text-size-adjust: 100% stops iOS from inflating text in landscape.
11. -webkit-tap-highlight-color: transparent removes the gray flash iOS and Android paint over a tapped element.
12. Inputs at 16px or more stop iOS Safari from zooming the page on focus. It does not zoom back out.
13. touch-action: manipulation tells the browser the element never double-tap zooms, so click fires without the wait.
14. user-select: none on controls stops a long press from selecting a button's label.

Rules

1. Load every weight and style the design uses. With font-synthesis: none a missing bold renders as regular.
2. With min-width: 0 on everything, a sized image, icon or avatar in a flex row shrinks to make room for the text beside it. Give it flex: none.
3. The reset removes the tap highlight, so every pressable element needs its own :active state. Press feedback has it.
4. Never fix input zoom with user-scalable=no or maximum-scale=1. That takes zoom away from people who need it.
5. Keep user-select: none to controls. Never set it on body or on links, because people copy text.
6. Text the user types inherits pretty, in textarea and contenteditable. If lines shift while typing, set text-wrap: stable on that element.
7. The reserved gutter puts centered content slightly off-center on a page too short to scroll. Chris Coyier documents this. Accept it.
8. svh is for documents and heroes. An app shell with UI pinned to the bottom uses height: 100dvh, so it tracks the toolbar. Emil Kowalski draws this line in his mobile-native skill.

Support

Credits

Why it works

1. inline is the direction text runs and block the direction blocks stack. Start and end follow dir and writing-mode, so one set of declarations renders mirrored in a right-to-left page.

Rules

1. The four-value margin, padding and inset shorthands stay physical. Use the -inline and -block shorthands.

Support

Credits

Why it works

1. The three channels are lightness, chroma and hue. Lightness is perceptual, so two colors with the same L look equally light whatever their hue. Scales and contrast become predictable.
2. Mixing in OKLCH keeps the hue of the base color, where sRGB mixing drifts toward gray.
3. One base value drives the whole family. Change the base and the hover and subtle versions follow.

Rules

1. Write grays, white and black with none as the hue, as in oklch(98% 0 none). A written hue of 0 is red, and it pulls every mix toward red. Half white oklch(1 0 0) and half a blue at hue 264 came out at hue 312 in Chrome and Safari. With none, or with the keyword white, it stayed at 264.

Credits

Why it works

1. color-scheme: light dark says the page supports both and follows the system setting. It also switches the browser's own UI, such as form controls, scrollbars and the default page background.
2. light-dark(a, b) returns a in a light scheme and b in a dark one.
3. It resolves per element. Set color-scheme on any subtree and every token used inside it flips. The same tokens serve a manual toggle and a section that is always dark.

Rules

1. Switch themes by setting color-scheme. Never redefine the tokens.
2. The grays use none for the hue, so they can be mixed with a color later without drifting toward red. OKLCH color has the measurement.
3. light-dark() takes two colors. Anything else that differs by theme, such as an image, needs its own rule.
4. Add <meta name="color-scheme" content="light dark"> so the browser paints the right background before the CSS loads.

Support

Credits

Why it works

1. clamp(min, preferred, max) uses the preferred value and stops at the two bounds.
2. The vw part of the preferred value grows with the viewport. The rem part sets where the growth starts.
3. --text-body above is 16px up to a 400px viewport, 28px from 1600px, and a straight line between.

Rules

1. Write the preferred value as rem + vw, never vw alone. clamp(1rem, 1vw, 1.75rem) stays at 16px on every screen narrower than 1600px, because 1vw is smaller than 1rem until then. A bare vw value also ignores the reader's font size setting.
2. Work the preferred value out from two points. The slope is (max - min) / (wide - narrow), in px over px, and times 100 it is the vw number. The rem part is min - slope × narrow.
3. Keep both bounds in rem so they follow the reader's font size.
4. For a font size, keep the maximum at or below 2.5 times the minimum. The vw part does not grow when the reader zooms, so fluid text grows less than the page. Past 2.5 times, 500% zoom cannot double the text at some widths, and that fails WCAG 1.4.4.
5. Put fluid values in tokens. Components use the token and never repeat the math.
6. For more than two or three sizes, derive a whole scale as One fluid scale for type and space does.

Credits

Why it works

1. The first six lines are the whole design decision. Widths and sizes are in rem, written as plain numbers, so 20 is 320px and 1.125 is 18px. Body text runs from 18px on a 320px screen to 20px on a 1240px one, and each heading step is 1.2 times the last on the phone and 1.25 times on the desktop.
2. --fluid is a length that is 0 at the narrow width, 1rem at the wide width and a straight line between. It holds the only clamp(), and that one bounds every token.
3. --at-narrow and --at-wide are the two base sizes, each weighted by how close the viewport is to its width. Their sum is step 0.
4. pow() raises each ratio to the step number. A step is the narrow scale's size times one weight plus the wide scale's size times the other, which is the line Fluid sizes with clamp() draws between two points.
5. A space token is a multiple of step 0, so it grows as much as body text does. A pair such as --space-s-l gives the two terms different multipliers. It is the small size on the phone and the large size on the desktop, 18px to 40px here.

Rules

1. Write the inputs as plain numbers. With 20rem and 77.5rem the --fluid line divides a length by a length, and Firefox does not support that.
2. Change an input in the rule that declares the steps. A step takes its value where it is declared, so a ratio set on a descendant changes nothing below it.
3. Derive sizes below step 0 from step 0 and the narrow ratio, as --step--1 does. With both ratios a small size shrinks as the screen grows.
4. Check the top step against the limit in Fluid sizes with clamp(). Step n passes when (size-wide / size-narrow) × (ratio-wide / ratio-narrow)ⁿ is 2.5 or less. The example gives 1.31 at step 4.
5. Write a pair only where a layout uses it, and never use one for a font size. A pair is steep on purpose and breaks that limit.
6. For a scale that follows the container, write 100cqi in place of 100vw. Container queries with container units has the rules.
7. Components use the tokens and never repeat the math.

Support

Credits

Why it works

1. A:has(+ B) looks ahead. It matches A when B follows it, so A adjusts its own bottom edge.
2. A + B looks back. It matches B when A precedes it, so B adjusts its own top edge.
3. The rules describe pairs, not pages. Whatever order an editor picks, each pair that meets gets its spacing and every other section keeps its default.
4. :where() adds no specificity, so a default that depends on the neighbor stays easy to override.

Rules

1. A section owns its default padding. Write a pair rule only for a meeting that looks wrong with the defaults.
2. Never fix spacing with a spacer element, a per-page override, or a modifier class the template has to work out.
3. Put the rule on the section whose edge changes. Look ahead to change a bottom edge and look back to change a top edge.
4. Name sections by what they are, such as .hero and .faq, never by the page they sit on. The pair rules depend on those names.
5. Keep the list short. When many pairs share a reason, such as two sections with the same background, write one rule for the reason.
6. Where the authoring system has no sibling selectors, keep these few rules in a plain stylesheet.

Support

Credits

Why it works

1. A margin describes the relation between two neighbors, so the element itself is the wrong place for it. A paragraph with margin-block-end leaves that margin behind when it is the last child of a padded box.
2. gap puts space between flex items only. Nothing is left above the first child or below the last.
3. * + * matches every child that has a sibling before it, so the first child gets no margin. Heydon Pickering named the selector the lobotomized owl.
4. The fallback in var(--flow-space, 1em) is in em, so the space above each element follows that element's font size.
5. A custom property on a child changes the space above that child alone. A heading asks for more room above itself, and whatever follows a heading asks for less.

Rules

1. Use the flex form in a component whose children you know. Use the margin form for content you do not control, such as CMS or Markdown output, because flex turns every child into a flex item.
2. A flex column stretches its children, so a button or link that is a direct child becomes full width. Set align-self: start on it.
3. In the margin form, zero the children's block margins first. Without that line the browser's default margins stay above the first child and below the last.
4. Keep the >. Without it the rule reaches every nested element, list items included.
5. The margin form counts a hidden child, so a hidden first child leaves a space at the top. gap ignores hidden children.

Support

Credits

Why it works

1. In a flex container an auto margin takes all the free space on its side. One auto margin pushes the item, and everything after it, to the far end.
2. Two opposite auto margins split the free space, so the item sits centered between its neighbors. The header stays at the top and the footer at the bottom, and either can be missing.
3. gap still applies. It is the least space the pushed item keeps when there is no free space left.

Rules

1. The container needs free space. A card has it when a grid row stretches it to match a taller neighbor. A column that is the only child of a taller box needs block-size: 100%.
2. The centered item is centered in the space left over, not in the section. A footer with no header pulls the title up by half the footer's height.
3. Write min-block-size, never block-size. A fixed height cuts off long content.
4. This is a flex technique. In a grid column the spare height goes to the rows first and every child grows.
5. It replaces a spacer element, space-between on a container with more than two children, and a wrapper around the group that should stay together.

Support

Credits

Why it works

1. Two curves look parallel only when they share a center. That means outer radius = inner radius + gap. Equal radii make the corner band look pinched.

Rules

1. Derive the outer radius from the inner one. The other way round reaches zero once the padding exceeds the radius.

Support

Credits

Why it works

1. The browser decides when a ring helps. Keyboard focus gets one, a mouse click on a button does not, and text inputs always do.
2. currentColor and em make the ring follow each component's color and size.
3. outline takes no layout space and survives forced-colors mode, which removes box-shadow.

Rules

1. On a filled button currentColor can fail contrast. Set the outline to the button's background color there.
2. A component that draws its ring with box-shadow keeps outline-color: transparent, never outline: none, so forced-colors mode can repaint it.

Support

Credits

Why it works

1. Touch browsers apply :hover on tap and keep it until the next tap elsewhere. hover: hover asks whether the primary input can hover.
2. pointer: fine asks whether it is precise, like a mouse. It rules out styluses and the Android devices that claim hover support.

Rules

1. Tailwind v4's hover: variant wraps itself in (hover: hover) only. Write the full query by hand everywhere else.
2. Touch users still need feedback on press. Give it with :active, which works for every input.

Support

Credits

Why it works

1. A native button responds the instant a finger lands. :active does the same on every kind of input. Feedback that waits for click arrives when the finger leaves, and that reads as lag.
2. scale() shrinks the label and icon along with the button, so the whole control reads as pressed.

Rules

1. Keep the scale between 0.95 and 0.98.
2. The reset removes the browser's tap highlight. Without this entry a tap gives no feedback at all.
3. When feedback needs a script, listen for pointerdown, not click.

Support

Credits

Why it works

1. The pseudo-element belongs to the button, so a click on it hits the button.
2. The negative inset grows the area to exactly 44px. min(0px, …) leaves larger targets alone.

Rules

1. overflow: hidden or clip on the button cuts the area off.
2. It does not work on <input>, which has no pseudo-elements. Wrap it in a <label>.

Support

Credits

Why it works

1. The pseudo-element belongs to the link and covers the card, so a click anywhere activates the link. It is a real link, so open in new tab and the status bar URL still work.
2. The link text stays short. A screen reader announces "Quarterly report" and not the whole card.
3. :has() moves the focus ring from the small link to the card it activates.
4. Other controls sit above the overlay and keep their own clicks.

Rules

1. No element between the card and the link may be positioned. The overlay would size itself to that element.
2. The link's own ring is made transparent, never removed, as One focus ring with :focus-visible requires. Write the full 2px solid transparent. Safari ignores outline-color on its default ring.
3. Text under the overlay cannot be selected. Accept it.
4. Put hover styles on .card:hover, inside the query from Hover styles only where hover exists.

Support

Credits

Why it works

1. :has() matches an element by its descendants or following siblings, and it accepts state pseudo-classes. Content and form state can style any ancestor.
2. On the root it works as a page-wide listener. The last rule locks page scroll while a modal dialog is open and lifts the lock when it closes, with nothing to clean up.

Rules

1. :modal matches showModal() only, so a non-modal dialog does not lock the page.
2. Keep scrollbar-gutter: stable with the scroll lock. Without it the page shifts sideways when the scrollbar disappears. The reset sets it.
3. :has() cannot be nested inside :has().

Support

Credits

Why it works

1. :invalid matches an empty required field on page load. The :user- versions match only after the user has edited the field or tried to submit.
2. Validity comes from HTML attributes: required, minlength, type, pattern.

Rules

1. Color alone is not enough feedback. Pair it with text or an icon.
2. The server still validates.

Support

Credits

Why it works

1. The browser measures the text itself, so the size is right on first paint, on paste and on window resize.
2. The textarea reaches its final height at once. Only the wrapper animates, and it clips the textarea until it catches up.
3. lh is one line at the element's own line-height. min-height: 3lh means three lines at any font size.

Rules

1. Bound it with min-height and max-height. A fixed height brings the fixed size back. Past max-height the textarea scrolls.
2. Put the border and background on the wrapper and leave the textarea bare. The box the user sees must be the one that animates.
3. Keep the wrapper content-box. The observer writes the textarea's full height, and a border-box wrapper would subtract its own border from it.
4. Write no fallback. A browser without field-sizing shows a fixed textarea that scrolls.

Support

Credits

Why it works

1. @starting-style gives the browser a "before open" state to transition from when the element leaves display: none. That is the entry.
2. allow-discrete on display delays the switch to display: none until the other transitions finish. That is the exit. overlay keeps the element in the top layer meanwhile.
3. The fade is not motion, so it runs for everyone. Only the slide sits inside the reduced-motion query.

Rules

1. Put @starting-style after the open-state rule. It has no extra weight in the cascade.
2. Never start from scale(0). If the element scales in, start at scale(0.95) with opacity: 0.
3. The dialog's ::backdrop needs the same three states and its own transition, as in the block. Without them it snaps while the dialog fades.
4. Write no fallback. Where the exit is not supported the element closes at once.
5. Keep [popover]:popover-open out of the selector list that opens the dialog. A browser that does not know one selector in a list drops the whole rule, and the dialog would open at opacity: 0. Inside @starting-style the shared list is safe, because every browser that reads the block knows the selector.

Support

Credits

Why it works

1. popovertarget makes the button the popover's anchor, so no anchor names are needed.
2. position-area places the popover on a 3×3 grid around the anchor. The fallbacks flip it when it would overflow the viewport.

Rules

1. Use span-* values, not center. Adam Argyle found that center stops the flips when the popover is wider than its grid cell.
2. margin-block-start is the gap between trigger and popover. The flip mirrors it, so the gap stays on the trigger's side.
3. A popover opened by a script has no anchor and lands in the top-left corner. Pass the trigger, as in menu.showPopover({ source: button }).
4. Write no fallback. Without support the @supports block is skipped and the popover opens centered in the viewport.

Support

Credits

Why it works

1. ::details-content is the box the browser wraps around everything in <details> except the <summary>.
2. interpolate-size: allow-keywords lets a transition run between a length and auto. It inherits, so one declaration on :root covers the page.
3. A closed <details> hides its content with content-visibility. Transitioning that property with allow-discrete keeps the content rendered until the height reaches zero. Leave it out and the close snaps.

Rules

1. Put padding on an element inside, never on ::details-content. Padding there stays visible when the accordion is closed.
2. Give sibling <details> the same name attribute to keep one open at a time.
3. Hide the marker with summary { list-style: none; } plus summary::-webkit-details-marker { display: none; } for Safari.
4. Write no fallback. Safari and Firefox do not support interpolate-size yet, so they open and close without the animation.

Support

Credits

Why it works

1. inset() clips from each edge, in the order top, sides, bottom. A bottom value of 100% hides the whole box. The percentage refers to the element's own height, so nothing has to measure it.
2. A negative inset widens the clip beyond the box. That leaves room for the shadow at the sides and the bottom. The top stays at 0, so no shadow shows where the menu meets its trigger.
3. Layout never changes. The panel has its full size the whole time and nothing around it moves.
4. The clipped part takes no pointer events, so a closed menu cannot be clicked.
5. visibility in the transition switches to hidden only when the close has finished. That takes the links out of the tab order.

Rules

1. The negative inset must be larger than the shadow's blur plus its offset.
2. Use it for panels that overlap the page. A closed panel in the normal flow leaves a gap, so an accordion uses Accordion that animates its height.
3. Add round with a radius inside inset() only when the clip itself should have round corners. The element's own border-radius still applies.

Support

Credits