My project has collected CSS entropy (unused classes) during its course of development.
Now in order to keep the CSS file small, I want to remove all unused CSS references. But doing that manually involves searching for each class in the entire project. That takes time.
Do you know of any way/tool which I can adopt to find out which CSS classes are no longer used in my project, and remove it?
I am programming on ASP.NET. Visual Studio.
In the Chrome Browser, press F12, go to the Audit tab, choose the "Reload page and audit on Load" option, and refresh the page. Chrome will list all the unused CSS rules.
For an online solution, go to unused-css.com.
You might find this Firefox extension useful: http://www.sitepoint.com/dustmeselectors/
I wrote a tool which allows you to find all class and CssClass attributes in your aspx source code.
See my blog entry for info and download.
Related
i have made a webpage and now it is "feature-complete".
As a next step i want to put some style to it.
The project is based on the Play framework and i choose SCSS as my CSS alternative (with an SBT plugin to convert SCSS -> CSS).
Every time i change some CSS i have to reload the page in the browser, which takes a while, see if i like it and keep or revert. Then start over.
This workflow does not seem right to me. How do you style a webpage built with Play (specifically: i use Play templates, so i cannot just copy every piece of HTML into a CSS editor and style everything from there)?
The best way that i found is to change the CSS directly in Chrome, remember the changes and apply them to the source file later on.
Is there a more "automatic" way of doing things? Any nice editors or browser plugins that change the source file directly? What am i missing?
What are other people, using Play framework (or other templating systems) doing?
Thank you!
Maybe you can download an extension that automatically refresh's your page every ... seconds. On this way you only have to "Alt-tab" between your code and your page.
BTW: I couldn't comment this, I need 50 reputation. Otherwise I wouldn't have commented it because this isn't really an answer but this is just my advice.
I am building my own template in OpenCart by making a copy of the default one and then making my own.
When I edit the CSS in Chrome code inspector and copy it to my stylesheet. Is it "correct" (from a web standards/web developer view) to leave the old commented code in place or should it be completely removed.
I sometimes find that unticking features in code inspector and then copying over the block of code from the Chrome stylesheet is the quickest and easiest way of doing things.
Or maybe there are better "Live CSS" tools and extensions out there?
When you deploy for production you should remove comments, and also minify your CSS. You can add a minification tool to your build process which would remove the comments and whitespace for you.
The reason is that it makes a smaller file for the end user to download. Smaller file means less bandwidth use and a faster transfer. This is especially important for mobile device users.
It should ideally be removed (and then minified et cetera as mentioned by another answer). Best practice would be to use some version control software such as Git to keep track of what is removed and added and so forth.
This is a question about bug tracing. I have a WP site in which I am experiencing a plugin conflict. One of the plugins is applying "display;none" to some elements in a slider. What I am wondering is whether there is a good method for knowing what code is setting that css?
You can find it usually with firefox + firebug, firefox' own inspect element, chromes developer tools etc, when you inspect an element it tells you which .css file is being used.
Alternatively, if you turn off all your plugins and enable them one by one you can tell where the conflict is and check that plugins folder. If you have access to the plugins folder on your server you can see if there is a .css file in there - or open the main .php file as some plugin devs put their css straight into there.
But using a developer tool should give you an idea as to where the css is being generated. Even if it is dynamic, combining developer tools with simple plugin troubleshooting will narrow the information down enough to give you the jist of where it is.
My environment is Visual Studio 2010 with Resharper 6.0. I have a large website with many CSS files with many styles.
I would like to tidy these up as a lot of them are no longer used, I noticed that Resharper allows you to track usages but obviously this can miss out CSS class specifications in code-behind etc.
My only solution is to do a Find In Files in VS but obviously when you have a large amount of styles this proves too slow and cumbersome.
Has anyone had a similar predicament?
EDIT: It's worth mentioning that the site is a CMS comprising around 10,000 pages, so anything that requires browsing pages might also be a bit tricky.
There is a firefox extension called dust me selector that does this. You enable it and then navigate to each page. It keeps track of all used css. You spit out a new css file with all the tracked css styles.
The Web Essentials Visual Studio Extension has a BrowserLink feature which comes with a way to track unused css in your site while you browse around the site.
A way to do that is running your site in a headless browser like PhantomJS and inspecting the styles applied in order to remove the ones not being used.
Fortunately, there is a nice tool built on node called uncss doing exactly this:
https://github.com/giakki/uncss
I found it here:
http://addyosmani.com/blog/removing-unused-css/
About browsing all those pages, well, I dunno, if you can generate all the possible URL's then you can automate the process.
Give it a try and let me know if it helps.
This question already has answers here:
How to identify unused CSS definitions from multiple CSS files in a project
(3 answers)
Closed 1 year ago.
I'm doing some development for some pages on our internal network. I want to know if there's an open source tool or FF plugin which can identify unused css within a project.
I've looked at using this, but when I try to install the Add-on Installer says "Not compatible with Firefox 3.6"
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Please note, this is for an intranet - not a www visible website - so I can't use the online sites which offer such services.
Google Chrome (and therefore probably Safari as well) have the developer tools installed, which come with Audits. When you audit the page, the unused CSS rules is one thing it checks.
Here's what it looks like on this page.
I've been looking for a while, and the best thing I found was this:
http://unused-css.com/
They scan your site and email you the result css.
I am aware you are working on a localsite, however if you find no alternative, you can upload your site somewhere and use this
Alternatively
You could install a previous version of firefox that is compatible with dust-me selectors and run it along side your current installation of firefox.
I have CSS Usage installed in FF. But barely used it once. It searches for un-used CSS on the current page, not the whole project though.
dust-me-selectors Firefox addon is now compatible with Firefox 16...
Is it possible to combine all of your HTML pages together into one single page, for example using:
type *.htm > all-pages.htm
Then you could run Firefox/CSS Usage on this single, 'super' page?
There is a new program at sourceforge called CSS Scanner, it scans for used and unused css classes and stylesheets in html, aspx, php, javascript and jquery code.
It's .net code so you'll need Windows:
http://sourceforge.net/projects/cssscanner/
Chrome addon, which generate stylesheet of css rules effectively used in a page, can be tried for the quick results..here is the link
https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh
It also gives summary about the rules, which are not been used.
And this one involves grunt and related plugins to find unused code
http://addyosmani.com/blog/removing-unused-css/
If you are familiar with node js you can also use "find unused css": https://www.npmjs.com/package/find-unused-css