Skip to content

NarendraKoya999/Frontend-CSS-Interview-Questions-List

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
README.md
README.md
 
 

Repository files navigation

CSS / CSS3 Interview Questions ❓ and Answers ✔️ — 2026 Edition

Table of Contents 📑

Basics of CSS

Introduction to CSS

Q1. What is CSS, and why is it used in web development?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and layout of web documents written in HTML or XML. It separates content from presentation, controlling colors, fonts, spacing, layout, animations, and more. In 2026, CSS has evolved into a powerful, near-programmatic layer with native nesting, cascade layers, container queries, scroll-driven animations, anchor positioning, and inline conditional logic — reducing the need for JavaScript in many visual and UI-state scenarios.

CSS Selectors

Q2. Explain the different types of CSS selectors.

CSS selectors are patterns used to select and style HTML elements. The main types are:

  • Element Selector: Selects all instances of a specified HTML element.
p { color: blue; }
  • Class Selector: Selects elements with a specific class attribute.
.highlight { background-color: yellow; }
  • ID Selector: Selects a single element with a specific ID attribute.
#header { font-size: 24px; }
  • Universal Selector: Selects all elements.
* { margin: 0; padding: 0; }
  • Attribute Selector: Selects elements with a specific attribute.
input[type="text"] { border: 1px solid #ccc; }
  • :is() and :where() Selectors (modern): Group selectors without repeating. :is() carries the specificity of its most specific argument; :where() has zero specificity.
:is(h1, h2, h3) { line-height: 1.2; }
:where(header, footer) a { text-decoration: none; }
  • :has() Relational Selector (widely supported): Selects a parent based on its children — the long-awaited "parent selector."
/* Style a card if it contains an image */
.card:has(img) { padding: 0; }
/* Style a label whose following input is required */
label:has(+ input:required)::after { content: " *"; color: red; }

Q3. Explain CSS specificity and how it affects style application.

CSS specificity determines which rule takes precedence when multiple rules target the same element. It is calculated as a three-part tuple (A, B, C):

  • A — ID selectors (e.g., #id)
  • B — Class, attribute, and pseudo-class selectors (e.g., .class, [attr], :hover)
  • C — Type and pseudo-element selectors (e.g., div, ::before)

Higher values win at each position from left to right. In 2026, cascade layers (@layer) add a new priority axis above specificity, allowing you to explicitly control which layer's rules win regardless of specificity. :where() is useful when you deliberately want zero specificity.

CSS Box Model

Q4. Describe the CSS box model and its components.

The box model defines how elements are rendered as rectangular boxes with four areas:

  • Content — The actual text or image content.
  • Padding — Space between content and border.
  • Border — The border surrounding the padding.
  • Margin — Space between the border and adjacent elements.

Q5. How do you change the box-sizing behavior in CSS?

Use the box-sizing property. border-box is now the recommended default in almost all modern CSS resets, as it includes padding and border in the element's stated width/height:

*, *::before, *::after {
  box-sizing: border-box;
}

CSS Display and Positioning

Q6. Explain the difference between display: block, display: inline, and display: inline-block.

  • display: block — Takes full available width, starts on a new line.
  • display: inline — Takes only necessary width, flows with text.
  • display: inline-block — Flows inline but respects width/height.

In 2026, also note:

  • display: contents — Removes the box itself but keeps children in the flow (useful for semantic wrappers in flex/grid).
  • display: grid / display: flex — Now the dominant layout tools for most UI patterns.

Q7. How do you horizontally center an element using CSS?

Multiple approaches depending on context:

/* Block element with known or auto width */
.center { margin: 0 auto; }

/* Flex container */
.parent { display: flex; justify-content: center; }

/* Grid container */
.parent { display: grid; place-items: center; }

Q8. How do you center an element both horizontally and vertically?

/* Modern approach — preferred */
.parent {
  display: grid;
  place-items: center;
}

/* Absolute positioning fallback */
.center-both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Q9. Explain the differences between position: relative, position: absolute, position: fixed, and position: sticky.

  • relative — Positioned relative to its normal flow position; still occupies space.
  • absolute — Removed from flow; positioned relative to nearest positioned ancestor.
  • fixed — Positioned relative to the viewport; unaffected by scroll.
  • sticky — Hybrid: behaves as relative until a scroll threshold is crossed, then acts as fixed within its container. Widely used for sticky headers and sidebars.

✨ 2026 addition: CSS Anchor Positioning adds a fifth paradigm — tethering an absolutely positioned element to any anchor element regardless of DOM location. See the CSS Anchor Positioning section.

Responsive Design and Media Queries

Q10. How do you create a responsive design in CSS?

Use a combination of fluid layouts, media queries, and container queries. Modern responsive design favors intrinsic sizing (min(), max(), clamp()) and container queries over fixed breakpoints:

/* Fluid typography with clamp */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* Media query for viewport-level layout */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

Q11. What are media queries, and how are they used for responsive design?

Media queries apply styles based on device/viewport characteristics such as width, height, orientation, color scheme, or display mode:

@media (max-width: 600px) {
  .menu { display: none; }
}

/* Prefer dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

Q12. What is the difference between min-width and max-width in media queries?

  • min-width — Mobile-first approach; styles apply at or above the specified width.
  • max-width — Desktop-first approach; styles apply at or below the specified width.

Mobile-first (min-width) is generally recommended as it tends to produce leaner base styles.

CSS Variables (Custom Properties)

Q13. What are CSS variables, and why are they useful?

CSS custom properties (variables) are user-defined values prefixed with -- that cascade and inherit like any CSS property. In 2026, they are central to design tokens, theming, and component-level customization. They can be read and written from JavaScript at runtime, and are queryable via container style queries and the new if() function.

:root {
  --color-primary: oklch(55% 0.2 250);
  --spacing-md: 1rem;
}

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-md);
}

Q14. How do CSS variables differ from SASS/LESS variables?

CSS custom properties are live — they cascade, inherit, can be scoped to elements, and can be changed at runtime via JavaScript or @media/@container rules. SASS/LESS variables are static — they are resolved at compile time and produce no dynamic behavior in the browser. In 2026, with the addition of if() and style queries, CSS custom properties can also drive conditional logic natively.

CSS Flexbox and Grid

CSS Flexbox

Q15. Explain CSS Flexbox and when to use it.

Flexbox is a one-dimensional layout model for distributing space along a single axis (row or column). Use it for navigation bars, toolbars, card rows, centering content, and any layout where items need to flex around a single axis.

Q16. How do you horizontally center flex items?

.container {
  display: flex;
  justify-content: center; /* Main axis */
  align-items: center;     /* Cross axis */
}

Q17. What is the gap property in Flexbox/Grid?

gap (formerly grid-gap) adds spacing between flex or grid items without needing margins. It works on both flex containers and grid containers:

.flex-container {
  display: flex;
  gap: 1rem;         /* Same gap on both axes */
  gap: 1rem 2rem;    /* Row gap, column gap */
}

CSS Grid Layout

Q18. What is CSS Grid, and how does it differ from Flexbox?

CSS Grid is a two-dimensional layout system for placing items in both rows and columns simultaneously. Use Grid for page-level layouts, card grids, and any layout requiring alignment on two axes. Use Flexbox for one-dimensional alignment within components.

Q19. How do you create a grid layout?

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Named template areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

Q20. What is subgrid, and when would you use it?

subgrid (now broadly supported) allows a nested grid element to participate in the tracks of its parent grid, solving longstanding alignment problems in card layouts:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* Aligns heading, body, footer across cards */
}

