More in Frontend Dev — page 6
What does autoprefixer do and why?
WHAT IT TESTS: cross-browser CSS tooling. OUTLINE: autoprefixer is a PostCSS plugin that adds vendor prefixes to CSS based on a browserslist target using compatibility data, so you write standard CSS and it handles support.
Build a DRY button with Sass maps and mixins
WHAT IT TESTS: applying Sass abstractions to real components. OUTLINE: a base mixin for shared button styles, a variants map of name to colors looped to generate modifiers, and a sizes map looped for sizing.
What is PostCSS and how it differs from Sass
WHAT IT TESTS: understanding CSS tooling architecture. OUTLINE: PostCSS is a plugin-driven tool that parses CSS into an AST and transforms it; it is not a fixed language like Sass but a platform for plugins like autoprefixer.
Sass @mixin versus @extend
WHAT IT TESTS: how Sass features shape output. OUTLINE: @mixin copies declarations into each caller, accepts arguments, and can duplicate code; @extend groups selectors sharing one rule via a comma list, reducing duplication but coupling selectors.
What is nesting in Sass and its pitfall?
WHAT IT TESTS: ergonomic Sass authoring and its risks. OUTLINE: nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity.
Sass variable versus CSS custom property
WHAT IT TESTS: compile-time versus runtime values. OUTLINE: Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming.
What is a CSS pre-processor?
WHAT IT TESTS: basics of authoring tooling. OUTLINE: a pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser.
Using :is() and :where() to manage specificity
WHAT IT TESTS: modern selector specificity control. OUTLINE: :is() groups selectors and takes its most specific argument's specificity, :where() does the same grouping but contributes zero specificity, ideal for easily overridable defaults.
Utility-first versus semantic CSS trade-offs
WHAT IT TESTS: balanced CSS architecture judgment. OUTLINE: utility-first gives speed, small purged bundles, and no naming overhead but verbose markup; semantic BEM gives readable markup and clear boundaries but naming and dead-CSS risk.
Should a component own its outer spacing?
WHAT IT TESTS: spacing ownership in design systems. OUTLINE: components own internal padding but should not own external margin; the parent or layout owns spacing between siblings, keeping components context-independent.
Explain the inverted triangle of ITCSS
WHAT IT TESTS: managing the cascade at scale. OUTLINE: ITCSS orders layers from far-reaching low-specificity (settings, tools, generic) down to localized high-specificity (components, utilities), so specificity climbs gradually.
How custom properties enable dynamic theming
WHAT IT TESTS: runtime theming with CSS variables. OUTLINE: custom properties cascade and resolve live, so redefining them on a scope or data attribute reskins everything via var().
What are the two principles of OOCSS?
WHAT IT TESTS: reusable CSS architecture thinking. OUTLINE: separate structure from skin, and separate container from content; this lets visual themes and layout be mixed and reused independently.
Explain the BEM naming convention
WHAT IT TESTS: scalable CSS class naming. OUTLINE: Block is a standalone component, Element is a child tied by double underscore, Modifier is a variant by double dash, keeping specificity flat.
What are CSS variable fonts?
WHAT IT TESTS: modern web typography and performance. OUTLINE: one file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings.
What is a CSS containing block?
WHAT IT TESTS: how percentages and offsets are resolved in layout. OUTLINE: containing block is the reference rectangle; static and relative use the nearest block ancestor's content box, absolute uses nearest positioned ancestor, fixed uses the viewport.
Pseudo-class versus pseudo-element in CSS
WHAT IT TESTS: precise CSS selector vocabulary. OUTLINE: pseudo-classes target an element in a state, pseudo-elements style a generated or sub-part using double colons, and ::before injects decorative content.
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
Nuxt 4.4 Adds Custom Fetch Factories and Router v5
Nuxt 4.4 ships createUseFetch factories, Vue Router v5, and 28x faster dev route updates. Custom fetch instances with typed defaults cut API boilerplate, while the router upgrade drops unplugin-vue-router and clears the path for stable typed routes.