I have used lots of code segments for some reasons, like templates, side-bars etc from lots of websites. So that, in my code, i have many not-used css properties. Is there any commands in dreamweaver or any other program to delete not-used css attributes easily?
I am asking this because it will take several hours just to delete them. Image how much it is:)
Thanks
Do you have the site online? If so you can try this site Removed unused CSS.
Also check out the following SO questions they mention the Dust-Me Selector indicated in the comments:
How can I find unused images and CSS styles in a website?
How to identify unused css definitions
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).
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.
Where multiple people can work on same css. is it possible to follow semantic name rules even in large websites.
If I would write all main css first time with semantic names . then what and how i should guideline/instruction to other developer to maintain css readability, validation . and to know quickly where other are adding their own css if required.
Right now every one just go to down and write required css classes ot IDs at bottom. and most of the time they don't write semantic names.
How to make good documentation/guide with text or with images for other developers on how to use css in whole site and how i wrote and what i used.
Update:
We use only one CSS file. I don't want to divide one css in multiple. Want to keep css managable even using one CSS file for whole site.
A similar question was asked a while ago: How to manage CSS Explosion there is a number of good answers there, and a number of great links (check out those provided by Paul D. Waite for example.)
Your main problem is going to be structuring the CSS file well. You will need clean rules for that: Keep everything grouped within the CSS file. Maybe using a CSS editor that can help you "navigate" through the style sheet is a good idea (similar to a programming IDE's "code explorer" feature). I don't know, however, if such a thing exists.
Other than that:
Using version control is a MUST. I personally am totally happy with centralized versioning using Subversion and TortoiseSVN; others believe in distributed version control like git or hg. For a team of designers, I think the centralized approach of Subversion is good, but that is a discussion in itself.
Maybe it's a good idea to split the style sheet into thematically relevant separate files to avoid chaos, and compile it using a tool like LESS or xCSS.
Define a clear, concise coding style. Use a CSS beautifier like Polystyle ($14 per license but money well spent) or Code Beautifier (based on CSS Tidy, haven't used it but looks interesting) and run it frequently on the file.
Have a number of links handy of pages that use the style sheet. Have people test those pages after they have made a change to the style sheet.
I would break down your css logically into groups and put each of these groups into its own css file. For example: header, footer, sidebar, content groups. Maybe some pages even deserve their own css file if big enough.
Similarly, give ids and classes on pages names that make sense. If it is a css rule for sub headings on a navigation bar, make sure it comes off as that in naming. Similarly to any other coding, don't use any magic numbers, etc. for naming.
See Modularizing web applications, includes specially 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.