Cost: Expensive because the browser may need to recalculate layout for part or all of the page.
Repaint (Paint)
What it is: Filling pixels with colors, text, shadows, borders, or backgrounds.
Triggered by: Changes that don’t affect layout but change appearance, e.g., color, background-color, visibility.
Cost: Less expensive than reflow, but still requires updating pixels.
Composite
What it is: Combining painted layers into the final display.
Triggered by: CSS properties like transform, opacity, z-index, or position: fixed that create new layers.
Cost: Very cheap compared to reflow and repaint because the browser just combines layers without recalculating layout or painting pixels again.
2. Explain critical rendering path in browsers and how CSS affects it.
Critical Rendering Path (CRP):
The Critical Rendering Path is the sequence a browser follows to convert HTML, CSS, and JavaScript into pixels on the screen. It involves:
Parsing HTML → DOM
Parsing CSS → CSSOM
Constructing Render Tree (combines DOM + CSSOM)
Layout / Reflow (calculate element sizes & positions)
Paint / Repaint (draw pixels)
Composite (merge layers to display)
How CSS affects it:
CSS is render-blocking; the browser must load and parse CSS before rendering content.
Large or complex CSS slows CSSOM construction and delays rendering.
Optimizing critical CSS (inline above-the-fold styles) speeds up the first render and improves performance.
3. Difference between GPU-accelerated and CPU-bound animations.
GPU-accelerated animations use properties like transform and opacity that the GPU can handle efficiently, resulting in smooth animations.
CPU-bound animations (like top, left, width, height) require recalculation of layout and repaint, which can cause lag and jank.
Always prefer GPU-friendly properties for better performance on modern devices.
4. How does CSS affect page performance and loading speed?
CSS affects page performance by:
Blocking rendering until parsed (large CSS delays first render).
Triggering reflows/repaints when layout or appearance changes.
Increasing load time if files are large or contain unused styles.
5. Difference between inline styles, external CSS, and CSS-in-JS.
Feature
Inline Styles
External CSS
CSS-in-JS
Definition
Styles written directly on the HTML element using the style attribute.
Styles defined in a separate .css file and linked via <link> or @import.
Styles defined using JavaScript, often scoped to components (e.g., styled-components, Emotion, JSS).
Scope
Element-specific; overrides other CSS due to highest specificity.
Global by default; affects all elements matching selectors.
Scoped to component or element; avoids global namespace conflicts.
Dynamic Styling
Limited; can only set fixed values.
Static; requires class toggling via JS for dynamic behavior.
Fully dynamic; can compute styles at runtime using JS variables and props.
Performance
Fast for a few elements, but can bloat HTML and increase inline style parsing.
Efficient caching; separates concerns; CSSOM can be optimized.
Adds JS runtime overhead but enables optimized, conditional, and modular styling.
Maintainability
Poor; hard to scale for large projects.
High; reusable and maintainable across pages.
High; especially in component-driven architectures (React, Vue).
Use Cases
Quick prototyping, small tweaks.
Large-scale websites, global theming, reusable components.
Modern frontend frameworks, dynamic themes, component-based apps.
6. How does browser calculate CSS specificity when combining selectors?
Specificity determines which CSS rule applies when multiple rules target the same element.
Inline styles > ID selectors > Class/attribute/pseudo-class > Element/pseudo-element.
If specificity is equal, the last rule in the stylesheet applies.
Understanding specificity prevents unexpected overrides in large projects.
7. Explain the difference between Shadow DOM styles and global CSS.
Shadow DOM styles are encapsulated within a component, meaning they apply only to elements inside that component. Global CSS does not affect them, and they do not leak outside the component. This ensures style isolation and avoids conflicts.
Global CSS applies to all elements on the page unless scoped using techniques like CSS Modules or unique class naming. It can affect multiple components and elements, which may lead to unintended style overrides.
8. How do CSS preprocessors (SASS, LESS) improve maintainability?
Preprocessors allow variables, nesting, mixins, and functions, making CSS modular and reusable.
Reduce repetitive code and simplify large projects.
