Frontend Css

Modern CSS

This skill provides a reference for writing modern, robust, and efficient CSS.

---

References Library

For deeper coverage of specific topics, consult the files under references/:

| File | Topic | |------|-------| | typography.md | Vertical rhythm, modular scales, font selection, web font loading, fluid type, OpenType features | | color-and-contrast.md | OKLCH color spaces, tinted neutrals, palette structure, WCAG, dark mode, theming | | motion-design.md | Duration rules, easing curves, premium motion materials, reduced motion, perceived performance | | heuristics-scoring.md | Nielsen's 10 heuristics with 0-4 scoring rubric and P0-P3 severity | | cognitive-load.md | Intrinsic/extraneous/germane load, working memory rule, 8 common violations | | personas.md | 5 design-critique archetypes (Alex/Jordan/Sam/Riley/Casey) | | css-patterns.md | Container queries, color manipulation, SASS, BEM, CSS Modules, focus, vendor prefixes, responsive images, plus a Responsive Design Foundations section (mobile-first, breakpoints, pointer detection, safe areas) | | layout-patterns.md | Holy Grail, Split, Bento, Editorial Asymmetry, Masonry, Card Grid recipes, plus a Spatial Design Principles section (4pt spacing, hierarchy, container queries, optical adjustments) | | ui-pattern-guide.md | Cards/list/table/gallery decisions, navigation, pagination, modals, blank slate, plus an Interaction Design section (8 states, focus rings, Popover API, anchor positioning, keyboard nav) | | ux-patterns.md | Onboarding, trust/social proof, persuasion, paywalls, chunking, plus a UX Writing section (button labels, error messages, voice/tone, i18n, terminology) | | visual-intensity.md | Amplify (bolder) vs restrain (quieter) on one axis: scale/weight/color/space moves, anti-AI-slop "bold", easing rules | | delight-and-microinteractions.md | Where/when delight is earned, micro-interactions, copy personality, loading-state copy (anti-slop), celebrations, easter eggs, libraries | | production-hardening.md | Edge-case resilience: text overflow, i18n/RTL logical properties, error/empty/loading states, validation, a11y and performance resilience | | flow-patterns.md | User flow recipes | | argyle-cacadia-2025-deck.md | Adam Argyle CSS Wrapped 2025 deck (offline copy) | | token-architecture.md | Three-layer token system (primitive -> semantic -> component), naming convention, file organization, W3C DTCG alignment | | primitive-tokens.md | Layer 1 reference: raw color scales (gray/blue/status), 4px spacing scale, type scale, radius, shadow, motion, z-index | | semantic-tokens.md | Layer 2 reference: purpose-based aliases (background/foreground, primary/secondary/muted/accent/destructive, status, border/ring), dark-mode overrides | | component-tokens.md | Layer 3 reference: component-scoped tokens (button, input, card, badge, alert, dialog, table) referencing the semantic layer | | component-specs.md | Component spec tables (button, input, card, badge, alert, dialog, table) with variants, sizes, states, anatomy | | states-and-variants.md | Interactive states (default/hover/focus/active/disabled/loading), state priority, transitions, focus rings, error states, variant patterns, ARIA | | tailwind-integration.md | CSS variables + Tailwind config recipe, HSL opacity format, component classes, shadcn/ui alignment |

Several references and merged sections are derived from pbakaus/impeccable (Apache-2.0) and nextlevelbuilder/ui-ux-pro-max-skill (MIT); see attribution headers inside each file.

---

Layout & Responsive Design

Container Queries

.card {
  container: --my-card / inline-size;
}

@container --my-card (width ";
  inherits: false;
  initial-value: 0deg;
}

.animate {
  transition: --gradient-angle 1s ease;

  &:hover {
    --gradient-angle: 360deg;
  }
}

Math Functions & calc-size()

Newly Available: calc-size() allows calculations and transitions on intrinsic sizes (auto, min-content).

/* Finally: Animate to auto height! */
.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion-item.open .accordion-content {
  height: calc-size(auto);
}

.radial-layout {
  --_angle: calc(var(--sibling-index) * var(--_offset));
  translate:
    calc(cos(var(--_angle)) * var(--_circle-size))
    calc(sin(var(--_angle)) * var(--_circle-size));
}

Tree Counting Functions (Coming Soon)

.staggered {
  animation-delay: calc(sibling-index() * .1s);
  background-color: hsl(sibling-count() 50% 50%);
}

Conditional CSS with if() (Coming Soon)

.dynamic {
  color: if(
    style(--theme: dark),
    white,
    black
  );
}

---

Architecture & Organization

Cascade Layers

@layer reset, design-system, components, utilities;

@import "open-props/colors" layer(design-system);
@import "components/nav/base.css" layer(components.nav);

@layer components.nav.primary {
  nav {
    position: sticky;
    inset-block-start: 0;
  }
}

Benefits:

• Import third-party CSS with lower specificity
• Organize styles by concern, not selector weight
• Nested layers create clear hierarchies

---

Interactive Components

Dialog

  
    Cancel
    Confirm
  

Open
Close

New: closedby attribute enables light-dismiss behavior

Popover

Show Menu
...

popover=hint: Ephemeral tooltips that don't dismiss other popovers

[popover] {
  transition:
    display .5s allow-discrete,
    overlay .5s allow-discrete,
    opacity .5s;

  @starting-style {
    &:popover-open {
      opacity: 0;
    }
  }
}

