CSS &amp; Design Systems

Hardware Acceleration: Getting Smooth CSS Animations

Use the GPU for smooth CSS animations by sticking to transform and opacity. This avoids costly CPU work like layout recalculations, keeping frame rates high. The footgun is animating properties like width or left, which cause jank.

CSS transform-style: Let Children Live in 3D Space

The transform-style property decides if an element's children are flattened onto its 2D plane or share a 3D space. Use preserve-3d to create nested 3D objects. Beware: properties like opacity < 1 or overflow will break the 3D context and flatten it.

CSS Motion Path: Animate on a Curve

Think of offset-path as drawing a track for an element to follow. Use it for non-linear UI animations, like an icon following a curve. The footgun: the path itself doesn't cause motion; you must also animate offset-distance to move the element.

Scroll-driven Animations: Animate on Scroll, Not Time

Scroll-driven animations link an animation's progress to a scrollbar's position, not a clock. This is great for progress bars that fill as you scroll or elements that fade in as they enter the viewport. The main pitfall is confusing timeline types.

OOCSS: Reusable Styles for Maintainable CSS

Treat CSS styles like building blocks. Object-Oriented CSS (OOCSS) separates an element's visual 'skin' (colors, borders) from its 'structure' (width, height). This lets you create reusable classes, reducing duplication for faster, maintainable stylesheets.

CSS Custom Properties: Variables for Your Stylesheet

CSS Custom Properties are variables for your stylesheet. Define a value like --primary-color once on :root and reuse it with var(), making global theme changes easy. The main footgun: they only work for property values, not names or selectors.

Utility-First CSS: Style Directly in Your Markup

Utility-first CSS styles elements with many small, single-purpose classes directly in your HTML. It's used for rapid prototyping and component-based systems. The footgun is creating verbose, repetitive markup by not extracting common patterns into components.

SMACSS: A Naming Convention for CSS Scalability

SMACSS organizes CSS into five categories to prevent spaghetti code. It's a naming convention and thought process, not a library you install. It's used in large codebases where teams need a shared vocabulary for styling components.

CSS Modules: Local Scope for Your Styles

CSS Modules treat your styles like local variables. Instead of a global stylesheet, each CSS file is scoped to the component that imports it, preventing name collisions in component-based apps.

CSS-in-JS: Scoped Styles via JavaScript

CSS-in-JS lets components own their styles in JavaScript, generating CSS and injecting it into the DOM at runtime. It prevents global namespace collisions in component frameworks. The footgun is runtime overhead and bigger bundles.

Styled Components: CSS-in-JS as Components

Think of your styles as React components. Styled Components uses JavaScript template literals to write CSS in your JS, creating components with encapsulated styles. It's ideal for building design systems where styles change based on props.

Tailwind CSS: Styling Directly in Your HTML

Tailwind CSS lets you build designs by composing utility classes like flex and pt-4 directly in your HTML. This avoids context-switching for rapid UI development. The main footgun is creating verbose, unreadable markup if not managed well.

Scoped CSS: Styling Components Without the Cascade Mess

@scope fences off your CSS, applying styles only within a specific part of the DOM. This lets you style a component without your rules leaking out or clashing with global styles.

ITCSS: Structuring CSS from General to Specific

ITCSS organizes CSS from generic to specific, like an inverted triangle. It's for large projects to prevent specificity wars and make code predictable. The main footgun is not enforcing the layer order, which leads back to styling chaos and defeats the system.

Critical CSS: Render Above-the-Fold Content Instantly

Critical CSS accelerates rendering by inlining styles for above-the-fold content directly in the HTML. This lets the browser paint the visible page immediately, while the full stylesheet loads asynchronously.

Design Tokens: A Standardized Language for Your UI

Design tokens are named variables for your UI's visual properties, stored in a central format like JSON. They enable consistent branding and theming across platforms (web, iOS) and tools (Figma, code).

CSS Cascade Layers: Control Your Cascade

Cascade Layers are explicit buckets for your CSS, letting you control which styles win without fighting specificity. Use them to predictably layer resets, component libraries, and utilities.

Sass Variables: Compile-Time Constants for CSS

Think of Sass variables as compile-time constants for your styles. You define a value once (e.g., $brand-color) and reuse it, ensuring consistency. They're perfect for theming colors and fonts.