November 1, 2018

Huge Css Selector

A short piece CSS code shared by 81 selector!

I asked this question on Stackoverflow: https://stackoverflow.com/questions/53102972/is-there-a-webpack-plugin-for-detecting-huge-css-selector

We use scss and webpack, the css optimizor do the best it could, but I hope there is a tool warn me if a piece of css code with more than a threshold count selector, just like this example.

#product-detail-page .product-info .combination .combination-contents .combination-content-wrapper .combination-content
#product-detail-page .product-info .combination .combination-contents .combination-content-wrapper .open-coupon-content
 ...
 ...
 ...
#product-detail-page .product-info .promotion .promotion-contents .promotion-content-wrapper .open-coupon-content
#product-detail-page .product-info .promotion .promotion-contents .promotion-content-wrapper .promotion-content

The solution could be easy, I should move the css codes to the top container, e.g. the #product-detail-page, let the css be the directly child not its great great great great grandson.

Powered by Hugo & Kiss.