CSS Interview Cracking Guide

1. Junior Level Questions

Q1: How does CSS Specificity work? How is it calculated?

• Answer: Specificity determines which CSS rules are applied by the browser when multiple selectors target the same element. It is calculated using a 4-part weight value schema (inline, ID, class, element):

1. Inline Styles (e.g. style="color: red;") -> Weight: (1, 0, 0, 0)
2. IDs (e.g. #header) -> Weight: (0, 1, 0, 0)
3. Classes, attributes, and pseudo-classes (e.g. .card, [type="text"], :hover) -> Weight: (0, 0, 1, 0)
4. Elements and pseudo-elements (e.g. div, p, ::before) -> Weight: (0, 0, 0, 1)

• Note: Universal selector (*) and combinators (+, >, ~) have no specificity weight (0, 0, 0, 0).
• Important: If specificity values are equal, the rule declared last in the CSS file takes precedence. The !important rule overrides all other rules, but is not considered a part of specificity. Avoid using it in production as it makes code hard to maintain.

Q2: What are the different ways to center a element inside a parent container?

• Answer: There are three modern ways to center elements:

/* Method 1: Flexbox (Best for centering simple items inside containers) */
.parent-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Method 2: Grid (Simplest syntax) */
.parent-grid {
  display: grid;
  place-items: center;
}

/* Method 3: Absolute Positioning (Best when element needs to float over others) */
.parent-absolute {
  position: relative;
}
.child-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Mid Level Questions

Q3: What is the difference between a Pseudo-class and a Pseudo-element?

• Answer:
  • Pseudo-class (:): Used to style an element based on its state or position (e.g., :hover, :focus, :active, :first-child, :nth-child(2)). They target elements that already exist in the DOM.
  • Pseudo-element (::): Used to style a specific part of an element or inject content that does not exist in the DOM (e.g., ::before, ::after, ::first-letter, ::placeholder). They create a virtual "sub-element" inside the targeted tag.
  • Example:
    css

    /* Hover state pseudo-class */
    .link:hover { color: red; }
    
    /* Inject decoration before content pseudo-element */
    .link::before { content: "🔗 "; }
    

Q4: Compare Viewport Media Queries with Container Queries. When would you use each?

• Answer:
  • Media Queries (@media): Check the dimensions of the browser viewport. Use this for global page layouts (e.g., hiding sidebar navigation on mobile screens, setting page max-widths).
  • Container Queries (@container): Check the dimensions of the immediate parent wrapper. Use this for modular, reusable components (e.g. cards, headers) that need to change layout based on where they are placed in a dashboard, without depending on viewport widths.

3. Senior Level Questions

Q5: What is the difference between CSS custom properties (variables) and preprocessor variables (like Sass)?

• Answer:
  • Sass/SCSS Variables ($color: red): Evaluated at compile-time. They compile down to static CSS values. Once built, Sass variables do not exist in the DOM and cannot be modified dynamically.
  • CSS Custom Properties (--color: red): Evaluated at runtime in the browser. They inherit according to standard CSS cascading rules.
  • Senior Advantage: CSS Custom Properties can be modified dynamically via JavaScript (element.style.setProperty('--color', 'blue')) and media queries, making them ideal for run-time adjustments like real-time color customizers and user-selected dark modes.

Q6: How does the browser render CSS styles? What are Reflow and Repaint, and how do you optimize them?

• Answer:
  • Reflow (Layout): The browser calculates the geometry, size, and position of all elements on the page. Reflow is expensive because changing one element can cause layout shifts across the entire DOM tree.
  • Repaint: The browser paints pixels onto the screen (colors, backgrounds, shadows) without changing element shapes or positions. Repaint is faster than Reflow, but still uses CPU/GPU cycles.
• Triggers:
  • Reflow is triggered by changing layout properties like width, height, margin, padding, top, left, display, or reading DOM layout values like offsetWidth.
  • Repaint is triggered by changing styling properties like color, background-color, box-shadow, visibility.
• Optimizations:
  • Use CSS Transform animations (transform: translate(), scale()) and opacity instead of animating positions. These properties bypass the Layout and Paint stages, moving straight to the GPU Compositor phase for smooth 60fps animations.
  • Apply will-change to inform the browser to optimize for future animations (use sparingly).

Key Takeaways

• Specificity weights determine which rules take precedence in styling conflicts.
• Centering is achieved natively using CSS Flexbox or CSS Grid.
• Reflows and Repaints must be minimized in production animations by targeting properties handled directly by the GPU.
• CSS custom variables enable runtime layout updates, making Sass variables less critical in modern architectures.