Re: [css-d] Tool to tell me where a rule is used
On 9 Jul 2010, at 14:18, Rob Emenecker wrote: There is no tool that checks CSS against a site looking for orphaned rules in the CSS. At least none that I know of. If the site is not complex, and you have the means for visualizing it offline -- either locally or on a testing server -- I usually just make a visible modification using a BORDER or BACKGROUND-COLOR that is immediately discernable from the site design. Yes, that is what I do if I have reason to think that a rule is not applied somewhere when it should be, usually because of specificity problems. But it seems impractical to do this on a whole site with a main stylesheet that has more than a thousand lines to it. I'll look into the extensions mentionned by David Laakso and Dejan Kozina and report back. Thanks all. Ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
I tried the three add-ons, Dust-Me Selectors, CSS Usage and Firefinder for Firebug (most likely a bit rapidly) and all three seem to get me at least some of the information I need. I only have 10 pages done at this time and it was already a bit fastidious going to all of them one by one to activate the add-ons. However, Dust-Me Selectors is certainly the most mature of the three and lets you spider the site with a sitemap and also save the data. CSS Usage remembers what was seen previously when going from one page to another until you clear the data. It seems to ignore some pseudo-classes: they are marked unseen but I'm sure they are used. FireFinder does one page at a time, but the point of this add-on is different. In my short test I found two selectors that were not used, although I had gone through the stylesheets by hand not long before. I don't even know how they got there... Probably they got left in place after I changed the html of the page. It goes to show that such tools are useful (unless you feel unused selectors do no harm, which could be a valid point). So I think I'll keep them all and see how it goes as I do more pages. Since there is a plan to have a xml sitemap when going live, I should be able to use that for the final check. If anyone finds anything else, please share. Thanks, Ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
So, are you wanting a tool that will look through the CSS and report which of the classes or ids do, or don't, show up in the HTML? I don't have a suggestion, I'm just trying to understand the goal. Russ - Original Message - From: Ellen Herzfeld s...@xlii.org To: css-d@lists.css-discuss.org Sent: Thursday, July 08, 2010 10:49 AM Subject: [css-d] Tool to tell me where a rule is used Hello, I am doing a make over of a large site. There is a lot of tweaking. I use firebug and the webkit dev tools (and even the IE dev tools sometimes) but I'm looking for something different. When I go over my stylesheets to clean them up and organize them in a way that's comprehensible to me at least, I sometimes wonder why I have this rule. I use some classes and ids for the selectors when I can't figure out how to do otherwise, but I mostly try to avoid having them all over the place. When the stylesheet starts getting a bit long I find that the reason for a rule isn't always totally obvious and it sometimes takes me a while to remember or figure out where it is used. I also want to avoid putting comments everywhere. I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. Does this make sense? Does such a tool exist? Ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
On Friday, July 09, 2010 2:20:21 am r...@catjuggling.com wrote: So, are you wanting a tool that will look through the CSS and report which of the classes or ids do, or don't, show up in the HTML? No. She's trying to find a tool that will look through the CSS and report which *rules* show up in the HTML. She has specifically stated many times that she isn't using classes or id's much in her code, which leaves descendant selectors and the like. For example: ul p span or ul li:nth-of-type(7). Are those selectors used? They have no classes or id's to search on, which makes them very hard to find using traditional find tools. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
For example: ul p span or ul li:nth-of-type(7). Are those selectors used? They have no classes or id's to search on, which makes them very hard to find using traditional find tools. There is no tool that checks CSS against a site looking for orphaned rules in the CSS. At least none that I know of. If the site is not complex, and you have the means for visualizing it offline -- either locally or on a testing server -- I usually just make a visible modification using a BORDER or BACKGROUND-COLOR that is immediately discernable from the site design. Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Tool to tell me where a rule is used
Hello, I am doing a make over of a large site. There is a lot of tweaking. I use firebug and the webkit dev tools (and even the IE dev tools sometimes) but I'm looking for something different. When I go over my stylesheets to clean them up and organize them in a way that's comprehensible to me at least, I sometimes wonder why I have this rule. I use some classes and ids for the selectors when I can't figure out how to do otherwise, but I mostly try to avoid having them all over the place. When the stylesheet starts getting a bit long I find that the reason for a rule isn't always totally obvious and it sometimes takes me a while to remember or figure out where it is used. I also want to avoid putting comments everywhere. I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. Does this make sense? Does such a tool exist? Ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
On Thu, 8 Jul 2010, Ellen Herzfeld wrote: Hello, I am doing a make over of a large site. There is a lot of tweaking. I use firebug and the webkit dev tools (and even the IE dev tools sometimes) but I'm looking for something different. When I go over my stylesheets to clean them up and organize them in a way that's comprehensible to me at least, I sometimes wonder why I have this rule. I use some classes and ids for the selectors when I can't figure out how to do otherwise, but I mostly try to avoid having them all over the place. When the stylesheet starts getting a bit long I find that the reason for a rule isn't always totally obvious and it sometimes takes me a while to remember or figure out where it is used. I also want to avoid putting comments everywhere. I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. Does this make sense? Does such a tool exist? There's a standard tool on *nix systems called grep. For example, searching for the class 'nav', this will print the line numbers as well as lines containinf it: grep -n 'class=.*nav.*' file.html I believe it can be installed on Windows systems. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
The only way I can think of is to to do a search for class name or ID name. Notepad is pretty good doing this. Try Edit, Find. Then you can use Find Next to go to the next occurence. For ID you will have only one item on the page so that is not the problem. hth --- On Thu, 8/7/10, Ellen Herzfeld s...@xlii.org wrote: Hello, I am doing a make over of a large site. There is a lot of tweaking. I use firebug and the webkit dev tools (and even the IE dev tools sometimes) but I'm looking for something different. When I go over my stylesheets to clean them up and organize them in a way that's comprehensible to me at least, I sometimes wonder why I have this rule. I use some classes and ids for the selectors when I can't figure out how to do otherwise, but I mostly try to avoid having them all over the place. When the stylesheet starts getting a bit long I find that the reason for a rule isn't always totally obvious and it sometimes takes me a while to remember or figure out where it is used. I also want to avoid putting comments everywhere. I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
Ellen Herzfeld wrote: I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. Does this make sense? Does such a tool exist? Ellen Perseverance and a clock without hands work well... :-) In the meantime, this finds unused CSS selectors: https://addons.mozilla.org/en-US/firefox/addon/5392/ Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
On 8 Jul 2010, at 19:04, David Laakso wrote: Perseverance and a clock without hands work well... :-) In the meantime, this finds unused CSS selectors: https://addons.mozilla.org/en-US/firefox/addon/5392/ Best, ~d Thanks for the tip. I'll try it out and will report back. Strange that this doesn't seem to be something that was seen as a need a long time ago. To tell the truth, I didn't formulate the need to myself till recently. But then it may be that when using lots of ids and classes everywhere, as I did previously, it's much easier to see and find things. This time around, I'm trying, for a number of reasons, to limit classes and ids to a bare minimum. Ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
On 8 Jul 2010, at 19:01, Chris F.A. Johnson wrote: There's a standard tool on *nix systems called grep. For example, searching for the class 'nav', this will print the line numbers as well as lines containinf it: grep -n 'class=.*nav.*' file.html I believe it can be installed on Windows systems. I'm acquainted with regular expressions and have a number of editors on my Mac that I could use. The problem, which I apparently didn't make clear in my initial post, is that I use very few ids and classes. So I don't think grep will be much help when I'm using mostly descendant selectors. Ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
Nearly there! I believe this Firebug extension might be what you're looking for: http://robertnyman.com/firefinder/ Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted. And there's another one that does more or less what Dust-me does: https://addons.mozilla.org/en-US/firefox/addon/10704 djn David Laakso wrote: Ellen Herzfeld wrote: I would like a tool that takes a rule and goes through my pages and gives me a report on where the rule is actually really used. So if it isn't used anywhere anymore (most likely because I changed something somewhere) I will be able to remove it safely. Does this make sense? Does such a tool exist? Ellen Perseverance and a clock without hands work well... :-) In the meantime, this finds unused CSS selectors: https://addons.mozilla.org/en-US/firefox/addon/5392/ Best, ~d -- - Dejan Kozina Web design studio Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 skype: dejankozina http://www.kozina.com/ - e-mail: de...@kozina.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
On 8 Jul 2010, at 19:00, Jay Tanna wrote: The only way I can think of is to to do a search for class name or ID name. Notepad is pretty good doing this. Try Edit, Find. Then you can use Find Next to go to the next occurence. For ID you will have only one item on the page so that is not the problem. hth As I said in my post, though obviously not clearly, I use very few classes and ids. I'm on a Mac and have powerful text editors that can search through many files quickly, even using regular expressions. But with mostly descendant selectors, I think it would be mostly useless. Ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tool to tell me where a rule is used
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Ellen Herzfeld Sent: Thursday, July 08, 2010 2:17 PM To: css-d@lists.css-discuss.org Cc: jta...@rocketmail.com Subject: Re: [css-d] Tool to tell me where a rule is used On 8 Jul 2010, at 19:00, Jay Tanna wrote: The only way I can think of is to to do a search for class name or ID name. Notepad is pretty good doing this. Try Edit, Find. Then you can use Find Next to go to the next occurence. For ID you will have only one item on the page so that is not the problem. hth As I said in my post, though obviously not clearly, I use very few classes and ids. I'm on a Mac and have powerful text editors that can search through many files quickly, even using regular expressions. But with mostly descendant selectors, I think it would be mostly useless. Quick thought that could be totally useless... I've never used jQuery (which is why this might be useless), but it's my understanding that it allows you to select dom elements via css syntax. Perhaps you could do an onload script that uses any rules that you're wondering about, and then email you the page name if the rule matches something. Then you'd have to do something to load every page in your site, which can probably be done with some script or another. But it certainly seems like there ought to be an easier way. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
