More in CSS & Design Systems — page 11
Shadow DOM: A Private Bubble for Your Components
Shadow DOM gives a component a private bubble, keeping its styles and structure isolated from the main page. This is key for building reusable Web Components and microfrontends.
CustomEvent: Sending Custom Data with Events
CustomEvent lets components communicate without direct coupling by firing custom-named events. It's like a private broadcast system for your app. Use it for a child component to signal a parent, passing data in the `detail` property. Don't forget `detail`!
HTML Slots: Making Web Components Customizable
The `<slot>` element is a placeholder inside a Web Component, letting you inject your own markup. It makes components flexible, like a card with customizable header and body sections. The footgun: content without a `slot` attribute goes to the default slot.
The HTML <template> Element: Inert, Reusable Markup
Think of `<template>` as a blueprint for HTML. It holds markup that's invisible and inactive until you need it, perfect for creating reusable chunks like list items that you can stamp out with JavaScript.
Custom Elements: Create Your Own HTML Tags
Think of Custom Elements as creating your own Lego bricks for the web, defining new HTML tags with custom logic. Use them to build reusable components like a `<product-card>`. Be wary of extending built-in elements, as Safari does not support this.
Design Tokens: Automating UI with a Build Pipeline
Think of design tokens as design decisions stored as data. A build pipeline consumes this data to auto-generate code for multiple platforms, ensuring consistency. The footgun is exposing all raw 'option' tokens instead of curated 'decision' tokens.
W3C Design Tokens: A JSON Standard for Design Systems
The W3C Design Tokens format is a universal translator for your design system's variables. It's a standard JSON structure that lets design tools and codebases speak the same language for colors and spacing.
Composite Design Tokens: Bundling Style Properties
A composite design token bundles multiple style values into a single, semantic unit, like a "style kit" for shadows or typography. Use them to apply complex, multi-property styles like borders or text styles with one reference.
Style Dictionary: A Build Tool for Design Tokens
Think of Style Dictionary as a compiler for your design system. It takes abstract design tokens (like brand colors and fonts) and automatically generates platform-specific style files for web, iOS, and Android, ensuring consistency everywhere.
W3C Design Tokens: A Standard Format for UI Decisions
A standard design token format is a universal translator for your UI's style, defining colors and spacing in a JSON structure any tool can read. It lets design tools and codebases pull from one source of truth.
Designing Durable Component APIs
The best component API is often no API. Design from the user's perspective by first writing the ideal usage snippet, a "dream-driven" approach. This ensures intuitive components that boost design system adoption.
UI Patterns: Reusable Recipes for Interfaces
UI patterns are reusable recipes for common interface problems, like tabs or accordions. They create a shared language for building predictable, accessible components. The biggest footgun is creating a component that looks right but lacks accessible behaviors.
Component Library: Your UI's LEGO Box
A component library is a box of pre-built UI LEGOs. Instead of building a button from scratch, you grab the official one, ensuring consistency and speed. It's essential for scaling design across teams.
Design Systems: Stop Reinventing UI Components
A design system is a shared library of reusable UI components and rules, acting as a single source of truth for designers and developers. It ensures a consistent look across apps without rebuilding common elements.
Sass Built-in Modules: Namespaced Power Tools
Think of Sass built-in modules as namespaced toolkits for color, math, and more. You explicitly import what you need, like using `sass:color` for theming. The footgun is relying on old global functions, which ties you to legacy Sass implementations.
Sass Functions: Reusable Logic for Your Styles
Sass functions are like JavaScript functions for your CSS, letting you compute and return a single value. Use them to centralize complex logic, like generating a color palette. The footgun: don't use functions for side-effects; that's what mixins are for.
Stylelint: Your CSS Guardian for Rules, Not Just Formatting
Stylelint is a linter that guards your CSS logic and conventions, not just its formatting. Use it to catch errors like misspelled properties or enforce team rules. The footgun is confusing it with a formatter; Stylelint enforces rules, Prettier handles style.
PostCSS: The 'Babel for CSS' Transformer
PostCSS is like Babel for CSS, transforming styles with JavaScript plugins. Use it to add vendor prefixes, enable future CSS features, or lint styles. The footgun: it's not a preprocessor like Sass, but a tool that enhances CSS, often used alongside it.
Sass @extend: Inherit Styles, Not HTML Classes
@extend lets one selector inherit styles from another, grouping them in the final CSS without adding classes to your HTML. Use it for modifier classes to keep markup clean. The footgun: overusing it can generate long, complex selectors, bloating your CSS.
Sass Modules: Using @use for Clean, Scoped Styles
Think of `@use` as importing a JavaScript module. It loads Sass variables and mixins into a private namespace, preventing global style conflicts. Use it to structure large CSS codebases by breaking styles into logical partials.