Minifying css files thoughts

[Mick.]

Let me pick your brain, my site's performance is good but I think it could be better. I have 14 css files from custom files I made and others added by mods. My current index.css file 3 miles long so i've been thinking of minifying them. The issue here is, once minified, it's hard to read and find entries and you can only either, search or beautify the files, edit and then minify.

Would you minify your css files? 

[SychO]

not sure about other browsers but in chrome there's a button which transforms the file into readable form, so I can just edit it, re-minimize it, & then save.

[Mick.]

not sure about other browsers but in chrome there's a button which transforms the file into readable form, so I can just edit it, re-minimize it, & then save.

I use Chrome. That's my browser of choice. Where is this button?

[drewactual]

all mine is minified- and it DOES impact... hugely... especially with an http2 push set up.. I'm scoring between 98~100 on desktop/pagespeed and 96~98 mobile/pagespeed- I also combined and minified the js files... push them both right off the bat.

you'll get used to looking through the minified file- if i have and can, there is little doubt you can too!

[Mick.]

all mine is minified- and it DOES impact... hugely... especially with an http2 push set up.. I'm scoring between 98~100 on desktop/pagespeed and 96~98 mobile/pagespeed- I also combined and minified the js files... push them both right off the bat.

you'll get used to looking through the minified file- if i have and can, there is little doubt you can too!

Im thinking of doing my JS files as well. Its a matter of getting used to it, youre right there.

[Gwenwyfar]

You don't minify your source files. But yeah it can be a pain if you need to debug it. You could make something you can easily disable.

For css I don't bother, except maybe a minify that removes all comments. Then again when working outside smf I add most comments in sass so they won't even get to the end result file. Unless you're using spaces it doesn't make that much of a difference. Keeping it all in one file is going to matter more than the size each one has.

[Mick.]

Know of an online tool that checks unused entries in the css file? I have many entries that i'm not calling and ill be damned if I have to check one by one lol. I thought I saw a plugin for Firefox years ago but cant seem to locate it these days.

[Gwenwyfar]

There's one called dust me selectors that runs while you browse (you can also make it crawl the entire site). It works pretty well to spot all you're not using, but sadly it doesn't work in the newer versions of firefox anymore because of the whole addons stuff, so you'd need to install an older one to run it.

I've looked and did not find anything better than it, unless something new appeared in the last year or so, unfortunately. That also only checks selectors, I don't think anyone made something to check unused rules yet.

[Mick.]

There's one called dust me selectors that runs while you browse (you can also make it crawl the entire site). It works pretty well to spot all you're not using, but sadly it doesn't work in the newer versions of firefox anymore because of the whole addons stuff, so you'd need to install an older one to run it.

I've looked and did not find anything better than it, unless something new appeared in the last year or so, unfortunately.

Thank you. Yup, I remember seeing one about 8yrs ago. Nothing these days. I may have to see what developer tools has

[SychO]

Know of an online tool that checks unused entries in the css file?

Whenever I have doubts about certain classes being unused, I use git grep to look for a them in files other than the css file itself, very useful

the button I meant is in the picture attached.

[Gwenwyfar]

Thank you. Yup, I remember seeing one about 8yrs ago. Nothing these days. I may have to see what developer tools has

I faintly recall chrome having something like that at some point, but I couldn't find it, or maybe they changed it, I dunno. And I was even ready to use chrome for a while to use it! Boo

Know of an online tool that checks unused entries in the css file?

Whenever I have doubts about certain classes being unused, I use git grep to look for a them in files other than the css file itself, very useful

the button I meant is in the picture attached.

I have my text editor search files in the entire folder for that, but sometimes the classes are split inside php and such, it's hard to find those.

[SychO]

I have my text editor search files in the entire folder for that, but sometimes the classes are split inside php and such, it's hard to find those.

yea there are times when it's not really helpful, but for the most times it helps a lot.

[Gwenwyfar]

I have my text editor search files in the entire folder for that, but sometimes the classes are split inside php and such, it's hard to find those.

yea there are times when it's not really helpful, but for the most times it helps a lot.

Yep

[Mick.]

Where is Git Grep? Some text editor?

[SychO]

Git is a version control system, git grep is just one of its commands

[Mick.]

Git is a version control system, git grep is just one of its commands

Right on. Thank you. Im checking this out now.

[live627]

Not only have I minified all my CSS files for damn near a decade, I combine them, too. My script is nestled within ob_sessrewrite(). It grabs all CSS links via a regex and sends them to a library (the same one used in SMF 2.1).

Example from the admin page: https://mods.live627.com/Themes/flagrantly_20g/css/minified:index-mergedate-dreamportal-admin-1549517729.css

The numbers are the timestamp, so I can edit the files and get the changes immediately without messing with the browser cache.