✨ 2026 note: Native CSS Masonry (also called CSS Grid Lanes in some proposals) is in active development and experimental in Chrome Canary and Firefox Nightly. It will allow Pinterest-style staggered layouts without JavaScript. Keep an eye on display: masonry / masonry-auto-flow syntax for production readiness.

CSS Transforms and Animations

CSS Transitions and Animations

Q21. Explain the CSS transition property.

.button {
  background-color: blue;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background-color: red;
  transform: scale(1.05);
}

transition smoothly interpolates between two states triggered by a state change (hover, focus, class toggle).

Q22. What are CSS @keyframes animations?

@keyframes define multi-step animations independent of state changes:

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fadeInUp 0.4s ease forwards;
}

Q23. What is the rem unit, and how does it differ from em, px, and newer units?

  • px — Absolute unit. Fixed size regardless of context.
  • em — Relative to the element's own font size (or parent's if used for font-size).
  • rem — Relative to the root (<html>) font size. Consistent reference throughout.
  • dvh / dvw / svh / lvh — Dynamic/small/large viewport units that account for mobile browser chrome (address bar resizing). Prefer dvh over vh for full-height layouts on mobile.
  • cqi / cqb — Container query inline/block units, relative to the nearest container.
.hero {
  min-height: 100dvh; /* Correct on mobile, unlike 100vh */
}

