CSS Performance & Best Practices — Interview Questions & Answers

Ques: What is CSS optimization and why is it important?

Ans: CSS optimization means improving CSS performance to make pages load faster and render efficiently across devices.

Important :

Faster page load times
Better SEO (Core Web Vitals)
Reduced memory usage
Easier maintenance
Minify and compress CSS files
Remove unused CSS (purging)
Use shorthand properties
Combine and reuse styles
Use efficient selectors

Ques: What is CSS minification?

Ans: CSS minification removes unnecessary characters (spaces, comments, newlines) without affecting functionality.

Example:

Before:

h1 {
  color: blue;
  font-size: 20px;
}

After minification:

h1{color:blue;font-size:20px;}

Ques: What is CSS purging?

Ans: CSS Purging removes unused or unnecessary CSS rules that are not used in the HTML.

Example:

npx purgecss --css styles.css --content index.html -o build/

Ques: What are CSS reflows and how can you reduce them?

Ans: A reflow occurs when the browser recalculates positions and layouts of elements after a DOM change.

Causes of Reflow:

Changing element size, margin, or position
Adding/removing DOM elements
Reading layout properties (like offsetHeight) after modifying DOM

Best Practices to Reduce Reflows:

Minimize DOM changes
Use class toggling instead of inline styles
Avoid table-based layouts
Use transform for animations instead of top or left

Ques: What is Critical CSS?

Ans: Critical CSS is the minimum CSS required to render the visible (above-the-fold) part of a webpage.

Example:

<style>
  header, h1 { color: white; background: black; }
</style>
<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">

Ques: What are render-blocking CSS files?

Ans: When CSS is loaded synchronously in the <head>, it blocks page rendering until all styles are downloaded and parsed.

Solutions:

Inline critical CSS
Use media="print" and load asynchronously
Minify and combine CSS files

Ques: What is BEM in CSS architecture?

Ans: BEM (Block, Element, Modifier) is a naming convention for writing modular and reusable CSS.

Syntax:

.block {}
.block__element {}
.block--modifier {}

Example:

.button {}
.button__icon {}
.button--primary {}

Ques: What is OOCSS (Object-Oriented CSS)?

Ans: OOCSS promotes separating structure from skin and container from content.

Principles:

Separate structure (layout) and skin (theme)
Separate container (parent) and content (child)

Example:

.media { display: flex; align-items: center; }
.media__img { margin-right: 10px; }
.media__body { flex: 1; }

Ques: What is SMACSS (Scalable and Modular Architecture for CSS)?

Ans: SMACSS organizes CSS into five categories for large-scale projects:

Base – Default element styles
Layout – Structure of the page
Module – Reusable components (cards, buttons)
State – UI changes (active, hidden, expanded)
Theme – Visual variations

Ques: What is modular CSS?

Ans: Modular CSS breaks styles into small, reusable components instead of one large stylesheet.

Easier maintenance
Reduced conflicts
Better scalability

Ques: What is scoped CSS?

Ans: Scoped CSS means styles apply only within a specific component, preventing leakage to other parts of the app.

Example (Vue):

<style scoped>
.button { color: red; }
</style>

Ques: What are CSS preprocessors?

Ans: CSS preprocessors like Sass, LESS, and Stylus allow writing dynamic and maintainable CSS with features like variables, nesting, and mixins.

Ques: What are advantages of using Sass (SCSS)?

Supports variables, loops, conditionals
Modular imports (@use, @import)
Mixins and functions for reusability
Partials for organized code
Easier theme and color management

Example:

$primary: #007bff;

.button {
  background: $primary;
  &:hover {
    background: darken($primary, 10%);
  }
}

Ques: How does CSS impact SEO and performance?

Large or blocking CSS can slow down rendering → lower Core Web Vitals scores
Inline critical CSS → improves LCP (Largest Contentful Paint)
Minified & purged CSS → better page speed and SEO ranking

CSS Handbook

CSS Performance & Best Practices — Interview Q&A

CSS Performance & Best Practices — Interview Questions & Answers