When I have a bunch of files in the Design pane, how can I find out if the file is used in my project or not?
You know, once quite some time ago I had suggested something on the order of the ability to see if Classes and ID's were actually in use, but you've hit on the other part of this with supporting files being in use or not. I too would like to know if there's a way we can add something to tell these things, without having to rely on external 3rd party apps and sites to clean our CSS or without having to go through every single HTML page to check for a Class/ID.
Right now though Robert, there is no way to see this without checking your pages, and unfortunately for those of us that may have very large numbers of HTML pages, this can be quite a daunting task indeed.
Would love it if mousing over an image (and later a CSS and JS file if the ability to set them for specific pages happens) and see a list of the pages that they are used in, or better yet an Information choice on the right click menu that would show us those things.
Robert, feel free to post a suggestion and use my suggestions here and/or reference this post. :)
File > Check for Issues.
Will list unused images and css
In the Design panel…
Right click Styles > cleanup to search for any unused CSS.
Right click Images > cleanup to search for any unused images.
1 Like
Well, RTFM 
If all CSS gets removed from a file, and the file is empty, it is still kept? IMO the file should be deleted too.
Not necessarily. Sometimes you may want to cleanup all the unused classes in order to make new ones. If you don’t want the blank CSS file, it’s a simple enough matter to just delete it.
It would be an interesting feature to clean the css file on export. So I can work with the full file but ok export it deletes everything unnecessary. It would benefit the page speed
If you really want to strip everything back to the essentials you can use purgecss.
You can find more about it here:
Interesting service. 
But since BSS basically has this function in a different place it could be implemented on export/upload as well.
It will also strip out unused code on the boostrap main file too, so for example, if you don’t use modals, the modal css will be stripped out. Great for a simple site that is just using the bootstrap grid.
Personally I don’t bother, the savings are usually negligable, and you have to remember to run it each time you edit.
A couple of hundred kb savings in a CSS file is virtually imperceptible on modern broadband/4G connections, which are practically ubiquitous now.
Also keep in mind that when the app is looking for images and for the setting to not export unused images or the cleanup options, etc., it does not take into consideration any of them referenced in js files.
I’m not sure if the new find issues tool is the same way or not. Just letting you know that you may need to check the js file img and css references.
This is of course as of the previous version. I didn’t see anything on this in the update info for the current version so maybe @martin can chime in and let us know that status as well.
it does not take into consideration any of them referenced in js files. Just letting you know that you may need to check the js file img and css references.
Thanks, that’s a nice hidden feature with big surprise potential. At least literal reference should be detected, programmatically build ones are of course hard/impossible to find out.
As @jo-r said, the app doesn’t scan JS code to determine if it constructs HTML that happens to use certain CSS classes or not. This would be highly complex and will also have many edge cases that are impossible to detect. This is why we don’t attempt this and instead the cleanup tool presents everything that will be removed in a confirmation dialog. This dialog makes it unsuitable for inclusion in export.
The same applies to any automated cleanup tool, you need to be careful when using these.
1 Like