Remove unnecessary CSS

It is a good idea to eliminate unused CSS, as it can make your pages load more slowly.

When a page loads, the browser must construct the CSSOM before it can start rendering content. If there is unused CSS, the time it takes to load delays rendering.

To help find unused CSS, you can use the Coverage tab in Chrome developer tools. Or you can also use one of the many browser extensions or plugins available for finding unused CSS, and in some cases, removing it automatically.

Note: Be careful not to remove CSS that is loaded and used conditionally. Styles that are loaded as part of a lazy-loaded component may be reported as unused if the component is not present on the page, but they will be needed when the component actually loads.

You can also trim the size of the CSS by omitting values for properties whose defaults you want to accept. Consider the following example:

.ABC__XYZ form {
  display: flex;
  flex-direction: row; 
}

The default value of the flex-direction property is row, so you can omit it, and just specify the following instead:

.ABC__XYZ form {
  display: flex;
}