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.
Related
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.
I am going to design a site using asp.net, and after watching a tutorial to get a feel for what is will entail, it came to a point where the video just said "drop your css files into the project", so is there a common applications(s) for designing the actual css?
Adobe Photoshop or Microsoft Expression.
First, learn to use a css compiler, it makes life much easier and you can write css much more intuitively in my opinion
http://compass-style.org/
Second, write css (or SASS/LESS) by hand. Designers have come a long way since the early Dreamweaver days, but in my experience, you will spend just as much time, if not more, tracking down the autogenerated stuff that doesn't work, than if you just wrote it from scratch and test with Chrome (or your other favorite in-browser CSS debugger).
They could of been referring to a theme in asp.net. Creating a theme in the App_Themes folder. (ASP.Net folder when you go to the add new items)This allows you to make pathing allot simpler. You can then put your skins, images(in a image folder) along with all of your style sheets. You then can set all your pages to use that theme in a web.config file. If you use the root web.config file then it will do it for your whole site. You would link it in the <pages styleSheetTheme="MyTheme"> You also will not have to have a lot of links in your head tags because all stylesheets in the theme will be inherited.(This is the drag and drop, Drag the .css file and drop it in your theme then all pages using that theme inherit the css.) Later on you can even change your themes dynamically.
Hope this helps do what you what you where looking for if not good knowledge on how ASP.net sites work from what i have learned. I am just learning myself.
You don't need an application to write css for you. Just get yourself a book on css or read some online tutorials to get you started.
Then create one and code it yourself. That way you are in complete control of what is happening. It doesn't mean you won't spend some time tracking down strange behaviour but that is all part of the learning curve.
I've got a prospect whose site was just built, but the forms don't work. The forms seem to be using a DW Extension. We don't build in DW, so I'm not familiar with how it works. If a site is built in DW, is it limited to only DW-related fixes/solutions?
Dreamweaver is just a GUI for designing and developing HTML (etc;) pages, sites.
Many devs actually utilize nothing more than an enhanced Notepad application (like Notepad++). Personally I consider Dreamweaver a crutch for people that develop in it from day 1, you take it away and they don't know anything because they rely on the program. Which is fine for most work until they run into issue where they have to solve a problem themselves.
I don't hate dreamweaver, I just don't use it as my Notepad++ is sufficient for all my PHP, HTML, CSS, JSP, etc dev
Extension
You probably mean, a javascript library of some sort to validate the forms? If so you could gut those out (or keep them) and use jQuery, or anything you are comfy with.
Yes, absolutely. Once Dreamweaver generates the code anyone who is familiar with whatever language it is in can work on the file. Dreamweaver itself is not required for anything, but if you do use it you can take advantage of the wizards and what not.
But any text editor can edit pages generated by WP.
One note of caution: DW uses regular expressions to check its code and look for patterns that correspond to the various wizards. If you edit the code, it may break that check and the behavior will no longer appear in the appropriate panel. Everything will still work fine but you will no longer be able to edit via wizards.
I've recently begun working on a very large, high traffic website. We would very much like to reduce the size and number of our style sheets, minification is one route we will pursue but is anyone aware of any tools for checking ID and class use? Literally scanning the website to see what's active and what isn't?
Alternatively any software for redacting the css to reduce repition and size?
Thanks in advance
Literally scanning the website to see
what's active and what isn't?
Dust-Me Selectors is a Firefox plugin that you can use to show what css rules aren't being used.
http://www.sitepoint.com/dustmeselectors/
I can certainly recommend Page Speed (http://code.google.com/speed/page-speed/) by Google to check the performance (and possible improvements) of your webpages.
Page Speed also checks CSS and usage of classes on your webpages.
It is used in combination with Firebug.
Gzip compression in the webserver.
Expiry dates that lie far in the future to avoid redownloading the CSS files.
Alternatively any software for
redacting the css to reduce repition
and size?
Yet another level of indirection ... You (and your team) should write long CSS files with as many comments as needed and then write a tool that will publish merged files as needed (different templates need different files), stripped comments and minified as http://www.cleancss.com could do (CSSTidy). Readability comes first if you wan't to be able to modify a file in 1 month or keep track of modifications (or worse if sb else must do that!).
Other options are to reduce the number of templates used throughout the site. No need of two templates with 2px differences (grid layouts are a good way to stick to this) or inconsistent ways of displaying error messages. Define a common look and feel to your site and give instructions to webdesigners, if it isn't already done.
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.