All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 148
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.
Sass Nesting: Write CSS That Mirrors Your HTML
Sass nesting lets you structure your styles like your HTML, avoiding repetitive selectors. Use it for components with clear parent-child relationships, like a navbar's list items. The footgun is over-nesting, which creates bloated, overly-specific CSS.
CSS Minification: Smaller Files, Faster Sites
CSS minification vacuum-packs your stylesheets, removing whitespace, comments, and unused code to shrink file size. This automated build step improves performance by reducing network transfer size.
Autoprefixer: Stop Memorizing CSS Vendor Prefixes
Autoprefixer lets you write modern CSS and automatically adds vendor prefixes like -webkit- during your build. It's a standard part of frontend toolchains, ensuring styles work across browsers.
Sass Mixins: Reusable Style Functions
Think of a Sass mixin as a function for CSS. It bundles style declarations you can reuse, avoiding repetitive code. Use it for common patterns like button styles or clearing floats. The footgun: mixins copy code everywhere, which can bloat your final 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.
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.
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.
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.
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.
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.
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.