Zero Specificity (with Stephen Margheim)

Jared talks with Stephen Margheim about a “missing” middle layer in modern design systems: reusable CSS affordances that sit between Tailwind utilities and full components. Stephen shares how building a no-JavaScript half-star rating input (radio buttons + labels + SVG + careful hover/layout CSS) reinforced his bias toward solving problems with the smallest toolset to avoid incidental complexity and to make solutions portable across frameworks. That philosophy leads to his critique that components are a poor vehicle for purely visual styles because they bundle structure, behavior, and aesthetics in ways that are hard to reuse—so instead, teams should name and standardize visual signals like “button” as composable classes that can apply to many semantic HTML elements. He explains how Tailwind can support this via custom utilities (@utility), tree-shaking, autocomplete, variants, and low-specificity defaults using :where(), and argues a four-layer approach—tokens → utilities → affordances → components—helps teams maintain design systems and progressively drop JavaScript as the web platform adds more native UI primitives (dialog, popover, details/name, etc.). Links: fractaledmind.com Web Awesome Font Awesome Tailwind: Introducing Catalyst Catalyst docs shadcn/ui daisyUI Tailwind docs: Functions & directives MDN: :where() selector MDN: Popover API MDN: CSS anchor positioning MDN: <dialog> element MDN: Invoker Commands API MDN blog: Exclusive accordions with <details name> web.dev: Interop 2026 proposals Ruby on Rails SQLite Dead Code Podcast Links: Mastodon X Jared’s Links: Mastodon X twitch.tv/jardonamron Jared’s Newsletter & Website Episode Transcript Hosted on Acast. See acast.com/privacy for more information.