1. What is Critical Rendering Path?

Definition

The Critical Rendering Path (CRP) is the sequence of steps a browser follows to convert HTML, CSS, and JavaScript into pixels on the screen.

Steps

1. Parse HTML → DOM
2. Parse CSS → CSSOM
3. Combine → Render Tree
4. Layout (calculate positions)
5. Paint (render pixels)

Key Insight

CSS is render-blocking, meaning the browser must load and parse CSS before rendering.

Interview Insight

Optimizing CRP improves First Contentful Paint (FCP) and page load speed.

2. What causes reflow and repaint?

Reflow (Layout)

Occurs when the browser recalculates layout.

Causes

• Changing width, height, margin, padding
• Adding/removing DOM elements
• Resizing window

Repaint

Occurs when visual styles change without affecting layout.

Causes

• Changing color
• Background
• Visibility

Key Difference

Interview Insight

Reflow is costly—avoid frequent layout changes.

3. How to optimize CSS performance?

Techniques

1. Minimize CSS size

• Remove unused CSS
• Use minification

2. Reduce selector complexity

/* Avoid */
div ul li a span {}

/* Prefer */
.link {}

3. Use efficient selectors

• Avoid deep nesting

4. Use shorthand properties

margin: 10px;

5. Avoid inline styles
6. Use CSS variables for reuse
7. Split critical and non-critical CSS

Interview Insight

Focus on reducing render-blocking CSS.

4. What is will-change property?

Definition

will-change hints the browser about properties that will change, allowing optimization.

Example

div {
  will-change: transform;
}

Use Cases

• Animations
• Transitions

Warning

Overuse can hurt performance.

Interview Insight

Use only when necessary for performance-critical animations.

5. What is GPU acceleration in CSS?

Definition

GPU acceleration uses the graphics card to render certain CSS properties.

Properties that trigger GPU

• transform
• opacity

Example

div {
  transform: translateZ(0);
}

Benefits

• Smoother animations
• Better performance

Interview Insight

Prefer transform over top/left for animations.

6. How does browser render CSS?

Process

1. Parse HTML → DOM
2. Parse CSS → CSSOM
3. Combine → Render Tree
4. Layout → calculate sizes/positions
5. Paint → draw elements
6. Composite → final rendering

Key Insight

CSS must be fully loaded before rendering starts.

Interview Insight

Blocking CSS delays rendering.

7. How to avoid layout thrashing?

Definition

Layout thrashing occurs when layout is repeatedly forced due to alternating reads/writes.

Example (Bad)

element.style.width = "100px";
console.log(element.offsetWidth);

Optimization Techniques

• Batch DOM reads and writes
• Use requestAnimationFrame
• Avoid frequent style changes

Interview Insight

Minimize DOM access and layout recalculations.

8. What is progressive rendering?

Definition

Progressive rendering improves perceived performance by displaying content as soon as possible.

Techniques

• Lazy loading
• Code splitting
• Prioritizing critical content

Example

• Render header first
• Load images later

Interview Insight

Focuses on user perception, not just actual speed.

9. What is lazy loading in CSS context?

Definition

Lazy loading delays loading of non-critical CSS or assets until needed.

Techniques

• Load CSS asynchronously
• Use media attributes

<link rel="stylesheet" href="print.css" media="print">

Example

Load non-critical styles later using JavaScript.

Interview Insight

Improves initial load time.

10. How to reduce CSS file size?

Techniques

1. Minification

• Remove whitespace and comments

2. Remove unused CSS

• Tools like PurgeCSS

3. Use shorthand properties
4. Avoid duplication
5. Modular CSS
6. Compress using Gzip/Brotli

Example

/* Before */
margin-top: 10px;
margin-right: 10px;

/* After */
margin: 10px;

Interview Insight

Smaller CSS → faster load → better performance.

11. What is CSS Subgrid?

Definition

Subgrid is a feature of CSS Grid that allows a nested grid (child grid) to inherit the row/column structure of its parent grid.

Syntax

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}

Key Benefits

• Consistent alignment across nested elements
• Avoids duplicating grid definitions
• Better layout control in complex UIs

Interview Insight

Subgrid is useful for design systems and reusable components.

12. What is CSS Cascade Layers (@layer)?

Definition

@layer allows developers to control the order of CSS rules explicitly, improving maintainability.

Example

@layer base, components, utilities;

@layer base {
  p { color: black; }
}

