hyperpuncher modern css
Prefer the smallest native HTML and CSS solution that meets the project's browser targets.
Sources:
workflow
- inspect existing browser targets, conventions, and dependencies.
- identify the behavior before changing its implementation. keep application state and business logic in JavaScript.
- replace legacy workarounds with a stable native pattern when it is simpler.
- check current browser support for unfamiliar or recently introduced features. add a simple fallback only when a target browser needs one.
- test responsive layout, overflow, keyboard focus, zoom, reduced motion, and relevant color schemes.
- run the project's formatter, linter, and tests.
preferred patterns
| replace | prefer |
|---|---|
| absolute-position centering | grid place-items or flex alignment |
| child margin spacing hacks | gap |
| aspect-ratio padding hacks | aspect-ratio |
| physical left/right properties | logical inline/block properties |
| duplicated nested grid tracks | subgrid |
| component media queries | container queries |
| JavaScript sticky positioning | position: sticky |
100vh on mobile |
svh, dvh, or lvh according to intent |
| JavaScript parent class toggles for visual state | :has() |
| specificity-heavy resets | :where() |
| mouse-triggered focus rings | :focus-visible with a visible outline |
| Sass/Less nesting | native CSS nesting |
!important and specificity escalation |
cascade layers and low-specificity selectors |
| breakpoint ladders for fluid values | bounded clamp() values |
| hard-coded color variants | custom properties, oklch(), and color-mix() |
| combined transform rewrites | independent translate, rotate, and scale |
| simple JavaScript carousels | overflow and scroll snap |
| custom modal, popover, or accordion primitives | <dialog>, popover, or <details> when semantics fit |
| JavaScript scroll-chain prevention | overscroll-behavior |
| background images used for content | <img> with object-fit |
rules
- use container queries for reusable components and media queries for viewport or user preferences.
- use custom properties for design tokens and runtime theming.
- use
text-wrap: balancefor short headings andtext-wrap: prettyfor prose. - prefer semantic native HTML before recreating interaction with generic elements.
- preserve source order, keyboard behavior, focus management, labels, accessible names, and contrast.
- honor
prefers-reduced-motionand avoid fixed heights that clip enlarged text. - use
@supportsfor progressive enhancement when the baseline remains usable. - verify limited or experimental features against current MDN data and project browser targets.
- do not replace tested production behavior with an experimental feature without approval.
- do not build a complex CSS fallback merely to remove a small, clear JavaScript solution.