Are there any utilities that will crawl a site and determine which css rules are in use and which are not? We have a large site and a huge CSS file (--don't blame me I just got here). And, I think much of it is not being used however I'm afraid to strip stuff out just in case.
The file is confusing and difficult to manage and I think if we can trim it down by getting rid of the unused rules we will have a good starting point to go through and try to make it better.
Try the Dust-Me Selectors Firefox extension by SitePoint. It finds CSS selectors whose rules are never applied to your pages so you can remove them from your stylesheets.
https://addons.mozilla.org/en-US/firefox/addon/10704/?src=collection&collection_id=23d14a2d-b396-c08f-e9ba-b4d34691d5a9
It's an addon in Firebug.
I had the same problem a while ago (5k lines in a CSS) and found this Firefox Plugin which worked very well for me.
The Google Page Speed plugin for Firefox's Firebug addon is also a great tool that will highlight the unused CSS selectors as well as inform you which ones are poor performers.
As always though, you need to be aware that the CSS selector may not be used on "this" page but may very likely be used on another page so be careful when pruning them to ensure they are truly unnecessary.
You can use a service like Unused-CSS
This web app explores the pages of your site and builds clean CSS files
Related
I have a massive CSS file that is applied to several pages. I'm hoping to break it down to a common CSS file and several page-level CSS files, since it is becoming difficult to work with. Unfortunately, it's not easy to tell what exactly is common. I was hoping there was a way to quickly see what lines/selectors were being used on a given page. Does anyone know of a tool that can do this? I don't want to use developer tools and go through the DOM elements one by one. I'd like to look at the CSS file and see unused selectors grayed out or something. Thanks!
You can use, at least in Chrome, the Audits tab in the developer tools. Once you run it, it says you which styles aren't used in the current page.
Testing it on this site:
And for Firefox there an add-on called CSS Usage – might be worth a look too.
How can I identify css classes or ids that are referenced in code but missing in the css file? Is there any feature in firebug that i can use?
Thanks.
Firebug does not do this, nor any tool I can think of, because it is not a common or high-payback task.
However, it is a common task to find unused CSS rules, so that they can be trimmed. You can get a performance gain by trimming common CSS files. But removing ID's and classes from HTML pages does not help as much, and is more likely to break something (see below).
A good/common Firefox add-on for finding unused CSS rules, is Dust-Me Selectors. If you really want a tool to find ID's and classes that don't have CSS rules, you could probably take that add-on's source code as a good starting point for making your own Firefox extension.
Removing ID's and classes, just because they don't have a CSS rule is not a good idea and could break things.
ID's and classes can be in a page for a variety of reasons, not just as convenient handles for CSS.
Here are some reasons why an ID or class might be in a page:
To identify content to javascript, or mark targets for changing content. This is a must for all but the simplest dynamic pages.
Likewise, Id's and classes are used by plugins, extensions, spiders, RSS tools, etc.
As state or status indicators. EG: <p class="comment highest-rated">...
As easy substitutes for in-page anchors. These allow precisely-targeted hyperlinks without adding elements. Example link.
As part of good Semantic Markup, which is a best-practice that helps humans and our scripts understand, use, and maintain pages.
To help with targeting CSS.
Visual Studio, with the ReSharper plugin does this. It shows each missing class with a blue waved underline.
I am not sure which versions of what, but I use
Visual Studio 2013 Premium
ReSharper Version 8.2.3
Other versions might do as well.
You may find the question answered at this link useful, Javascript can be used to search for classes. Although, it may be useful to find the classes not used by CSS, beware of removing classes that may be necessary for other reasons (as others have pointed out).
What is the easiest way to do it?
I have difficulties to understand and not having now enough time to spend and study Greasemonkey properly, to just apply a PERMANENT css change to ANY website.
I thought that was more easy, to just add a CSS that would stay with the browser. But I do not find any easy/quick tool customization to just add a simple .css file to do my changes.
For example I would like to restyle Twitter, because I hate the new design, It is killing any kind of graphic personalization that I would like to have.
I need it simple, because I want to let people with not high tech knowledge, to be able to get my personalization, implement it and do it as well.
I know that this could have a security issue, but all that I want to do it is add a piece of CSS, and not additional Javascript functionality.
EDIT: Possibly that could work in all the browsers, not only Chrome and Firefox (I know that might not exist, but I would like to have an alternative for people that use IE)
I am an expert web designer, but I am not a programmer. Outside Javascript I do not script anything else.
Install Stylish. Make custom CSS file. Winning.
You're looking for the Stylish extension.
You can add a user stylesheet in several major browsers that will override the site stylesheet. It will require a good working knowledge of CSS though and for firefox you have to create the file manually in your profile.
http://www.squarefree.com/userstyles/user-style-sheets.html
It's not really a coding question, but I don't know where to ask it elsewhere.
I'm looking for a tool to clean up unused css selectors.
I know this tool Dust-Me selectors, but I want it to clean it automaticly.
Can anyone help me with this?
Depending on the complexity of your site, I don't think it's a good idea to clean up CSS automatically. I've used those tools myself (DustMe-Selectors mostly) but as soon as it comes to dynamic pages (and sites), all of the tools lack the ability to really find out what is used and what not.
Consider a site using selectors like "item-selected", "item-soldout", "item-bargain", etc. If the site will apply selectors dynamically to e.g. items in a shop, tools may not find those selectors in your markup because they are not used at the moment but maybe used as soon as the shop-configuration changes.
So I'd suggest to go with one (or more) of the tools suggested here and carefully evaluate the suggestions for unused selectors, but rather not use something to clean my code automatically.
There's a windows based utility called CSS Cleaner available here. Obviously the issue is that it has to run through every pages in your project to determine which selectors aren't used. And it can't see into any CSS generated by your code.
Be careful with auto-clean up. If you are not 100% familiar with the site -- don't do it. There may be classes or IDs in your code that are there for JS and not CSS.
Having a problem at the moment that many of my pages load [using GooglePageSpeed] and seem to load a lot of unused CSS.
If I try and split the CSS - then I get the error that "too many CSS files". I am wondering whether there are any jquery plugins [or other] that are able to RENDER only the CSS for the page that is being loaded and ignore the rest ?
It's sort of like a dynamic CSS interchanger ? Would really help ....
Unless you are sending hundreds of kb of css then it shouldn't really matter.
A dynamic CSS changer would destroy the caching ability of the browser resulting in higher transfers.
I would suggest you to go for Dust-Me Selectors (addon of firefox) to check unused css and delete it for specific pages. Note this is not something allowing you to delete on-the-fly though.
There is a really handy plugin for Grunt called UnCSS. It will automatically remove unused CSS on the fly. Check out this link for more info:
Remove Unused CSS automatically
Seems to me, that it will be bad practice to optimize your css on the fly. Neither on server's side, nor on the client's because it will decrease performance of server/user's browser.
If CSS size is so important for you, it would be a better way to manually create some pre-optimized stylesheets for each global types of pages used in your web application and switch between them.
For this needs, there is one more useful addon for Firefox's Firebug, named CSS Coverage. It allows you to scan multiple pages of your site to see which CSS rules are actually used in your site per each page or per many.
Scaffold might help. It doesn't remove what you don't need, but it does compile it to one small file.
Removing unused CSS would need some JavaScript which would slow down more than the solution above.