# zudo-css

> Pragmatic CSS knowledge for AI

## Docs

- [INBOX](https://takazudomodular.com/pj/zcss/docs/inbox): Drafts and unsorted notes. Articles here will be moved to a proper category once reviewed.
- [Interactive](https://takazudomodular.com/pj/zcss/docs/interactive): Hover/focus/active states, transitions, animations, scroll behaviors, and interactive patterns.
- [Layout](https://takazudomodular.com/pj/zcss/docs/layout): CSS layout techniques: Flexbox, Grid, positioning, spacing, sizing, and composition strategies.
- [Methodology](https://takazudomodular.com/pj/zcss/docs/methodology): CSS architecture strategies: BEM, CSS Modules, component-first, design tokens, and cascade layers.
- [Overview](https://takazudomodular.com/pj/zcss/docs/overview): Project-level conventions for writing and maintaining CSS Best Practices documentation. These guides define how articles are structured, formatted, and styled so that every page in this site stays consistent.
- [Responsive](https://takazudomodular.com/pj/zcss/docs/responsive): Container queries, fluid design, media queries, and responsive patterns.
- [Styling](https://takazudomodular.com/pj/zcss/docs/styling): Visual styling techniques including color, shadows, borders, and effects.
- [Typography](https://takazudomodular.com/pj/zcss/docs/typography): Font sizing, line clamping, vertical rhythm, text overflow, and typographic patterns.
- [Form Control Styling](https://takazudomodular.com/pj/zcss/docs/interactive/forms-and-accessibility/form-control-styling): The Problem
- [Scroll Snap](https://takazudomodular.com/pj/zcss/docs/interactive/scroll/scroll-snap): The Problem
- [The :has() Selector](https://takazudomodular.com/pj/zcss/docs/interactive/selectors/has-selector): The Problem
- [Hover, Focus, and Active States](https://takazudomodular.com/pj/zcss/docs/interactive/states-and-transitions/hover-focus-active-states): The Problem
- [Flexbox Patterns](https://takazudomodular.com/pj/zcss/docs/layout/flexbox-and-grid/flexbox-patterns): The Problem
- [Centering Techniques](https://takazudomodular.com/pj/zcss/docs/layout/positioning/centering-techniques): The Problem
- [fit-content, max-content, min-content](https://takazudomodular.com/pj/zcss/docs/layout/sizing/fit-content): The Problem
- [Object Fit and Object Position](https://takazudomodular.com/pj/zcss/docs/layout/specialized/object-fit-and-position): The Problem
- [BEM Strategy](https://takazudomodular.com/pj/zcss/docs/methodology/architecture/bem-strategy): :::note[Historical Context]
- [Custom Properties Pattern Catalog](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/custom-properties-advanced/pattern-catalog): A comprehensive collection of CSS custom property patterns for building robust design systems, responsive layouts, and component architectures — all with interactive demos.
- [Color Token Patterns](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/tight-token-strategy/color-tokens): The Problem
- [Tight Token Strategy](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/tight-token-strategy): The Problem
- [Container Queries](https://takazudomodular.com/pj/zcss/docs/responsive/container-queries): The Problem
- [OKLCH Color Space](https://takazudomodular.com/pj/zcss/docs/styling/color/oklch-color-space): The Problem
- [Backdrop Filter and Glassmorphism](https://takazudomodular.com/pj/zcss/docs/styling/effects/backdrop-filter-and-glassmorphism): The Problem
- [CSS-Only Pattern Library](https://takazudomodular.com/pj/zcss/docs/styling/effects/gradient-techniques/css-pattern-library): A comprehensive collection of CSS-only decorative background patterns built entirely with gradients. Every pattern below tiles seamlessly using  and , requires zero images, and can be customized through CSS custom properties.
- [Layered Natural Shadows](https://takazudomodular.com/pj/zcss/docs/styling/shadows-and-borders/layered-natural-shadows): The Problem
- [Fluid Font Sizing with clamp()](https://takazudomodular.com/pj/zcss/docs/typography/font-sizing/fluid-font-sizing): The Problem
- [Font Loading Strategies](https://takazudomodular.com/pj/zcss/docs/typography/fonts/font-loading-strategies): The Problem
- [Text Overflow and Line Clamping](https://takazudomodular.com/pj/zcss/docs/typography/text-control/text-overflow-and-clamping): The Problem
- [/CLAUDE.md](https://takazudomodular.com/pj/zcss/docs/claude-md/root): CLAUDE.md at /CLAUDE.md
- [Touch Target Sizing](https://takazudomodular.com/pj/zcss/docs/interactive/forms-and-accessibility/touch-target-sizing): The Problem
- [Scroll-Driven Animations](https://takazudomodular.com/pj/zcss/docs/interactive/scroll/scroll-driven-animations): The Problem
- [:is() and :where() Selectors](https://takazudomodular.com/pj/zcss/docs/interactive/selectors/is-where-selectors): The Problem
- [Transition Best Practices](https://takazudomodular.com/pj/zcss/docs/interactive/states-and-transitions/transition-best-practices): The Problem
- [CSS Grid Patterns](https://takazudomodular.com/pj/zcss/docs/layout/flexbox-and-grid/grid-patterns): The Problem
- [Positioning Guide](https://takazudomodular.com/pj/zcss/docs/layout/positioning/positioning-guide): The Problem
- [aspect-ratio](https://takazudomodular.com/pj/zcss/docs/layout/sizing/aspect-ratio): The Problem
- [Multi-Column Layout](https://takazudomodular.com/pj/zcss/docs/layout/specialized/multi-column-layout): The Problem
- [Component First Strategy](https://takazudomodular.com/pj/zcss/docs/methodology/architecture/component-first-strategy): The Problem
- [Theming Recipes](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/custom-properties-advanced/theming-recipes): Complete theme system recipes using CSS custom properties. Each recipe is a production-ready pattern you can adapt to your own projects. These recipes implement the layered architecture described in Three-Tier Color Strategy — palette tokens, semantic theme tokens, and component-scoped overrides — using the cascade and  fallbacks.
- [Typography Token Patterns](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/tight-token-strategy/typography-tokens): The Problem
- [Two-Tier Size Strategy](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/two-tier-size-strategy): The Problem
- [What is zudo-css?](https://takazudomodular.com/pj/zcss/docs/overview/what-is-zudo-css): zudo-css is a CSS best practices documentation site designed primarily for AI coding agents. It provides curated CSS techniques and patterns as structured references that AI agents can consume and apply during development.
- [Fluid Design with clamp()](https://takazudomodular.com/pj/zcss/docs/responsive/fluid-design-with-clamp): The Problem
- [color-mix()](https://takazudomodular.com/pj/zcss/docs/styling/color/color-mix): The Problem
- [Clip-Path and Mask](https://takazudomodular.com/pj/zcss/docs/styling/effects/clip-path-and-mask): The Problem
- [Border Techniques](https://takazudomodular.com/pj/zcss/docs/styling/shadows-and-borders/border-techniques): The Problem
- [Three-Tier Font-Size Strategy](https://takazudomodular.com/pj/zcss/docs/typography/font-sizing/three-tier-font-size-strategy): The Problem
- [Variable Fonts](https://takazudomodular.com/pj/zcss/docs/typography/fonts/variable-fonts): The Problem
- [Vertical Rhythm](https://takazudomodular.com/pj/zcss/docs/typography/text-control/vertical-rhythm): The Problem
- [prefers-reduced-motion](https://takazudomodular.com/pj/zcss/docs/interactive/forms-and-accessibility/prefers-reduced-motion): The Problem
- [Overscroll Behavior](https://takazudomodular.com/pj/zcss/docs/interactive/scroll/overscroll-behavior): The Problem
- [Parent-State Child Styling](https://takazudomodular.com/pj/zcss/docs/interactive/selectors/parent-state-child-styling): The Problem
- [View Transitions](https://takazudomodular.com/pj/zcss/docs/interactive/states-and-transitions/view-transitions): The Problem
- [Subgrid](https://takazudomodular.com/pj/zcss/docs/layout/flexbox-and-grid/subgrid): The Problem
- [Stacking Context](https://takazudomodular.com/pj/zcss/docs/layout/positioning/stacking-context): The Problem
- [clamp() for Fluid Sizing](https://takazudomodular.com/pj/zcss/docs/layout/sizing/clamp-for-sizing): The Problem
- [Negative Margin Expand + Padding Back](https://takazudomodular.com/pj/zcss/docs/layout/specialized/negative-margin-expand): The Problem
- [CSS Modules Strategy](https://takazudomodular.com/pj/zcss/docs/methodology/architecture/css-modules-strategy): The Problem
- [Advanced Custom Properties](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/custom-properties-advanced): The Problem
- [Multi Namespace Token Strategy](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/multi-namespace-token-strategy): The Problem
- [Token Preview](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/tight-token-strategy/token-preview): A visual reference of all available tokens in the tight token strategy. Use this page as a quick cheat sheet when choosing spacing, color, or typography values.
- [css-wisdom Skill](https://takazudomodular.com/pj/zcss/docs/overview/css-wisdom-skill): The  skill is a Claude Code skill that indexes all CSS best practices articles in this documentation site. It enables AI coding agents to quickly look up relevant CSS patterns and techniques during development.
- [Responsive Images](https://takazudomodular.com/pj/zcss/docs/responsive/responsive-images): The Problem
- [currentColor Patterns](https://takazudomodular.com/pj/zcss/docs/styling/color/currentcolor-patterns): The Problem
- [Blend Modes](https://takazudomodular.com/pj/zcss/docs/styling/effects/blend-modes): The Problem
- [Smooth Shadow Transitions](https://takazudomodular.com/pj/zcss/docs/styling/shadows-and-borders/smooth-shadow-transitions): The Problem
- [Screen-Width Based Font Size Definition](https://takazudomodular.com/pj/zcss/docs/typography/font-sizing/screen-width-based-font-size): The Problem
- [Japanese Font Family Specification](https://takazudomodular.com/pj/zcss/docs/typography/fonts/japanese-font-family): The Problem
- [Text Wrap: balance and pretty](https://takazudomodular.com/pj/zcss/docs/typography/text-control/text-wrap-balance-pretty): The Problem
- [gap vs margin](https://takazudomodular.com/pj/zcss/docs/layout/flexbox-and-grid/gap-vs-margin): The Problem
- [Anchor Positioning](https://takazudomodular.com/pj/zcss/docs/layout/positioning/anchor-positioning): The Problem
- [Logical Properties](https://takazudomodular.com/pj/zcss/docs/layout/sizing/logical-properties): The Problem
- [Table Cell Width Control](https://takazudomodular.com/pj/zcss/docs/layout/specialized/table-cell-width-control): The Problem
- [Cascade Layers](https://takazudomodular.com/pj/zcss/docs/methodology/architecture/cascade-layers): The Problem
- [Component Tokens & Arbitrary Values](https://takazudomodular.com/pj/zcss/docs/methodology/design-systems/tight-token-strategy/component-tokens): The Problem
- [Media Query Best Practices](https://takazudomodular.com/pj/zcss/docs/responsive/media-query-best-practices): The Problem
- [Dark Mode Strategies](https://takazudomodular.com/pj/zcss/docs/styling/color/dark-mode-strategies): The Problem
- [Filter Effects](https://takazudomodular.com/pj/zcss/docs/styling/effects/filter-effects): The Problem
- [Line Height Best Practices](https://takazudomodular.com/pj/zcss/docs/typography/font-sizing/line-height-best-practices): The Problem
- [Noto Sans Webfont Guide](https://takazudomodular.com/pj/zcss/docs/typography/fonts/noto-sans-webfont-guide): The Problem
- [Prose Heading Spacing](https://takazudomodular.com/pj/zcss/docs/typography/text-control/prose-heading-spacing): The Problem
- [Responsive Grid Patterns](https://takazudomodular.com/pj/zcss/docs/responsive/responsive-grid-patterns): The Problem
- [Color Contrast and Accessibility](https://takazudomodular.com/pj/zcss/docs/styling/color/color-contrast-accessibility): The Problem
- [CSS 3D Transforms](https://takazudomodular.com/pj/zcss/docs/styling/effects/css-3d-transforms): The Problem
- [Color Palette Strategy](https://takazudomodular.com/pj/zcss/docs/styling/color/color-palette-strategy): The Problem
- [@property](https://takazudomodular.com/pj/zcss/docs/styling/effects/at-property): The Problem
- [Three-Tier Color Strategy](https://takazudomodular.com/pj/zcss/docs/styling/color/three-tier-color-strategy): The Problem
- [Gradient Techniques](https://takazudomodular.com/pj/zcss/docs/styling/effects/gradient-techniques): The Problem
- [Claude](https://takazudomodular.com/pj/zcss/docs/claude): Claude Code configuration reference.
- [ja-translator](https://takazudomodular.com/pj/zcss/docs/claude-agents/ja-translator): Translate English CSS best-practices MDX docs to Japanese for the Astro i18n locale
- [b4push](https://takazudomodular.com/pj/zcss/docs/claude-skills/b4push): Run before-push quality checks for the zudo-css project. Use when: (1) User says 'b4push', 'before push', or 'run checks', (2) Before pushing to remote, (3) After completing implementation work.
- [l-demo-component](https://takazudomodular.com/pj/zcss/docs/claude-skills/l-demo-component): Guidance for using CssPreview component in zcss documentation articles. Use when: (1) Writing or editing CssPreview demos in MDX articles, (2) Deciding whether to use defaultOpen={true} or false, (3) ...
- [l-handle-deep-article](https://takazudomodular.com/pj/zcss/docs/claude-skills/l-handle-deep-article): Create or convert CSS best-practices articles into "deep articles" with sub-pages in the zcss Astro site. Use when: (1) An article topic has enough depth to warrant "see more" reference sub-pages, (2)...
- [l-translate](https://takazudomodular.com/pj/zcss/docs/claude-skills/l-translate): Translate English docs to Japanese for the Astro i18n locale. Use when: (1) User wants to translate en docs to ja, (2) User says 'translate', 'ja version', 'Japanese translation', (3) User wants to ch...
- [l-writing](https://takazudomodular.com/pj/zcss/docs/claude-skills/l-writing): Writing and formatting rules for MDX articles in zcss. Use when: (1) Writing or editing MDX docs in src/content/docs/, (2) Creating new articles, (3) User says 'writing rules' or 'article format'. Aut...