How can you know what css code used on the page?

Is converted into a page. Her huge css code, 20,000 lines (concatenating and minimized). A large part of the page is not needed. Heard there are services that analyze the css is loaded and after the analysis derive simplified css code that is actually used on this page, removing all the excess that is not used.

Tell me, please, is it true there are such things and how to find them. Maybe you know what they are called, the reference ponakidayut.

Thank you for your attention.
June 3rd 19 at 19:35
7 answers
June 3rd 19 at 19:37
Solution
This tool really helped. That's just my js and had to do some juggling. And so, if js not change state, then you can safely use. - omer_Cummings93 commented on June 3rd 19 at 19:40
June 3rd 19 at 19:39
There are, but none of them can not give a guarantee but the right work, it may be Css selectors which are used after some exposure through js.
So most likely the answer is no.
Even JS is optional.
For example, until the page fell out errors, any tool that analyses a website outside will think that the class alert-danger not used. - omer_Cummings93 commented on June 3rd 19 at 19:42
Thank you for reminding me about js. But somehow I just replaced the classes script. Type: desktop, tablet, portrait, extralarge, etc. It is not clear why people do not use banal media queries. It would be necessary to discuss this topic))

I was thinking, maybe I just have all these classes to transfer to the unit where they usually change the script? Type:

Surely, such extensions first look for a match on class and vybiraut in the end, the selectors, in which the names of classes are used. They are not somehow cleverly choose the selectors, for example:
then the program will not pick up the rules for the selector, because it is written
.desktop:not(.tablet) {}
and the block has classes and desktop, and tablet.
Probably will pick up all the same?
- chelsea13 commented on June 3rd 19 at 19:45
It is therefore necessary to use a build system and clean up the CSS at this stage - omer_Cummings93 commented on June 3rd 19 at 19:48
how the build system will remove the extra css? at any stage... - Julia_Tremblay33 commented on June 3rd 19 at 19:51
what do you mean "what side"? - antonia_Wintheiser80 commented on June 3rd 19 at 19:54
how it was meant - Julia_Tremblay33 commented on June 3rd 19 at 19:57
such that during Assembly webpack runs throughout the code, including JS - antonia_Wintheiser80 commented on June 3rd 19 at 20:00
Yes , is, and will not delete anything )) at least a million lines of unnecessary css in there to write. - Julia_Tremblay33 commented on June 3rd 19 at 20:03
The link did not help in any way. - antonia_Wintheiser80 commented on June 3rd 19 at 20:06
June 3rd 19 at 19:41
You are in Google) in the news recommended.
staaaa?)) proof will be?) - omer_Cummings93 commented on June 3rd 19 at 19:44
damn, I Google news recommend just something about death, robbery and Putin. - chelsea13 commented on June 3rd 19 at 19:47
Haha, also got here. Still, because the Toaster.

You are on the news click here he offers. And it is still possible in the options to specify that a subject or resource is not interested. - omer_Cummings93 commented on June 3rd 19 at 19:50
, https://ibb.co/cOjcWy - Julia_Tremblay33 commented on June 3rd 19 at 19:53
your question remains forever zapechatlena on thousands of indexing servers) - antonia_Wintheiser80 commented on June 3rd 19 at 19:56
thanks , will save on memory)) - Julia_Tremblay33 commented on June 3rd 19 at 19:59
June 3rd 19 at 19:43
Services are not needed. Use appropriate collectors
https://github.com/webpack-contrib/purifycss-webpack (the source is js, you can specify in the rest of this trick have not tried)
https://github.com/FullHuman/purgecss-webpack-plugin
https://github.com/vseventer/uncss-webpack-plugin
I'm happy to use a collector, but I have skopipastit a widget that will disable the vendor. And it's too complicated to implement from scratch - not enough time. Nothing criminal here, as it may seem. Just in the event that you used to create this widget over, the developers are not going to support it further, just remove the probably and data in the widget will cease to act. And I just have wildly sugardaddy, though the screenshot below we have on the website was left with a good memory of this widget. I've decided to do without a screenshot and try to move the layout to the project. And their widget was on angulare assembled. So many "moments" shit. - omer_Cummings93 commented on June 3rd 19 at 19:46
June 3rd 19 at 19:45
Can use the debugger tools in Chrome?
https://medium.com/devschacht/using-the-chrome-dev...
good tool, but according to the article, is only useful in dimension. It just shows a red unused code, and green is used. Had very long handles to pick out pieces of code. - omer_Cummings93 commented on June 3rd 19 at 19:48
June 3rd 19 at 19:47
PurgeCSS
June 3rd 19 at 19:49
"20,000 lines of," I'm sorry, but this is where close to some kind of Bootstrap. This is what did they do on this volume only CSS?

Another point, if we are talking about the widget, it may, without js not to work, so it might be really easy picture?

While writing, I thought, maybe there really Bootstrap, Bulma, or even something like 10 lines of your code?
There is likely to bundle - omer_Cummings93 commented on June 3rd 19 at 19:52
I understand that source is not. And what is written on Angular already said that it's going to some webpack with a high probability.

But this does not mean that the root of the document there don't put some kind of CSS framework. - chelsea13 commented on June 3rd 19 at 19:55
The framework is used, it is not exactly bootstrap. Just widgets and there are many styles going on all widgets in a single file base.css - omer_Cummings93 commented on June 3rd 19 at 19:58

Find more questions by tags CSS