CSS Interview Questions — Part 2
Top 15 CSS Interview Questions (16-30)
Q16: :nth-child vs :nth-of-type?
| Selector | Counts | Example |
|---|---|---|
:nth-child(2) | All children, selects 2nd | 2nd child regardless of type |
:nth-of-type(2) | Only same-type elements | 2nd <p> among siblings |
Key difference: p:nth-child(2) selects an element that is BOTH a <p> AND the 2nd child. If the 2nd child is a <div>, nothing is selected.
Q17: CSS Preprocessors (Sass/Less) — Pros and Cons?
| Pros | Cons |
|---|---|
| Variables (now native in CSS) | Build step required |
| Nesting (now native in CSS) | Can produce bloated output |
| Mixins and functions | Debugging maps to compiled CSS, not source |
| Loops and conditionals | Team needs to learn preprocessor syntax |
2025 verdict: With native CSS nesting and variables, Sass is less essential. Use it for mixins and loops; otherwise native CSS suffices.
Q18: What is FOUC and how to prevent it?
FOUC (Flash of Unstyled Content) happens when HTML renders before CSS is loaded.
Prevention:
- Place
<link rel="stylesheet">in<head>(not body) - Inline critical CSS
- Use
font-display: swap(prevents FOIT — Flash of Invisible Text) - Use
<link rel="preload">for important stylesheets
Q19: Give a use case for ::after
Answer: External link indicator:
a[href^="http"]::after {
content: " ↗";
font-size: 0.8em;
}Other uses: Required field asterisks, decorative elements, clearfix (legacy), counters.
Q20: How to optimize 5000+ lines of CSS?
- Run PurgeCSS to remove unused rules (often removes 80%+)
- Audit with Chrome DevTools Coverage tab
- Split into critical (above-fold) and non-critical CSS
- Migrate to utility-first (Tailwind) or CSS Modules for dead code elimination
- Replace @import with bundler-combined files
- Remove !important declarations and fix specificity issues
Q21: opacity: 0 vs rgba(0,0,0,0)?
| Property | Affects | Creates Stacking Context? | Clickable? |
|---|---|---|---|
opacity: 0 | Entire element + children | ✅ Yes | ✅ Yes |
background: rgba(0,0,0,0) | Only background color | ❌ No | ✅ Yes |
Q22: What is "Tree Shaking" for CSS?
Answer: Removing unused CSS rules from the bundle. Tools: PurgeCSS, Tailwind's JIT mode, UnCSS. Works by scanning HTML/JS for used class names and removing everything else.
Q23: Container Queries vs Media Queries?
| Feature | Media Query | Container Query |
|---|---|---|
| Responds to | Viewport size | Parent container size |
| Good for | Page-level layout | Component-level adaptation |
| Reusable components | ❌ Breaks in different contexts | ✅ Works everywhere |
Q24: How is CSS accessible to screen readers?
display: noneandvisibility: hiddenhide from screen readersopacity: 0andclip-pathdo NOT hide from screen readers- Use
.sr-onlyclass for visually hidden but accessible text - Ensure sufficient color contrast (4.5:1 for AA)
- Never rely on color alone to convey information
Q25: What is calc()? Can you mix units?
Answer: Yes! calc(100% - 2rem) works perfectly. The browser resolves each unit at render time. You can mix px, rem, %, vw, etc.
Q26: Explain min(), max(), and clamp()
min(a, b): Returns the smaller value → responsive maximummax(a, b): Returns the larger value → responsive minimumclamp(min, preferred, max): Preferred value, clamped between min and max
Q27: What is BEM?
Answer: Block Element Modifier — a CSS naming convention. Block = component (.card), Element = part of block (.card__title with double underscore), Modifier = variation (.card--featured with double dash).
Q28: How do you animate efficiently?
Answer: Only animate transform and opacity — they run on the GPU compositor thread without triggering layout or paint. Everything else (width, height, margin, top) triggers expensive reflows.
Q29: What is object-fit: cover?
Answer: It makes an image fill its container while maintaining aspect ratio, cropping excess. Like background-size: cover but for <img> elements. Pair with object-position to control the crop focal point.
Q30: Explain Logical Properties
Answer: Logical properties replace physical directions (left/right/top/bottom) with flow-relative ones (inline-start/inline-end/block-start/block-end). This makes CSS work correctly in both LTR and RTL layouts without changes.
margin-inline-start: 1rem; /* left in LTR, right in RTL */
padding-block-end: 2rem; /* bottom in horizontal, right in vertical */