@layer utilities {
  p { color: red; }
}

Behavior

• Later layers override earlier ones
• Independent of selector specificity

Interview Insight

Helps manage large-scale CSS and avoid specificity conflicts.

13. What are logical properties?

Definition

Logical properties adapt layout based on writing direction (LTR/RTL) instead of fixed physical directions.

Examples

• margin-inline-start
• padding-block-end
• border-inline

Example

div {
  margin-inline-start: 10px;
}

Benefit

Automatically adjusts for different languages.

14. Difference between logical and physical properties

Interview Insight

Logical properties are better for internationalization (i18n).

15. What is writing-mode?

Definition

The writing-mode property defines the direction text flows in a document.

Values

• horizontal-tb (default)
• vertical-rl
• vertical-lr

Example

div {
  writing-mode: vertical-rl;
}

Use Cases

• Asian languages (vertical text)
• Creative layouts

16. What is multi-column layout?

Definition

CSS multi-column layout allows content to flow into multiple columns, similar to newspapers.

Example

div {
  column-count: 3;
  column-gap: 20px;
}

Properties

• column-count
• column-width
• column-gap

Interview Insight

Useful for text-heavy layouts.

17. What is fragmentation?

Definition

Fragmentation refers to how content is broken into multiple pieces across pages, columns, or regions.

Example

• Page breaks in printing
• Columns in multi-column layout

Related Properties

• break-before
• break-after
• break-inside

Interview Insight

Important for print styles and multi-column layouts.

18. What is grid auto-placement?

Definition

Auto-placement is how CSS Grid automatically places items when positions are not explicitly defined.

Example

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

Behavior

• Items fill rows by default
• Controlled by grid-auto-flow

grid-auto-flow: column;

Interview Insight

Understanding auto-placement helps avoid layout bugs.

19. What is stacking context?

Definition

A stacking context is a 3D layering system that determines how elements are stacked on the z-axis.

Key Characteristics

• Each stacking context is independent
• Elements inside it cannot escape it

Created By

• position with z-index
• opacity < 1
• transform
• filter

Interview Insight

Stacking context explains many z-index issues.

20. How does z-index create stacking context?

Definition

z-index creates a new stacking context when applied to a positioned element.

Example

div {
  position: relative;
  z-index: 10;
}

Behavior

• Elements are layered within their own context
• Higher z-index wins within same context

Important Note

• z-index does not work on position: static

Interview Insight

Many bugs occur because developers misunderstand stacking context boundaries.

21. What is :has() pseudo-class?

Definition

:has() is a relational pseudo-class that selects an element based on its children or descendants.

Syntax

selector:has(child-selector) {
  property: value;
}

Example

div:has(img) {
  border: 2px solid green;
}

This selects all div elements that contain an <img>.

Key Use Cases

• Parent selection (previously not possible in CSS)
• Conditional styling based on child elements

Interview Insight

:has() is powerful but should be used carefully due to potential performance impact.

22. What are container queries vs media queries?

Media Queries

Definition

Apply styles based on viewport size or device characteristics.

@media (max-width: 768px) {
  .box { font-size: 14px; }
}

Container Queries

Definition

Apply styles based on the size of a parent container.

@container (min-width: 400px) {
  .box { display: flex; }
}

Comparison

Interview Insight

Container queries enable true reusable components.

23. What is prefers-color-scheme?

Definition

A media feature that detects user’s preferred color theme (light or dark).

Example

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

Values

• light
• dark

Use Case

• Dark mode implementation

Interview Insight

Essential for modern UX and accessibility.

24. What is prefers-reduced-motion?

Definition

Detects if a user prefers reduced motion for accessibility reasons.

Example

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

Purpose

• Helps users with motion sensitivity
• Improves accessibility

Interview Insight

Important for inclusive design.

25. What is pointer-events property?

Definition

Controls whether an element responds to mouse or touch events.

Values

• auto
• none

Example

div {
  pointer-events: none;
}

Behavior

• none → element ignores clicks
• Events pass through to underlying elements

Use Cases

• Disable interaction
• Overlay effects

26. What is scroll-behavior?

Definition

Controls how scrolling behaves (smooth or instant).

Example

html {
  scroll-behavior: smooth;
}

Values

• auto
• smooth

Use Case

• Smooth scrolling navigation

27. What is scroll-snap?

Definition

Scroll Snap allows elements to snap into position when scrolling.

Example

.container {
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
}

Use Cases