CSS Pseudo-Classes and Pseudo-Elements

Q24. What is the :not() pseudo-class?

p:not(.excluded) { font-size: 16px; }

In modern CSS, :not() accepts complex selectors and a selector list:

a:not([href^="http"]):not([href^="mailto"]) { /* internal links only */ }

Q25. Explain ::before and ::after pseudo-elements.

They insert generated content before/after an element's content, often used for decorative elements, icons, or clearfix patterns.

Q26. What are some newer pseudo-classes relevant in 2026?

  • :has() — Parent selector; style an ancestor based on a descendant match.
  • :is() — Forgiving selector list with specificity of the most specific argument.
  • :where() — Same as :is() but with zero specificity.
  • :focus-visible — Applies focus styles only when the browser determines keyboard/programmatic focus (not mouse click), improving accessibility without removing visible focus outlines.
  • :popover-open — Styles elements currently shown via the Popover API.
  • :state() — Exposes internal states of custom elements (part of the Custom State Pseudo-Class API), allowing external CSS to style component states like :checked or :loading.
button:focus-visible {
  outline: 3px solid royalblue;
  outline-offset: 2px;
}

CSS Cascade Layers

Q27. What are CSS cascade layers (@layer), and why are they important?

Cascade layers, introduced in CSS and now broadly supported, let you explicitly define a priority order for groups of styles. Layers trump specificity — a rule in a higher-priority layer wins over a more specific selector in a lower-priority layer.

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer components {
  .button { padding: 0.5rem 1rem; background: blue; }
}

@layer utilities {
  .bg-red { background: red; } /* Wins over .button in components */
}

This solves specificity wars at scale and is a core pattern in modern CSS architecture, superseding many use cases for !important. Tailwind CSS v4 is built on this model.

CSS Nesting

Q28. What is native CSS nesting, and how does it work?

CSS nesting is natively supported in all major browsers without a preprocessor. It allows you to write nested rules directly in CSS:

.card {
  padding: 1rem;
  background: white;

  & h2 {
    font-size: 1.25rem;
    color: #333;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  @media (max-width: 600px) {
    padding: 0.5rem;
  }
}

The & refers to the parent selector. This reduces repetition and improves readability without requiring SASS or PostCSS. Note that while SASS nesting required & for pseudo-classes and pseudo-elements, native CSS nesting requires & in more contexts to avoid ambiguity — e.g., & h2 (not just h2) when the nested selector starts with a tag name.

CSS Container Queries

Q29. What are container queries, and how do they differ from media queries?

Container queries allow elements to apply styles based on the size of their containing element (rather than the viewport). This enables truly reusable, context-aware components:

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

When to use which:

  • Use media queries for page-level layout decisions (viewport size).
  • Use container queries for component-level layout decisions (component size within its context).

Q30. What are container style queries?

Beyond size, you can also query custom property values on a container:

