@effective/css

A modern, layered CSS foundation for evergreen browsers using CSS @layer.

Features

• 🎯 Layered Architecture – Uses CSS @layer for clear cascade control
• 📦 Modular – Import the full foundation or individual layers
• 🌐 Evergreen – Targets modern browsers (Chrome, Edge, Firefox, Safari)
• 🧩 Web Component Safe – No inheritance patterns that break Shadow DOM
• ♿ Accessible – Preserves focus indicators and motion preferences

Installation

npm install @effective/css

Usage

Full Foundation

Import the complete foundation with all layers:

@import "@effective/css";

Or in JavaScript/bundlers:

import "@effective/css";

Individual Layers

Import only what you need:

/* Core normalization (recommended) */
@import "@effective/css/reset.css";

/* Browser fixes (recommended) */
@import "@effective/css/fixes.css";

/* Element defaults with font stacks (optional) */
@import "@effective/css/elements.css";

Layer Order

If you're using other @layer declarations, include ours in your order:

@layer reset, fixes, elements, your-base, your-components, your-utilities;

What's Included

Layer: reset

• Removes all margins and padding
• Sets box-sizing: border-box on all elements
• Makes media elements (img, video, svg, etc.) block-level and responsive
• Form elements inherit font from parent

Layer: fixes

• Prevents text-size inflation on mobile browsers (text-size-adjust)
• Enables automatic dark mode for native UI elements (color-scheme: light dark)
• Applies optimized font rendering on macOS/WebKit (-webkit-font-smoothing: antialiased)
• Respects prefers-reduced-motion for scroll behavior

Layer: elements (optional)

• Defines CSS custom properties for system font stacks:
  • --font-system-ui-sans – System UI fonts with emoji support
  • --font-system-ui-mono – Monospace fonts for code
• Applies font stacks to body and code elements
• Improves link underline rendering (text-decoration-skip-ink)
• Balanced text wrapping for headings (text-wrap: balance)
• Prettier text wrapping for paragraphs (text-wrap: pretty)
• Creates isolated stacking context for React/Next.js/Vue root elements (#root, #__next, #app)

Browser Support

Targets evergreen browsers from the last 2-3 years:

• Chrome / Edge (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)

No legacy browser support (IE, old Android stock browsers).

CSS Custom Properties

When using the elements layer, these variables are available:

:root {
  --font-system-ui-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", ...;
  --font-system-ui-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, ...;
}

Philosophy

• No utility classes – This is a foundation, not a framework
• No components – Only base element styles
• Plain CSS – No preprocessors required
• Web Component friendly – Direct box-sizing, no inheritance tricks

License

MIT