• Carousels
• Slides
• Full-page sections

Interview Insight

Improves UX for scroll-based interfaces.

28. What is CSS Houdini?

Definition

CSS Houdini is a set of APIs that allow developers to extend CSS by writing custom rendering logic in JavaScript.

Purpose

• Access browser’s rendering engine
• Create custom CSS features

Example Use

• Custom layout
• Custom paint

Interview Insight

Bridges gap between CSS and JavaScript.

29. What is custom paint API?

Definition

Part of CSS Houdini that allows you to create custom backgrounds using JavaScript.

Example

registerPaint('myPainter', class {
  paint(ctx, size) {
    ctx.fillRect(0, 0, size.width, size.height);
  }
});

div {
  background: paint(myPainter);
}

Use Cases

• Custom shapes
• Dynamic backgrounds

Interview Insight

Useful for advanced visual effects.

30. What is env() function?

Definition

env() accesses environment variables provided by the browser or device.

Example

div {
  padding-top: env(safe-area-inset-top);
}

Common Variables

• safe-area-inset-top
• safe-area-inset-bottom

Use Case

• Handling notches on mobile devices

Interview Insight

Important for responsive design on modern devices.

31. What is a CSS preprocessor?

Definition

A CSS preprocessor is a tool that extends CSS with programming-like features such as variables, nesting, mixins, and functions. It is compiled into standard CSS before being used in the browser.

Features

• Variables
• Nesting
• Mixins
• Functions
• Reusability

Example (Preprocessor Syntax)

$primary: blue;

.button {
  color: $primary;
}

Output CSS

.button {
  color: blue;
}

Interview Insight

Preprocessors improve productivity and maintainability, especially in large projects.

32. What is Sass, Less, Stylus?

Definition

They are popular CSS preprocessors.

Sass

• Most widely used
• Supports variables, nesting, mixins
• Two syntaxes: SCSS and indented

Less

• JavaScript-based
• Simpler than Sass
• Used in some legacy projects

Stylus

• Flexible syntax (optional semicolons/braces)
• Powerful but less commonly used

Comparison

Interview Insight

Sass is the industry standard.

33. What is CSS-in-JS?

Definition

CSS-in-JS is a technique where styles are written inside JavaScript files and scoped to components.

Example

const style = {
  color: 'blue'
};

Popular Libraries

• styled-components
• Emotion

Benefits

• Scoped styles
• Dynamic styling
• No class name conflicts

Interview Insight

Common in React applications for component-based styling.

34. What are CSS Modules?

Definition

CSS Modules scope CSS locally to a component, avoiding global conflicts.

Example

/* styles.module.css */
.button {
  color: red;
}

import styles from './styles.module.css';

<button className={styles.button}>

Key Features

• Local scope
• No naming conflicts
• Easy integration

Interview Insight

A simpler alternative to CSS-in-JS.

35. What is PostCSS?

Definition

PostCSS is a tool that processes CSS using JavaScript plugins.

Use Cases

• Add vendor prefixes
• Optimize CSS
• Use modern syntax

Example

Transforms future CSS into browser-compatible CSS.

Interview Insight

Acts like a CSS processing pipeline.

36. What is autoprefixer?

Definition

Autoprefixer is a PostCSS plugin that automatically adds vendor prefixes.

Example

/* Input */
display: flex;

/* Output */
display: -webkit-flex;
display: flex;

Benefit

• No manual prefixing
• Better compatibility

Interview Insight

Essential tool in modern workflows.

37. What is tree shaking in CSS?

Definition

Tree shaking removes unused CSS code from the final bundle.

Purpose

• Reduce file size
• Improve performance

Example

Remove unused classes not present in HTML.

Interview Insight

Important for optimizing large applications.

38. What is PurgeCSS?

Definition

PurgeCSS removes unused CSS by scanning HTML/JS files.

Example

• Removes unused Tailwind classes

Workflow

1. Scan content files
2. Identify used classes
3. Remove unused styles

Interview Insight

Commonly used with utility-first frameworks.

39. How to handle browser compatibility?

Techniques

1. Use Autoprefixer
2. Follow CSS standards
3. Use feature detection
4. Test across browsers
5. Use fallbacks

Example

display: flex;
display: block; /* fallback */

Tools

• Browser DevTools
• Can I Use

Interview Insight

Cross-browser testing is essential for production apps.

40. What are vendor prefixes?

Definition