Anchor Positioning

.tooltip-anchor {
  anchor-name: --tooltip;
}

.tooltip[popover] {
  position-anchor: --tooltip;
  position-area: block-start;
  position-try-fallbacks: flip-block;
  position-try-order: most-height;
}

Pseudo-elements: anchor(), ::scroll-button(), ::scroll-marker()

Exclusive Accordion

...
...

Customizable Select

select {
  appearance: base-select; /* Full CSS control */
}

/* Style options with rich HTML */
select option::before {
  content: ""; /* Can include images, icons */
}

Search Element

  
    
    Search
  

---

Form Enhancements

Field Sizing

textarea, select, input {
  field-sizing: content; /* Auto-grow to content */
}

textarea {
  min-block-size: 3lh; /* Line-height units */
  max-block-size: 80dvh;
}

Better Validation Pseudo-Classes

/* Wait for user interaction before showing errors */
:user-invalid {
  outline-color: red;
}

:user-valid {
  outline-color: green;
}

label:has(+ input:user-invalid) {
  text-decoration: underline wavy red;
}

HR in Select

  Option 1
  
  Option 2

---

Visual Effects

Scrollbar Styling

.custom-scrollbar {
  scrollbar-color: hotpink transparent;
  scrollbar-width: thin;
}

Shape Function

.complex-clip {
  clip-path: shape(
    from 0% 0%,
    curve by 50% 25% via 25% 50%,
    line to 100% 100%
  );
}

Corner Shapes

.fancy-corners {
  corner-shape: squircle;
  corner-shape: notch;
  corner-shape: scoop;
  corner-shape: superellipse(0.7);
}

---

Progressive Enhancement Patterns

Feature Detection

@supports (animation-timeline: view()) {
  .fade-in {
    animation: fade linear both;
    animation-timeline: view();
  }
}

@supports (container-type: inline-size) {
  .responsive-card {
    container-type: inline-size;
  }
}

Respect User Preferences

@media (prefers-reduced-motion: no-preference) {
  .animated {
    animation: slide 1s ease;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #222;
  }
}

@media (prefers-contrast: more) {
  .text {
    font-weight: 600;
  }
}

---

Checking Browser Support: Baseline

What is Baseline? A unified way to understand cross-browser feature availability. Features are marked as:

• Widely Available: Supported in the last 2.5 years of all major browsers
• Newly Available: Available in all major browsers
• Limited Availability: Not yet in all browsers

How to Check Baseline Status

1. BEST: Fetch https://web-platform-dx.github.io/web-features-explorer/groups/ and find the feature in there, then fetch its detail page.
2. Can I Use: caniuse.com shows Baseline badges at the top of each feature
3. MDN: Look for the Baseline badge in the browser compatibility table
4. web.dev: Feature articles include Baseline status

Remember: Always check Baseline status, use @supports for cutting-edge features, and respect user preferences with media queries. Modern CSS is about progressive enhancement and building resilient interfaces that work for everyone.

---

Real-World Example: Modern Component

Here's a card component using many modern CSS features:

/* Cascade layer for organization */
@layer components.card {

  /* Custom properties with @property */
  @property --card-hue {
    syntax: "";
    inherits: false;
    initial-value: 200;
  }

  .card {
    /* Container for responsive design */
    container: card / inline-size;

    /* Logical properties */
    inline-size: 100%;
    padding-inline: var(--space-md);
    padding-block: var(--space-lg);

    /* Modern color system */
    background: light-dark(
      oklch(98% 0.02 var(--card-hue)),
      oklch(20% 0.02 var(--card-hue))
    );

    /* Border with relative color */
    border: 1px solid oklch(from var(--surface) calc(l * 0.9) c h);

    /* Smooth corners */
    border-radius: var(--radius-md);

    /* View transition */
    view-transition-name: --card;

    /* Scroll-driven animation */
    animation: fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;

    /* Anchor for tooltips */
    anchor-name: --card-anchor;

    /* Transition custom property */
    transition: --card-hue 0.5s var(--ease-spring-3);

    &:hover {
      --card-hue: 280;
    }

    /* Responsive typography in container */
    @container card (width > 30ch) {
      .card__title {
        font-size: clamp(1.5rem, 3cqi, 2.5rem);
        text-wrap: balance;
      }
    }

    @container card (width 
  

  Card Title

  
    Card description with pretty text wrapping that avoids orphans.
  

  
    Learn More
  

  
    Additional information appears here
  

Canonical Resources

• CSS Wrapped 2025 - The year's CSS features
• The Coyier CSS Starter - Opinionated modern baseline
• Adam Argyle's CascadiaJS 2025 Deck - (markdownified locally in references/argyle-cacadia-2025-deck.md)
• Modern CSS in Real Life - Practical applications

Usage Guidelines

1. Prioritize Stability:

• Recommend Newly Available or Widely Available features for production code.
• Use Limited Availability features with progressive enhancement, graceful degradation, or @supports. Or ask the user how they want to handle it.

1. Use the web platform:

• Always prefer standard CSS solutions over JavaScript libraries for layout, animation, and interaction (e.g., use CSS Masonry instead of Masonry.js, Popover API instead of custom tooltip scripts).

1. Code Style:

• Use modern color spaces (oklch) for new palettes.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: acaprino
• Source: acaprino/claude-code-daodan
• License: MIT

Install and usage instructions live in the source repository linked above.