еу

Now I understand what you require in the task. You want refactoring CSS file for maximal optimization.BEM methodology was created for this.

Example:

Your CSS

main #motto .category-review span{}

BEM:

.category__review span{}

main #motto .category-review span.icon-star-empty{}

.category__icon_star{}

#content header #company-title

.header__company-title{}

#content header #company-title h1 span.mb-dsp {}

.header__company-title_dsp{}

#content header .rating-stars span.icon-star-empty{}

.header__rating-star_empty{}

If use BEM methodology, we don't have nested classes.

The browser reads quickly (fast render). Performs less calculations.

The length of the css rules also changes.

Before:

#content header .rating-stars span.icon-star-empty (50 characters)

After:

#content header .header__rating-star_empty (26 characters)

There are 2 options for solving the problem:

1. optimize current CSS (reduce length nested classes and refactoring css rules)

Before:#content header #company-title h1 {    padding: 0;    color: #fff;    margin: 0.5em 0 0.5em 0;}#content header #company-title h1 span.mb-dsp {    font-weight: 400;    color: #cddceb;    display: inline;    font-size: 0.85em;    margin: 0.25em 0;}
After:#company-title h1 {    color: #fff;    margin: 0.5em 0 0.5em 0;}#company-title h1 span.mb-dsp {    font-weight: 400;    color: #cddceb;    font-size: 0.85em;    margin: 0.25em 0;}