CSS Property Decisions

Size components without clipping their content.

1. 1CSS box-sizing: include padding and borders in a declared size
2. 2CSS margin collapse: explain vertical gaps before changing them
3. 3CSS margin and padding shorthands: know which edge a value reaches
4. 4CSS min and max sizes: let content grow without breaking the layout
5. 5CSS border, radius, and outline: separate box edges from focus indication
6. 6CSS display and visibility: choose the intended hidden state
7. 7CSS aspect-ratio: reserve a stable box without fixing both dimensions
8. 8CSS contain: isolate work without cutting off content

Place repeated content while preserving its source sequence.

1. 1CSS grid template areas: name regions without rewriting document order
2. 2CSS grid auto-placement: let repeated records fill available tracks
3. 3CSS flex shorthand and order: distribute space without changing meaning
4. 4CSS float and flow-root: contain legacy text wraps
5. 5CSS isolation: give a component a stacking boundary
6. 6CSS pointer-events: remove decorative hit targets carefully
7. 7CSS scroll offsets: reveal anchors below a persistent header
8. 8CSS break-inside: keep small report units together in print

Keep text, links, and native controls readable.

1. 1CSS link decoration and states: preserve a visible navigation cue
2. 2CSS font shorthand and fallback stack: keep type stable during loading
3. 3CSS line height and measure: protect long-form reading
4. 4CSS form appearance and accent color: retain native behavior
5. 5CSS user-select: keep copyable data copyable
6. 6CSS hyphens: wrap prose with a declared language
7. 7CSS writing-mode: test layout axes rather than rotating text
8. 8CSS cursor: match the pointer cue to a real action

Use effects without carrying required meaning in decoration.

1. 1CSS background size and position: crop decoration deliberately
2. 2CSS invalid declarations and fallbacks: fail locally, not silently
3. 3CSS filter effects: use image treatment without obscuring evidence
4. 4CSS all and revert-layer: reset with a named boundary
5. 5CSS clip-path: clip decoration without hiding required content
6. 6CSS backdrop-filter: preserve contrast beneath translucent panels

Reserve space, scope gestures, choose paint effects, and preserve motion preferences.

1. 1CSS scrollbar-gutter: reserve space when a panel starts scrolling
2. 2CSS touch-action: scope gesture control to the interactive surface
3. 3CSS will-change: reserve a rendering hint for measured trouble
4. 4CSS transform-origin: move a visual pivot without moving the layout box
5. 5CSS mix-blend-mode: confine decorative blending to one surface
6. 6CSS mask-image: fade decoration without fading data
7. 7CSS shape-outside: let prose wrap around a floated decoration
8. 8CSS color-mix: derive a surface without assuming contrast
9. 9CSS light-dark: bind component colors to the active scheme
10. 10CSS font-variant-numeric: keep changing values aligned
11. 11CSS @page: set a print sheet contract without hiding overflow
12. 12CSS scroll-behavior: make smooth jumps optional

Keep controls readable, text stable, and user preference overrides narrow.

1. 1CSS field-sizing: let a note grow within firm limits
2. 2CSS caret-color: keep the insertion point visible
3. 3CSS placeholder-shown: style empty state without replacing a label
4. 4CSS user-invalid: delay visual errors until interaction warrants them
5. 5CSS autofill state: retain contrast when the browser fills a control
6. 6CSS font-size-adjust: steady readable fallback text
7. 7CSS font-display: choose what readers see while a font loads
8. 8CSS text-wrap balance: improve short headings without truncation
9. 9CSS tab-size: render source indentation without rewriting code
10. 10CSS scrollbar-width: keep scrolling discoverable
11. 11CSS forced-color-adjust: preserve a color only for a narrow reason
12. 12CSS prefers-contrast: strengthen an already readable interface

Container-relative sizing, local style queries, entry and discrete transitions, anchors, and view timelines.

1. 1CSS container query units: size type to its component
2. 2CSS container style queries: branch on a local token
3. 3CSS @starting-style: define an element's entry state
4. 4CSS discrete transitions: keep a closing panel visible long enough to fade
5. 5CSS interpolate-size: animate toward content height carefully
6. 6CSS anchor positioning: place a hint beside its control
7. 7CSS view timelines: tie optional motion to visible progress

Check font axes, marker fallbacks, image candidates, color gamut, and clipped decoration.