Vendor prefixes are browser-specific prefixes added to CSS properties for experimental features.

Examples

• -webkit- (Chrome, Safari)
• -moz- (Firefox)
• -ms- (Internet Explorer)

Example

-webkit-transform: rotate(45deg);

Purpose

• Enable experimental features
• Ensure compatibility

Interview Insight

Modern tools like Autoprefixer reduce the need to write prefixes manually.

41. What is Shadow DOM?

Definition

Shadow DOM is a web platform feature that allows you to encapsulate HTML, CSS, and JavaScript inside a component, creating an isolated DOM tree.

Key Idea

• Separates component internals from the main DOM
• Prevents style and structure conflicts

Example

const element = document.querySelector('#host');
const shadow = element.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>p { color: red; }</style><p>Hello</p>`;

Interview Insight

Used in Web Components for true encapsulation and reusability.

42. How does Shadow DOM affect CSS?

Behavior

• Styles inside Shadow DOM are scoped locally
• Global CSS does not affect Shadow DOM
• Shadow DOM styles do not leak outside

Example

/* Outside */
p { color: blue; }

/* Inside Shadow DOM */
p { color: red; }

Result: Shadow DOM p remains red.

Special Selectors

• :host → targets host element
• ::slotted() → styles slotted content

Interview Insight

Shadow DOM creates style isolation, avoiding conflicts.

43. What is encapsulation in CSS?

Definition

Encapsulation means restricting styles to a specific component or scope.

Methods

• Shadow DOM
• CSS Modules
• BEM naming

Benefits

• Prevents global conflicts
• Improves maintainability
• Enables reusable components

Interview Insight

Encapsulation is key in component-based architectures.

44. What is scope in CSS?

Definition

Scope defines where a CSS rule applies.

Types

• Global scope (default CSS)
• Local scope (modules, Shadow DOM)

Example

.container p {
  color: red;
}

Only applies inside .container.

Interview Insight

Scoping prevents unintended styling effects.

45. What is cascade order?

Definition

Cascade order determines which CSS rule is applied when multiple rules match.

Order of Priority

1. Importance (!important)
2. Specificity
3. Source order (last wins)

Example

p { color: blue; }
p { color: red; }

Result: red

Interview Insight

Understanding cascade is critical for debugging CSS.

46. What is specificity hierarchy?

Definition

Specificity hierarchy determines which selector has higher priority.

Order

1. Inline styles
2. ID selectors
3. Class, attribute, pseudo-class
4. Element selectors

Example

#id { color: red; }
.class { color: blue; }

Result: red

Interview Insight

Specificity overrides cascade order when conflicts occur.

47. How does !important affect cascade?

Definition

!important overrides all other rules regardless of specificity.

Example

p {
  color: red !important;
}

Behavior

• Highest priority
• Overrides inline and normal rules

Drawbacks

• Hard to override
• Breaks maintainability

Interview Insight

Avoid using !important unless absolutely necessary.

48. What is inheritance control?

Definition

Inheritance control refers to how CSS properties are inherited or overridden.

Techniques

• Use inherit to force inheritance
• Use initial to reset
• Use unset for default behavior

Example

p {
  color: inherit;
}

Interview Insight

Helps manage consistent styling across components.

49. What is initial, inherit, unset, revert?

initial

Sets property to its default browser value

color: initial;

inherit

Inherits value from parent

color: inherit;

unset

• Acts as inherit for inherited properties
• Acts as initial for others

color: unset;

revert

Resets to browser or user-agent stylesheet

color: revert;

Interview Insight

Understanding these is crucial for debugging unexpected styles.

50. How does calc() work?

Definition

calc() performs dynamic calculations in CSS.

Syntax

calc(expression)

Example

div {
  width: calc(100% - 50px);
}

Supported Operations

• + addition
• - subtraction
• * multiplication
• / division

Rules

• Must include spaces around operators
• Can mix units

button:focus {
  outline: 2px solid blue;
}

button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

button:focus-visible {
  outline: 3px solid orange;
}

<a href="#main" class="skip-link">Skip to content</a>

.skip-link {
  position: absolute;
  top: -40px;
}

.skip-link:focus {
  top: 0;
}

body {
  color: #000;
  background: #fff;
}

<div role="button">Click</div>

[role="button"] {
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

:root {
  --bg: white;
}

[data-theme="dark"] {
  --bg: black;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

#id .class p span {
}

css/
  base/
  components/
  layout/
  utilities/