Tool for checking unused CSS selectors? - javascript

I know there is an extension called Dust-Me Selectors for Firefox and also that it doesn't look at dynamic HTML generated by JavaScript.
I'm looking for tool(s) that can identify all unused selectors from a stylesheet, attached to several pages, with all the JavaScript running and checking selectors?
The only option I know right now for this is manually checking files and finding unused selectors :(
In IDE's - I believe NetBeans provides a warning message when writing Java code, if a library is not under use. Without an IDE (NetBeans, Eclipse, Dreamweaver, etc) plugin to search for the selectors what are my options?
Also, is there a tool to check for unused selectors in the same file. I mean if all the JS, HTML and CSS code is in the same file.

I think that http://unused-css.com will do exactly what you want.
https://github.com/geuis/helium-css can help
as well as: http://razorfast.com/2010/11/21/announcing-cssess-the-bookmarklet-that-finds-unused-css-selectors/

Related

Using Aptana Studio for Extendscript

I've been using Sublime Text for creating the Javascript flavor of Extendscript scripts for our company. However, I've been curious about Aptana Studio and whether or not it might be a better choice to move to it. Already, however, I can see two big issues:
Handling Extendscript-specific code
Content assist using a DOM.
In the regular versions of Eclipse, if I wanted to use a specific piece of code from a library and get content assistance with it, I'd just add its .jar file to my build path and I was done. However, Javascript doesn't seem to use libraries, per se, so how would I get it to know the various methods and properties of a TextField object when I use the ol' Ctrl/Cmd+Space after typing in a reference to one, followed by a dot?
And at the beginning of my scripts, I have to use preprocessor directives, such as:
#target indesign;
#targetengine session;
so that the script knows what program I am using, if I want to #include other files, etc. These commands are, of course, specific to Extendscript, so when Aptana sees them, it breaks the Javascript syntax highlighting for the rest of the document. Is there any way to set Aptana to, perhaps, ignore preprocessor directives? Or add their syntax into its rules checking for syntax highlighting?
Also consider the ExtendScript Toolkit, if you haven't tried it yet. While it's not as powerful an editor, it does know about some of the DOM functions, and it has convenient built-in debugging tools for working with CC applications.

Refactoring large/old CSS files

I'm currently working on a 100,000 page website, the current design has been in place for over 5 years and successive updates have resulted in four 12,000+ line CSS files.
Obviously the CSS has become unwieldy, many of the styles are duplicated and it's nearly impossible to know how many of the styles are actually being used.
We can minify, but this isn't really tackling the problem, just delaying the inevitable re-work.
So three questions are there any tools out there for...
de-duplicating large CSS files?
scanning the site and logging CSS class and ID use?
could such scanning be achieved with a script of some kind, Greasemonkey maybe?
http://unused-css.com/ Does some of what you ask, and they have this to say:-
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.
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.
If you are using Visual Studio, this extension helps to auto-merge css classes.

Break up JavaScript file into more manageable, or using different IDE

I use Dreamweaver for development, mostly PHP, html, css, javascript. Is there anyway to break up JavaScript files? or maybe a better IDE that makes it easier to work with? It just becomes quickly difficult to read and find what I'm looking for.
Thank you!
Intellij and/or Webstorm by Jetbrains has the best JS tools I have found. It has very good (as good as it gets, for JS) intellisense (autocomplete for variables and methods) as well as refactoring for variables and methods. You can cmd+click into method definitions from anywhere, as well. Unfortunately you need to pay for them, but if you are using Dreamweaver you had to pay for that. If you are only doing html/css/javascript Webstorm is the way to go.
Yes, you should break up your javascript files into relevant parts just like you break up your php files into relevant parts. The one key factor here is they should be combined and minified before being served up to the browser so the user does not have to make several network calls to your server for each .js file.
Check out Google Minify for an easy solution to that issue.
Take a look at the JQuery source to see how they divvy up their files. Now look at their combined framework, and of course their minified framework. What is actually served up to the user looks nothing like the source.
Uh, Dreamweaver?
Definitely use a different IDE. Aptana won the poll here :)

How can I add autocomplete in notepad++ for javascript in an .html file?

Notepad++ does auto-complete for html and also for JavaScript. but the auto-completion depends on file extension.html file supports completion for html only. Is there a way to enable auto-completion for javascript in the script tag of an html file? I mean, other than copying the auto-completion keyword list from "javascript.xml" to "html.xml" files...
You would either need to
write your own lexer plugin (may possibly have an issue of conflicting with the internal HTML lexer), or
modify the source and compile your own notepad++/Scilexer.dll
Both are not quick undertakings.
I was faced with the same dilemma. For me, The most simple way to get the functionality you desire was to switch to an editor that already does this by default called Brackets. It is specifically designed for web development and is completely free and lightweight.
Another way to do is to create 2 files and code
JavaScript in the second one (but never save it)
HTML in the first one (and copy/paste your Javascript between <script> </script> balises)
Best way to work (for security) is to use 2 separated files : your JavaScript could be protected when the user try show source-code in his browser.
by the way, Notepad++ is a very fast and smart editor, you could just add complements to it like JSLint, emmet, nppFTP, indent by fold... and change it theme by a dark one (Obsidian) : it would be enough for small projects coding. ;)

Javascript/Markup in Assembly

I'm trying to somehow render out javascript for a particular user control rather than just having a script include for the javascript file.
The reason why I don't want a simple script include is because I need to append unique ClientID's to the dom elements at runtime.
I could hardcode the javascript in a function and just append the ClientIDs. However, this will look messy and I'm not liking the idea of hardcoding javascript code in a class- it would be a nightmare to maintain.
What are some strategies that I can use to keep javascript/markup separate from the compiled code? I want to somehow have the javascript source included in the assembly as well so that as a user control, it would not require manual script includes and have no other dependencies for it to work.
I used this code from Rick Strahl's blog. Works awesome with jQuery and those types of libraries. http://www.west-wind.com/WebLog/posts/252178.aspx
HTH,
ck
PS If you're using a Web Application Project you can use javascript files as embedded resources.

Categories