CSS
275 bites tagged CSS — interview questions with model answers, and 60-second explainers.
Svelte Scoped Styles: CSS That Can't Leak
Svelte styles are like house rules; they only apply inside that component and don't affect the neighbors. This is the default for any `<style>` tag in a `.svelte` file, preventing CSS conflicts.
Vue Scoped CSS: Keep Your Styles Local
Vue's Scoped CSS prevents styles from leaking out of a component. It adds a unique data attribute to your component's HTML and rewrites CSS to target it, ensuring styles only apply locally.
Angular View Encapsulation: Walling Off Your Component Styles
View Encapsulation walls off a component's CSS to prevent styles from leaking in or out. By default, Angular emulates a Shadow DOM to scope styles, but you can change this. The footgun is using `None` to fix a style, creating global CSS conflicts.
The 8-Point Grid: A Shared Language for UI Spacing
The 8-point grid system stops spacing debates by making every dimension and gap a multiple of 8px. It's used in design systems like Google's to create consistent layouts that render cleanly across devices. The biggest mistake is breaking the rule for "feel."
From Design to Code: Inspecting in Figma
Inspection translates a design into code-ready specs. It's the "view source" for a design file, showing exact colors, sizes, and spacing. Developers use it to build UIs; designers use it to verify consistency. Don't blindly copy auto-generated code.
Designing for Reduced Motion
Treat UI animations as an enhancement some users must disable for comfort. The `prefers-reduced-motion` media query lets you respect system-level accessibility settings, preventing vestibular triggers.
Touch Target Size: Bigger is Better, Spacing is Key
A button's clickable area is more than its visible pixels; it includes the space to avoid fat-fingering neighbors. WCAG requires targets to be at least 24x24 CSS pixels for users with motor impairments.
Auto Layout's `border-box`: strokesIncludedInLayout
Figma's `strokesIncludedInLayout` is the equivalent of CSS `box-sizing: border-box`. It makes an Auto Layout frame's total dimensions include its stroke, preventing size changes.
Semantic Naming for Design Tokens
Don't name a token by its value (`blue-500`); name it by its job (`color.action.primary`). This decouples design intent from implementation, making systems scalable. It's key for theming and avoiding "lie" variables when designs change.
RGB vs. HSL: Two Ways to Tell a Computer 'Color'
RGB tells a computer how to mix light (Red, Green, Blue), while HSL describes color how humans perceive it (Hue, Saturation, Lightness). Use RGB for brand colors and HSL for intuitive variations. The footgun is creating low-contrast UIs that are unreadable.
SSR for Styles: Avoiding the 'Flash'
Server-side rendering for styles sends a fully styled page on the first load, preventing the dreaded "flash of unstyled content" (FOUC). This is crucial for CSS-in-JS libraries. The footgun is assuming it works automatically without proper setup.
React Theming: Context API and CSS-in-JS
Use React's Context API to inject a theme object (colors, spacing) into your component tree for your CSS-in-JS styles. It's ideal for light/dark modes or brand skins. The footgun: this pattern fails in React Server Components, which lack context.
Integrating Sass/SCSS in Next.js
Next.js has built-in Sass support, letting you use variables, mixins, and nesting. Import .scss files for component-scoped styles or global stylesheets. The main footgun: you must install the `sass` package yourself; it's not included by default.
Global vs. Component CSS in React/Next.js
Treat CSS like any other module. Import global styles (like resets or Tailwind) once in your app's entry point. For component-specific styles, import a CSS Module file directly into your component to keep styles scoped and prevent conflicts.
alignItems: Aligning Children on the Cross Axis
alignItems arranges children along the cross axis of a flex container. If items flow down (column), it aligns them left/right. If they flow across (row), it aligns them top/bottom. The footgun: `alignSelf` on a child overrides this parent property.
Flexbox: Responsive Layouts in React Native
Flexbox arranges components along a primary axis, creating responsive UIs without manual calculations. It's used for nearly all layout needs, from centering items to building complex grids.
Semantic Colors: Naming a Color's Job, Not Its Value
Semantic colors name a color's purpose (e.g., `color-background-interactive`) instead of its value (`#007BFF`). This simplifies theming, like light/dark mode, by mapping roles to specific primitive colors, ensuring a consistent UI across an application.
Theming with CSS data-* Attributes
Think of `data-` attributes as labels for UI state, like `data-theme='dark'`. CSS uses attribute selectors (`[data-theme='dark']`) to apply styles directly, avoiding complex class logic.
CSS `color-scheme`: Opting Into Browser UI Themes
The `color-scheme` property tells the browser your site supports light/dark modes, automatically styling UI like scrollbars and form controls to match the user's OS preference.
Dynamic Theme Switching with CSS
Let your app's theme automatically follow the user's OS setting. CSS's `prefers-color-scheme` media query lets you define styles for light and dark modes. The footgun is forgetting the 'no-preference' state, which can result in an unstyled default.
Theme Object: Your Design System's Single Source of Truth
A theme object is a central dictionary for your UI's design tokens, like colors and font sizes. It ensures consistency across components by providing a single, shared source for styling values.
prefers-color-scheme: Respect User Theme Preferences
The `prefers-color-scheme` media query lets your CSS automatically adapt to a user's system-wide light or dark mode. It's used to create themes that respect user preferences.
CSS Custom Properties: Variables for Your Stylesheet
CSS custom properties are variables for your design system. Define a value like `--primary-color` once on `:root` and reuse it everywhere. This is ideal for theming, like switching between light and dark modes.
Theme Provider Pattern: Centralized UI Styling
A Theme Provider acts like a global style guide, injecting design tokens like colors and fonts into all child components. It's used in frameworks like React to ensure a consistent look and feel. The footgun: components outside the provider won't get the theme.
Get CSS bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.