1. 1CSS variable fonts: declare the supported weight range
2. 2CSS font-optical-sizing: inspect the font's size-specific drawings
3. 3CSS font-synthesis-weight: prevent a counterfeit bold face
4. 4CSS @counter-style: give a finite marker set an honest fallback
5. 5CSS image-set: offer resolution choices for decoration
6. 6CSS color-gamut: add a wide-color accent behind an sRGB base
7. 7CSS oklch: tune a surface color without guessing contrast
8. 8CSS background-clip text: keep a decorative headline readable

Preserve reading position, focus clarity, source order, crop meaning, and scrolling affordances.

1. 1CSS overflow-anchor: exclude a volatile child, not the whole feed
2. 2CSS display contents: remove a layout box with care
3. 3CSS scroll-snap-stop: require a stop only for short, uniform cards
4. 4CSS :focus-within: mark the active field group
5. 5CSS :target: confirm the section reached by a fragment
6. 6CSS object-position: move a thumbnail crop without changing the evidence
7. 7CSS scrollbar-color: keep the scroll affordance visible
8. 8CSS text-decoration-skip-ink: keep underlined copy legible

Control font transfer, language-sensitive rendering, wrapped decoration, and open overlay paint.

1. 1CSS unicode-range: request only the font subset a page uses
2. 2CSS font-variant-ligatures: keep identifiers visually literal
3. 3CSS :lang(): style text from its declared language
4. 4CSS text-transform: change display case without corrupting source data
5. 5CSS box-decoration-break: control a highlight across wrapped lines
6. 6CSS ::backdrop: dim a modal without faking modality
7. 7CSS :popover-open: style only the visible popover state
8. 8CSS background-attachment local: move decoration with scrolled content

Style browser control states, filtered siblings, and timed-text paint without inventing behavior.

1. 1CSS ::file-selector-button: style the picker without replacing it
2. 2CSS :read-only: distinguish fixed values from disabled controls
3. 3CSS :indeterminate: show a mixed selection without inventing its meaning
4. 4CSS :default: mark the form's default action, not the last clicked button
5. 5CSS :required and :optional: reinforce a real form requirement
6. 6CSS ::placeholder: keep example text readable and disposable
7. 7CSS :nth-child(of selector): count only the rows that match
8. 8CSS ::cue: improve caption contrast without editing the transcript

Check direction-aware styling, vertical type, image scaling, blending, full screen, and print breaks.

1. 1CSS :dir(): respond to computed text direction
2. 2CSS text-orientation: choose glyph posture in vertical text
3. 3CSS text-emphasis: add a typographic cue without hiding meaning
4. 4CSS image-rendering: preserve a pixel map's hard edges
5. 5CSS font-variation-settings: use a verified custom axis
6. 6CSS background-blend-mode: keep the layer order explicit
7. 7CSS :fullscreen: lay out media after the browser enters full screen
8. 8CSS widows and orphans: keep short print paragraphs together

Distinguish grid tracks, clipping, native states, preference queries, motion, print color, and line breaking.

1. 1CSS auto-fit vs auto-fill: decide what empty grid tracks should do
2. 2CSS overflow: clip vs hidden: avoid an accidental scroll container
3. 3CSS :open: style the native open state without inventing one
4. 4CSS :user-valid: confirm a checked field without premature praise
5. 5CSS prefers-reduced-transparency: keep overlays readable by default
6. 6CSS animation-composition: preserve a base transform during an effect
7. 7CSS print-color-adjust: request fidelity without trusting printer color
8. 8CSS text-wrap: pretty: spend line-breaking work where copy merits it

Public shadow styling contracts, text highlights, view snapshots, selector gating, and baseline alignment.

1. 1CSS :host: make a component variant an explicit host contract
2. 2CSS ::part(): expose a narrow styling surface across Shadow DOM
3. 3CSS ::slotted(): style only the assigned element
4. 4CSS ::highlight(): paint searched text without changing its markup
5. 5CSS view-transition-name: give one live element one transition identity
6. 6CSS view-transition snapshots: animate presentation, then restore interaction
7. 7CSS @supports selector(): gate a relational selector safely
8. 8CSS baseline alignment: line up mixed text by its reading edge

Separate CSS state cues from component setup, document navigation, disclosure, and media behavior.

1. 1CSS :defined: preserve content while a custom element upgrades
2. 2CSS :state(): expose one internal custom-element state to styling
3. 3CSS ::details-content: style the disclosure body while keeping native behavior
4. 4CSS ::target-text: preserve the reader's place after a text-fragment link
5. 5CSS @view-transition: opt in only the pages that can tolerate a cross-page animation
6. 6CSS scripting media feature: reveal a fallback when scripts cannot run
7. 7CSS :modal: style the active modal state without faking modality
8. 8CSS :picture-in-picture: reflect detached video state without losing the page transcript