HTML & CSS Interview Question #143

How can unused CSS be reduced in production?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Unused CSS can be reduced by splitting styles by page or feature, removing obsolete components, and using build tools that analyze which selectors are needed. Framework projects may also use content scanning or tree-shaking-like CSS processes.

Detailed Explanation

Unused CSS can be reduced by splitting styles by page or feature, removing obsolete components, and using build tools that analyze which selectors are needed. Framework projects may also use content scanning or tree-shaking-like CSS processes.

Automatic removal requires care because class names can be generated dynamically or referenced by templates that static analysis cannot see. Safelists or explicit configuration may be necessary to prevent valid styles from being removed.

Code Example

/* Instead of shipping every feature stylesheet
   to every page, load or bundle by actual need. */

@import url("base.css");
@import url("interview.css");

/* Build tooling can further remove verified
   unused selectors from production output. */