The Coyier CSS starter 🔗 **Source:** [The Coyier CSS starter](https://piccalil.li/links/the-coyier-css-starter/) > [!note]+ Document Notes > ```markdown > > --- > tags: [CSS, Frontend, Best-Practices] > author: [Chris Coyier] > source: [Piccalilli] > reference: [https://piccalil.li/links/the-coyier-css-starter/] > date created: 2025-10-01 00:00 > > --- > > # 🏷️ Title: The Coyier CSS starter > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - The piece evaluates a CSS “starter,” not a reset. - It supports global styles first, with careful specificity. - Stakeholders include frontend engineers, designers, and educators. - Risks include global styles interfering with component needs. - Bottom line: adopt, adapt, and align with team context. ## 📖 Main Content - The author favors sensible global CSS and selective adoption. - They caution on using @layer without team-wide understanding. - They endorse clamped root font sizes and fluid typography. - They dislike global body padding for production risk. - They praise balanced headings and list styling with ch units. - They flag font-dependent letter-spacing and font-weight risks. - Form defaults should fill inline space; layout handles splits. - Textarea min height could be more generous; test in context. - Tables get sensible defaults; prefer em/rem over percentages. - They reject default view transitions but like smooth scrolling. ### 🗒️ Notes - “Starter, not reset” aligns with global-styles-first teaching. - Use @layer cautiously; it changes cascade and specificity. - Prefer separate font properties over font shorthand for clarity. - Avoid global body padding in production; harms full-bleed layouts. - Headings: tight line-height, zero top margin, text-wrap: balance. - Beware global letter-spacing/weight; font-family matters. - Lists: inside markers; nested indent via ch; check dl semantics. - Forms: font: inherit; inputs 100% inline-size except buttons. - Buttons invert Canvas/CanvasText for system color compatibility. - Textarea: field-sizing: content; set reasonable min-block-size. - Tables: caption bottom; collapsed borders; consistent unit system. - Motion: avoid default view transitions; smooth scroll is fine. - Guidance: pick parts, build team-fit starter, iterate over time. ## 📚 References - The Coyier CSS Starter commentary (https://piccalil.li/links/the-coyier-css-starter/) - CSS Cascade Layers (@layer) overview (https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) - text-wrap: balance proposal and support (https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) - CSS logical properties (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties) - prefers-reduced-motion media feature (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - View Transitions API (https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) ## 🗣️ Paraphrase - The starter promotes robust defaults while avoiding heavy resets. - Teams should adopt only what fits their workflows and typography. ## 📰 Newsletter - This week: a practical take on a CSS starter, not a reset. - Highlights: cautious @layer use, fluid type, and safer forms. - WordPress themers: avoid global body padding to protect full-bleed. - Prefer em/rem in tables for contextual sizing. - Try text-wrap: balance for headings in block themes. - Read the analysis and compare with your theme.json settings. ## ✅ Action Items - DevRel - Publish a “Starter vs Reset” explainer with demos. - Host office hours on cascade layers and theme.json interplay. - Developer advocacy: plans, talks, demos, and measurable outcomes. - Demo clamped root font size and fluid type in WP themes. - Measure CLS/legibility impact across default themes. - Education: workshops, curricula, office hours, mentorship programs. - Create labs on @layer scopes and specificity budgeting. - Developer experience: docs, SDKs, examples, templates, quickstarts. - Provide WP block theme starter with optional CSS modules. - Developer marketing: campaigns, content, funnels, and attribution. - Run a campaign on global styles pitfalls and fixes. - Community management: moderation, code of conduct ops, surveys. - Survey themers about default global styles pain points. - Internal/external/cross-project: align goals, SLAs, and feedback loops. - Align CSS starter guidance across design systems and WP docs. - OSPO - Policy & Governance: contribution policies, decision rights, charters. - Define guidelines for adopting CSS APIs in shared starters. - License Compliance: policies, scanning, review, and training cadence. - Ensure starters include license headers and third-party notices. - Security Management: vuln intake, embargo policy, signing, attestations. - Version and sign distributed starter packages. - Software Inventory: SBOM strategy, ownership, freshness SLOs. - Track CSS starter dependencies and browser-API assumptions. - Developer Support: training, tooling, legal guardrails, consultation hours. - Offer consultations on cascade layers in product code. - Community Engagement: upstream funding, MoUs, operator agreements. - Fund docs for View Transitions and motion-reduction patterns. - Strategic Alignment: KPIs, OKRs, executive reporting, initiative roadmaps. - KPI: adoption rate of accessible default patterns. - Community - Maintainers: roadmap clinics, governance templates, release hygiene. - Establish versioned starter CSS with change logs. - Contributors: onboarding paths, “first issue” rotations, pairing sessions. - Tag issues: unit consistency, typography, motion preferences. - Sponsors: transparent budgets, milestones, deliverables, impact reports. - Sponsor tests for accessibility defaults in starters. - Ecosystem: cross-project incident drills and coordinated disclosures. - Drill for breaking changes in cascade or unit systems. - WordPress - Core: priorities, issue triage, performance budgets, release criteria. - Evaluate text-wrap: balance defaults in block editor. - Core Performance: profiling plans, metrics dashboards, perf bounties. - Benchmark fluid type impact on layout stability. - Core AI: responsible AI guardrails, evaluation sets, pilot projects. - Generate starter diffs with AI but gate with lint rules. - Core Program: coordination rituals, cross-team dependencies, retrospectives. - Sync design tools with theme.json and CSS starter updates. - Mobile: app backlog, telemetry review, offline UX improvements. - Respect prefers-reduced-motion in mobile webviews. - Playground: browser labs, reproducible bugs, education modules. - Build labs on @layer and logical properties. - Community: meetup kits, WordCamp playbooks, speaker mentorship. - Run “CSS Starters that Don’t Bite” talks. - Training: lesson plans, learning paths, certification pilots. - Add unit-selection modules (em/rem/ch/px). - Marketing: campaigns, narratives, social editorial calendars. - Promote accessible motion defaults as brand value. - Support: response SLAs, knowledge base gaps, escalation paths. - KB: fix global body padding affecting full-bleed blocks. - Design: UX audits, design tokens, research backlogs. - Tokenize typography clamps and spacing scales. - Documentation: DevHub/HelpHub gaps, examples-first patterns, style guide. - Document safe heading defaults and list semantics. - Photos: content drives, moderation guidelines, taxonomy hygiene. - N/A. - TV: submission guides, caption quality, content indexing. - N/A. - Polyglots: translation sprints, glossary alignment, locale coverage. - Translate starter docs and comments. - Accessibility: WCAG reviews, tooling, issues heatmap, audits cadence. - Default motion off; provide opt-in transitions. - Meta: .org roadmap, API reliability, contributor tools. - Starter presets in theme scaffolds. - CLI: command coverage, UX docs, plugin scaffolds, smoke tests. - wp scaffold theme --starter-css flags for options. - Hosting: cross-host checklists, defaults, telemetry for reliability. - Test starters across caching/CDN alterations. - Tide: scoring transparency, false-positive review loops, plugin outreach. - Score themes for accessible defaults and unit consistency. - Openverse: ingestion pipelines, moderation policy, education tie-ins. - N/A. - Themes: review throughput, lints, mentoring, test matrices. - Add lint rules: no global body padding; unit consistency. - Plugins: review throughput, security liaisons, provenance checks. - Guard plugin CSS from overriding global starters poorly. - The WPCC - Programs: fellowship tracks, microgrants, maintainer stipends. - Fund accessibility-first CSS defaults research. - Projects: governance clinics, documentation sprints, release teams. - Publish community starter with transparent governance. - Funding experiments: matched grants, milestone payouts, transparent ledgers. - Reward measurable accessibility improvements in starters. - FAIR - Technical independence: local metadata, provenance, and signature checks. - Sign starter releases and publish checksums. - Policies and covenants: funding transparency, sunset clauses, anti-capture. - Public roadmap and criteria for API adoption. - Productized governance artifacts: charters, operator agreements, scorecards. - Scorecard for CSS default safety and portability. ## 🧪 Hypotheses - Teams using clamped root font sizes ship fewer ad-hoc font overrides. - Default body padding increases layout bugs in full-bleed designs. - Using em/rem in tables improves contextual readability scores. - text-wrap: balance reduces heading orphans without harming CLS. - Opt-in view transitions improve perceived performance for 60% of users. ### 📊 Methodology - A/B test themes with and without body padding across full-bleed blocks. - Typography legibility study comparing unit systems in table contexts. - Field data: measure CLS and LCP with text-wrap: balance toggled. - Survey developer error rates when using @layer with training vs none. ### ❓ Questions - Which defaults best balance safety and flexibility? - Where should theme.json end and CSS starters begin? - How does @layer training change bug frequency? ### 🔮 Future Research - Explore automatic unit-consistency linters for design systems. - Study motion preferences across WordPress user segments. ### 💡 Implications - Practice: adopt modular starters with opt-in motion. - Policy: codify unit and motion defaults in guidelines. - Security: sign and version starters to prevent drift. - Education: teach specificity budgets and cascade layers. - Funding: support research on accessible defaults. ### 🧠 Learning Styles Assessment - Reading level estimate: Flesch-Kincaid Grade ~9–10. - Visual learners - Present: code snippets. - Improve: before/after visuals of headings and tables. - Aural learners - Present: none. - Improve: short audio summary of best practices. - Verbal learners - Present: definitions and rationale. - Improve: glossaries for CSS terms. - Kinesthetic learners - Present: actionable tweaks. - Improve: sandboxes and step-by-step labs. - Logical learners - Present: structured arguments. - Improve: decision trees for choosing defaults. - Social learners - Present: community guidance. - Improve: moderated discussions and peer reviews. - Solitary learners - Present: concise notes. - Improve: self-check quizzes. - Naturalistic learners - Present: none. - Improve: sustainability analogies for motion cost. ### 📊 Accessibility Assessment - Screen reader semantics - Present: caption-side guidance and roles usage hints. - Improve: explicit alt text and language attributes guidance. - Keyboard navigation - Present: smooth scroll with focus-within. - Improve: document skip links and focus states. - Contrast and readability - Present: not specified. - Improve: enforce 4.5:1 and line-height checks. - Text resizing and reflow - Present: logical properties aid responsiveness. - Improve: verify 200% zoom and reduced motion support. - Media and captions - Present: not applicable. - Improve: provide transcripts for demos if any. - Forms and interactions - Present: input sizing, labels block display. - Improve: inline validation and accessible toasts. - Standards reference - Map gaps to WCAG 2.2 AA criteria. ### 🌍 DEIB Assessment - Cultural breadth - Present: general web guidance. - Improve: global examples and translations. - Inclusive language - Present: neutral and direct. - Improve: plain-language summaries for novices. - Neurodiversity support - Present: chunked, consistent structure. - Improve: icon+text labels and predictable patterns. - Representation - Present: technical focus only. - Improve: include diverse case studies. - Psychological safety - Present: respectful tone, acknowledges preferences. - Improve: community guidelines for feedback. ### ✅ Logical Validity - Strong reasoning - Inductive: warns about body padding via practical risk examples. - Causal: @layer misuse can cause foot-guns; training reduces risk. - Fallacies - None notable; opinions flagged as such. - Tone of voice - Pragmatic, opinionated, yet respectful. ### 🛡️ DARVO Analysis - Deny - No denial of issues; acknowledges tradeoffs. - Attack - No attacks; critiques are technical. - Reverse victim/offender - None; centers team context and choice. ## 🎯 Conclusion - Use this starter as a menu, not a mandate. - Prefer fluid type, careful units, minimal global risks, and opt-in motion. ``` <!-- deep-read:sections end -->