@container style(--theme: dark) {
  .card { background: #1a1a1a; color: white; }
}

✨ 2026 note: Container scroll-state queries are an emerging addition, allowing styles to react to whether a container is currently scrolled, stuck (sticky), or snapping:

@container scroll-state(stuck: top) {
  .sticky-header { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
}

CSS Scope

Q31. What is @scope in CSS?

@scope lets you limit where styles apply, preventing leakage into unintended subtrees. It allows scoping without relying on specificity tricks or BEM. It is now production-ready in Chrome and Safari, with Firefox support underway:

@scope (.card) to (.card-footer) {
  p { font-size: 0.9rem; color: #555; } /* Only p inside .card but not inside .card-footer */
}

This is particularly useful in design systems and component libraries.

CSS Logical Properties

Q32. What are CSS logical properties, and why should you use them?

Logical properties replace physical directional values (left, right, top, bottom) with flow-relative equivalents, making layouts internationalization-friendly by automatically adapting to RTL (right-to-left) languages:

/* Physical (avoid for i18n) */
.box { margin-left: 1rem; border-right: 1px solid; }

/* Logical (preferred) */
.box { margin-inline-start: 1rem; border-inline-end: 1px solid; }

Key logical property pairs:

  • margin-inline → left/right margins (in LTR)
  • padding-block → top/bottom padding
  • inset-inline-start → left in LTR, right in RTL
  • border-block-end → bottom border in horizontal writing modes

CSS Color Functions and Spaces

Q33. What new color features exist in CSS in 2025–2026?

CSS now supports modern color spaces and functions that provide wider gamuts, perceptually uniform gradients, and more predictable color manipulation:

  • oklch() — Perceptually uniform lightness-chroma-hue; excellent for accessible color systems and smooth gradients. Recommended for design tokens.
  • oklab() — Perceptually uniform lab space for smooth color interpolation.
  • color-mix() — Mix two colors in a specified color space.
  • light-dark() — Shorthand for providing light and dark mode color values without a media query.
  • color(display-p3 ...) — Access wide-gamut P3 color space for vivid colors on supporting displays.
  • relative color syntax — Derive a new color from an existing variable by adjusting individual channels:
:root {
  --brand: oklch(60% 0.2 250);
}

/* Relative color: lighten brand by raising L channel */
.badge-subtle {
  background: oklch(from var(--brand) calc(l + 0.2) c h);
}

.badge {
  background: color-mix(in oklch, var(--brand) 20%, white);
  color: light-dark(#111, #eee);
}

CSS Scroll-Driven Animations

Q34. What are scroll-driven animations in CSS?

Scroll-driven animations (broadly supported since 2024 in Chrome/Edge/Safari; Firefox support is in active development) allow CSS animations to be driven by scroll progress rather than time, entirely in CSS with no JavaScript:

@keyframes reveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section {
  animation: reveal linear both;
  animation-timeline: view();         /* Tied to element's visibility in viewport */
  animation-range: entry 0% entry 40%;
}

/* Progress bar tied to page scroll */
.progress-bar {
  animation: grow-width linear;
  animation-timeline: scroll(root);   /* Tied to root scroll position */
}

@keyframes grow-width {
  from { width: 0%; }
  to   { width: 100%; }
}

Always pair scroll-driven animations with @media (prefers-reduced-motion: reduce) fallbacks for accessibility.

View Transitions API

Q35. What is the View Transitions API and how is it used in CSS?

The View Transitions API enables animated transitions between DOM states (single-page) or between page navigations (multi-page, with @view-transition). Same-document View Transitions reached Baseline status in 2025 and are production-ready. The browser captures before/after snapshots and animates between them:

/* Default cross-fade is automatic; customize with pseudo-elements */
::view-transition-old(root) {
  animation: slide-out 0.3s ease forwards;
}
::view-transition-new(root) {
  animation: slide-in 0.3s ease forwards;
}

/* Named transitions on specific elements */
.hero-image {
  view-transition-name: hero; /* Must be unique on the page */
}

For multi-page apps, opt in with:

@view-transition {
  navigation: auto;
}

⚠️ Common pitfall: view-transition-name values must be unique per page. Duplicate names will break the transition silently.

CSS Anchor Positioning ✨

Q36. What is CSS Anchor Positioning, and when would you use it?

CSS Anchor Positioning allows an absolutely or fixed-positioned element to be tethered to any other element on the page (the "anchor"), regardless of DOM structure. This eliminates the need for JavaScript-based positioning libraries (like Floating UI or Popper.js) for tooltips, dropdowns, popovers, and context menus.

Browser support (2026): Chrome, Edge, and Safari support it. Firefox added support behind a flag in Firefox 145. A polyfill from OddBird provides coverage for older browsers.

/* Define the anchor */
.trigger {
  anchor-name: --my-anchor;
}

/* Position relative to the anchor */
.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top center;       /* Place it above and centered */
  position-try-fallbacks: flip-block, flip-inline; /* Auto-reposition if it overflows */
  margin-bottom: 0.5rem;
}

Key properties:

  • anchor-name — Registers an element as a named anchor.
  • position-anchor — Links a positioned element to a named anchor.
  • position-area — Uses a 3×3 grid model to describe where around the anchor the element should appear.
  • anchor() — Function for precise inset-based positioning relative to anchor edges.
  • position-try-fallbacks — List of alternative positions if the default overflows the viewport.
/* Using anchor() function for precise control */
.dropdown {
  position: fixed;
  position-anchor: --nav-button;
  top: anchor(bottom);
  left: anchor(left);
  min-width: anchor-size(width);  /* Match the anchor's width */
}

Use @supports (anchor-name: --test) for progressive enhancement while Firefox catches up.

CSS if() Function ✨

Q37. What is the CSS if() function, and how does it work?

The if() function brings inline conditional logic directly into CSS property values. Instead of scattering conditions across separate @media, @container, or @supports blocks, you can express the condition exactly where the value is used.

Browser support (2026): Available in Chrome/Edge 137+ and Chromium-based browsers. Safari and Firefox support is under development. Use progressive enhancement with sensible defaults.

/* Syntax: if(condition: value; else: fallback) */

/* Respect reduced-motion preference inline */
.card {
  transition-duration: if(
    media(prefers-reduced-motion: reduce): 0ms;
    else: 180ms
  );
}

/* Conditional theming from a custom property */
.badge {
  background: if(
    style(--variant: success): oklch(70% 0.2 145);
    style(--variant: error):   oklch(60% 0.25 27);
    else: oklch(65% 0.1 250)
  );
}

/* Inline feature query */
body {
  background-color: if(
    supports(color: oklch(0 0 0)): oklch(0.7 0.185 232);
    else: #00adf3
  );
}

The if() function supports three condition types:

  • style(...) — Evaluates a CSS custom property value (style query).
  • media(...) — Evaluates a media feature inline.
  • supports(...) — Evaluates a feature support query inline.

This is especially powerful for design token systems, where theming logic can live inside property declarations rather than in component class variants.

CSS Houdini and Custom Properties

Q38. What is CSS Houdini, and what is @property?

CSS Houdini exposes CSS engine internals to JavaScript, enabling low-level styling APIs. Most practically today, @property registers typed custom properties with animation support:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rotating-gradient {
  background: conic-gradient(from var(--gradient-angle), royalblue, hotpink, royalblue);
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  to { --gradient-angle: 360deg; }
}

Without @property, custom properties in @keyframes would not animate. @property also adds type checking and fallback values to custom properties. It pairs well with the if() function and style queries for strongly-typed design tokens.

CSS Preprocessors (e.g., SASS)

Q39. What is a CSS preprocessor, and is SASS still relevant in 2026?

CSS preprocessors like SASS extend CSS with variables, functions, mixins, and nesting. In 2026, with native CSS nesting, custom properties, @layer, and the if() function, many SASS features are now available natively. However, SASS/SCSS remains useful for compile-time logic, complex mixins, loops, and large codebases with build pipelines. The case for SASS narrows further each year.

Q40. How do you define a variable in SASS?

$primary-color: #3498db;

.button {
  background-color: $primary-color;
}

In modern CSS-first projects, prefer CSS custom properties for runtime flexibility and SASS $variables only for compile-time constants.

CSS Architecture and Methodologies

Q41. What is the BEM methodology?

BEM (Block, Element, Modifier) provides a naming convention: blocks are standalone components, elements are parts of blocks (.block__element), and modifiers change appearance (.block--modifier). It avoids specificity conflicts by keeping all selectors at single-class depth.

<div class="button button--primary">
  <span class="button__icon button__icon--left"></span>
  Submit
</div>

Q42. How do cascade layers change CSS architecture?

Cascade layers (@layer) allow architecting CSS in explicit priority tiers, reducing the need for BEM's specificity-avoidance strategy. A typical layered architecture:

@layer reset, tokens, base, components, variants, utilities, overrides;

Rules in later-declared layers always win over earlier layers, regardless of specificity. This aligns with utility-first frameworks like Tailwind and integrates well with design token systems.

Q43. What is the utility-first CSS methodology?

Utility-first CSS (popularized by Tailwind CSS) composes styles entirely from single-purpose utility classes rather than semantic component classes. It avoids CSS file growth by reusing classes across the HTML. Tailwind v4 (2025) rebuilds around a CSS-native architecture using cascade layers, @property, and a CSS @import-based config — no JavaScript config file required.

CSS Performance and Optimization

Q44. What are techniques for optimizing CSS performance?

  • Minification and concatenation — Reduce file size and HTTP requests.
  • Critical CSS — Inline above-the-fold styles; defer the rest.
  • content-visibility: auto — Skips rendering of off-screen content sections, dramatically improving initial load time on long pages. Must be paired with contain-intrinsic-size to avoid layout shift.
  • will-change — Hints to the browser to promote an element to its own compositor layer (use sparingly; overuse wastes GPU memory).
  • Avoiding layout thrashing — Keep animations on transform and opacity (compositor-only properties) rather than properties that trigger layout (width, height, top, left).
  • CSS @layer — Reduces specificity wars that lead to bloated overrides.
  • Reducing redundancy — Use shorthand properties and design tokens.
  • text-wrap: balance / text-wrap: pretty — Native balanced/optimized text wrapping without JavaScript, reducing heading orphans.
.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Estimated height to prevent layout shifts */
}

h1, h2, h3 {
  text-wrap: balance; /* Prevents single-word orphan lines */
}

Q45. What are CSS vendor prefixes and are they still needed?

Vendor prefixes (-webkit-, -moz-, -ms-) were used for experimental properties. In 2026, most stable CSS properties no longer require them. Autoprefixer (a PostCSS plugin) handles any remaining cases automatically in build pipelines. Very few new features require manual prefixing.

CSS Frameworks and Libraries

Q46. What are popular CSS frameworks in 2026?

  • Tailwind CSS v4 — Utility-first; rebuilt with a CSS-native engine (CSS @import config, cascade layers, @property). Industry-leading adoption.
  • Bootstrap 5 — Component-based; still widely used in enterprise/CMS contexts.
  • Open Props — CSS custom property primitives for design tokens, not a framework per se.
  • PandaCSS — Type-safe CSS-in-JS generating static CSS.
  • Vanilla Extract — TypeScript-first zero-runtime CSS-in-JS.
  • UnoCSS — Atomic CSS engine with high flexibility and performance.

CSS and Accessibility

Q47. Why is accessibility important in CSS?

CSS directly controls visual presentation — contrast, focus styles, motion, and layout. Poor CSS choices can make content unreadable or unusable for people with visual, motor, or vestibular disabilities.

Q48. What are CSS best practices for accessibility?

  • Ensure WCAG AA contrast ratios (4.5:1 for body text, 3:1 for large text). Use oklch() for accessible color math.
  • Never remove :focus-visible outlines without providing a clear replacement.
  • Use @media (prefers-reduced-motion: reduce) to disable or reduce animations.
  • Use @media (prefers-contrast: more) for high contrast mode adjustments.
  • Avoid display: none for visually hidden content that should remain accessible — use the .sr-only pattern instead.
  • Use logical properties for RTL support.
  • Ensure anchor-positioned elements maintain accessible focus order; pair with the Popover API where possible, as the browser handles focus management automatically.
/* Accessible visually-hidden utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

CSS Troubleshooting and Debugging

Q49. How do you troubleshoot CSS issues?

  • Use browser DevTools (Chrome, Firefox, Safari) to inspect the cascade, computed styles, and the Layers panel.
  • Chrome DevTools includes a CSS Overview panel for auditing color contrast, font usage, and unused styles.
  • Use outline: 1px solid red to debug layout/spacing issues.
  • Check for cascade layer ordering issues with the Styles panel layer view.
  • Use @supports to detect feature support and provide fallbacks.
  • The Animations tab in DevTools can inspect and scrub scroll-driven animations.

Q50. What are common CSS pitfalls in 2026?

  • Forgetting content-visibility and contain-intrinsic-size together (omitting the latter causes layout shift).
  • Using 100vh instead of 100dvh on mobile, causing content to be hidden behind the browser bar.
  • Animating non-compositor properties (width, margin) instead of transform/opacity.
  • Using @layer without declaring the layer order upfront, leading to unpredictable cascade behavior.
  • Missing view-transition-name uniqueness (duplicate names break view transitions silently).
  • Using if() in production without fallback defaults — unsupported browsers will fall back to initial, not the else value.
  • Applying anchor-name to elements that change position in the DOM without testing overflow fallbacks.

CSS Best Practices

Q51. What are general best practices for writing clean, maintainable CSS in 2026?

  • Use design tokens via CSS custom properties at :root for consistent theming.
  • Organize with @layer to avoid specificity wars.
  • Prefer native CSS nesting over SASS nesting for browser-native performance.
  • Use clamp(), min(), max() for fluid, responsive values.
  • Write mobile-first using min-width media queries.
  • Use logical properties for internationalization.
  • Minimize !important — use cascade layers instead.
  • Keep selectors shallow; avoid nesting more than 3 levels deep.
  • Document complex calculations and magic numbers with comments.
  • Use @starting-style for entry animations rather than JS-toggled classes.
  • Pair new features (if(), anchor positioning, scroll-driven animations) with @supports progressive enhancement until cross-browser coverage is complete.

CSS Cross-Browser Compatibility

Q52. How do you achieve cross-browser compatibility in CSS?

  • Use @supports for progressive enhancement of newer features.
  • Use Autoprefixer in your build pipeline for vendor prefixes.
  • Test in Chrome, Firefox, Safari, and their mobile counterparts.
  • Check caniuse.com for feature support tables.
  • Check Baseline status — a signal maintained by the WebDX Community Group indicating when a feature is broadly safe without polyfills.
  • Provide sensible fallbacks before modern syntax:
/* Fallback first, then modern enhancement */
.box {
  background: #3498db;                          /* Legacy */
  background: oklch(55% 0.18 250);              /* Modern */
}

/* Progressive enhancement with @supports */
@supports (anchor-name: --test) {
  .tooltip {
    position: absolute;
    position-anchor: --trigger;
    position-area: top center;
  }
}

Miscellaneous

Q53. What is the aspect-ratio property?

aspect-ratio sets a preferred aspect ratio for an element, eliminating the need for the "padding-top hack" for responsive iframes and images:

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

img {
  aspect-ratio: 1;    /* Square */
  object-fit: cover;
}

Q54. What is the CSS Popover API and how does CSS interact with it?

The native Popover API (HTML attribute popover + popovertarget) reached Baseline status in 2025 and allows dismissible overlays without JavaScript state management. CSS controls their appearance:

[popover] {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

[popover]:popover-open {
  display: flex;
}

/* Animate popover entry/exit using @starting-style */
[popover] {
  transition: opacity 0.2s, display 0.2s allow-discrete;
  opacity: 0;
}

[popover]:popover-open {
  opacity: 1;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
  }
}

Q55. What is @starting-style?

@starting-style defines the initial style state for an element being added to the DOM or transitioning from display: none. This enables entry animations purely in CSS, avoiding the need for JavaScript-toggled classes:

.dialog {
  transition: opacity 0.3s, transform 0.3s;
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .dialog {
    opacity: 0;
    transform: translateY(-20px);
  }
}

Q56. What is text-wrap: balance and text-wrap: pretty?

These values optimize how text wraps within its container, eliminating awkward single-word lines (orphans) without JavaScript:

  • text-wrap: balance — Distributes text as evenly as possible across all lines. Best for headings and short blocks of text.
  • text-wrap: pretty — Optimizes for the last line specifically to avoid orphans. Best for body paragraphs.
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Q57. How do you load CSS efficiently for performance?

  • Critical CSS inline — Inline above-the-fold styles in <style> to prevent render-blocking.
  • <link rel="preload"> — Hint the browser to fetch CSS early.
  • media attribute — Load non-critical CSS with a media attribute that doesn't match initially, then change it with JS.
  • Layered CSS splitting — Split your CSS by @layer and load lower-priority layers asynchronously.
  • HTTP/2 and HTTP/3 — Multiple CSS files are less costly; remove concatenation if using modern protocols.

Additional Resources 📚

Books

Websites & References

What to Watch (2026 Horizon)

  • CSS @function — Custom reusable CSS functions (in spec development; pairs with if() for design systems)
  • CSS Masonry / Grid Lanes — Native masonry layout; experimental in Chrome Canary and Firefox Nightly
  • Container Scroll-State Queries — Style elements based on scroll state (stuck, snapped, overflowing)
  • Customizable <select> — Fully styleable native select element; long-requested and nearing broad support
  • Interest Invoker API — CSS-native hover delay for tooltips (complement to Anchor Positioning + Popover API)
  • sibling-index() / sibling-count() — CSS functions to read an element's position among siblings, enabling staggered animations without JavaScript

Happy Coding 🚀

About

This Repository contains List of Frontend Development Interview Questions

Topics

sass html5 layout css3-mediaqueries css3-animations css3-selectors css3-features css3-flexbox css3-transitions css3-grid reponsive-web-design

Resources

Readme
Activity

Stars

4 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors