So to give you an idea of what it is I am trying to do, OOCSS Framework uses a ton of classes, I'm about to package up a mobile site that is about ~2.5 megs and would like to remove all unused classes from the files. Sure, I could do it by hand but it would be much easier if something like this existed for the future.
There is a Firefox extension called Dust Me Selectors
It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored in your user preferences, so that as you continue to navigate around a site, selectors will be crossed off the list as they’re encountered.
You’ll end up with a profile of which selectors are not used anywhere on the site.
or give Unused Css a try
http://unused-css.com/
from Unused Css site:
Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.
Topstyle is a windows application including a bunch of tools to edit CSS. I haven't tested it much but it looks like it has the ability to removed unused CSS selectors. This software costs 80 USD.
Liquidcity CSS cleaner is a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.
Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.
Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.
UnusedCSS.com is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The #import statement is not supported. You can't configure and download the new clean CSS file.
CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.
Related
For an organization I work for, there is a common stylesheet that all web applications are supposed to use.
For example, they expect some elements to be in thead.table-sortable th.table-sortable-sorted-down a:after to add a sorting icon. Now, in an Angular application, I use a component library (primeng) that has a simple element that just has the class .pi-sort-up for the same thing.
How can I map / copy /use part of the organization css into my application's css, to just copy the interesting stuff without requiring the complicated nesting on component (which I have no real control on anyway)?
We could use css, sass, or even dynamically generate css rules in javascript. I'd prefer avoiding changing the DOM at runtime for all matching components, as it could be quite dynamic.
EDIT: A build-time solution (e.g. with sass) isn't the preferred way, but could be acceptable if nothing else.
If the company style sheet is readonly for you, there is not much you can do at all. You will have to load the whole document wherever you need some parts of it. A possible "workaround" to avoid that would be to write a backend program (in PHP or node.js) which opens the company style document and looks only for a specific CSS rule which it then copies and pastes to some other style document.
However, this approach would be very dynamic as well and you needed to execute the backend script with each request, for the original company style sheet could change always... If your company could agree, you should use a preprocessor like SASS or LESS and define a structure for the company style, dividing it into several documents that can be loaded on purpose.
We deployed a number of Hawtio plugins (as .war files) to our JBoss Fuse / Karaf server. We noticed that since we are repeating some class and id names for our HTML elements, the CSS behavior of say, plugin A affects the style of another plugin, plugin B, especially when we reference Bootstrap-specific names like col-lg-12 and so on. Furthermore, even if plugin A does not have a bootstrap.css file packaged within it, we are able to use bootstrap-like behavior which seems to be referenced from the bootstrap.css file of plugin B. We realize that ids and classes becomes global to the entire Hawtio environment (we don't know if it's just in CSS alone that this occurs). Any tips on how to remedy this?
Thanks.
At the moment that's really how things are, CSS selectors apply to all elements in the page regardless of how they get there.
A nice solution eventually for this problem will be web components, in a browser with proper support (Chrome and Opera at the moment) you get CSS isolation in a web component, where you can define CSS for elements in your web component and it doesn't leak out and affect other elements. And to style a web component that's in a page you have to use special selectors, so web components aren't affected by global CSS rules.
I have a DotNetNuke skin that has a single CSS file over 3,500 lines long. It contains styles for YUI, Telerik, Cluetip as well as the actual customisation of the site. The old developers just kept adding styles and never cleaned up the old unused ones.
I want to cleanup the file and get it to a more managable size. I first thought about scanning through the code base but this is 5,500 files with a mixture of CSS applied in the .aspx, .ascx and .cs files as well as jQuery aplying styles sometimes from generated code and sometimes from js files. Some styles are applied with class selectors and others with id selectors.
Is there a way I can easily check just which styles the website actually needs across all of its pages? Is there some crawler that could do this?
For firefox there is an add-in called dust-me-selectors. If you provide a sitemap, it will find all unused css styles.
If you run dust-me-selectors, remember to run it in every page of your website so you don't delete any styles that are actually used.
I just want to remove an unused CSS class in my product. It's not a HTML file. It has .jsp XML and .js files. There is a lot of unused classes in my product. Removing them manually is taking a long time. Dust-Me Selectors is a Firefox add-on tool. It's showing only the current page. It's suitable for only HTML files. Mine are all dynamic pages.
What is an efficient way to remove the unused CSS classes?
Dust-Me Selectors actually will work great for this purpose. It goes through all of the code for a page and outputs all of the code that is not being used. To automate this you need to have Java installed, then go to this page http://jclaim.sourceforge.net/running.htm and click to start the client.
Once you have this running go General > Handy Tools > Clean CSS
It outputs your fresh CSS code without all of the unused selectors. Just backup your old CSS file and replace it with the new stripped down one.
There is also the Stack Overflow post "How can I remove unused CSS classes from my website project?" which might help.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
A bunch of CSS files were pulled in and now I'm trying to clean things up a bit.
How can I efficiently identify unused CSS definitions in a whole project?
Chrome Developer Tools has an Audits tab which can show unused CSS selectors.
Run an audit, then, under Web Page Performance see Remove unused CSS rules
I have just found this site – http://unused-css.com/
Looks good but I would need to thoroughly check its outputted 'clean' css before uploading it to any of my sites.
Also as with all these tools I would need to check it didn't strip id's and classes with no style but are used as JavaScript selectors.
The below content is taken from http://unused-css.com/ so credit to them for recommending other solutions:
Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.
Topstyle is a windows application including a bunch of tools to edit CSS. I haven't tested it much but it looks like it has the ability to removed unused CSS selectors. This software costs 80 USD.
Liquidcity CSS cleaner is a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.
Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.
Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.
UnusedCSS.com is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The #import statement is not supported. You can't configure and download the new clean CSS file.
CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.
Google Chrome Developer Tools has (a currently experimental) feature called CSS Overview which will allow you to find unused CSS rules.
To enable it follow these steps:
Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
Head over to DevTool Settings (Function+F1 on Mac; F1 on Windows)
Click open the Experiments section
Enable the CSS Overview option