I'm coding some ActionScript 3 app that needs to request some HTML page and analyse it. I am fetching it and parsing as XML - so far so good. Now, I'll have to check for many various things in it and I have no idea how to do that without too much coding and fixed things.
Are there any AS3 methods or libraries, that would allow for quick searching in XML, for example by class/id attribute, preferably using css selectors - i.e. #id .className1 > .className2, etc?
The idea is that I want more maintainability than optimizations, as there's a chance it will involve many changes in the future.
So, are there any libraries or methods that could make querying xhtml easier? Or maybe something open source with css selectors that I could base my code on?
Well, E4X is already built in... and CSS selectors will work on HTML text, if you're going to display it in a text field.
Alright, wrote an AS3 library myself for it: http://code.google.com/p/actionscript-xml-css-selectors/ , it uses E4X. It is LGPL'd, sharing if anyone is used to css selectors as much as I do.
Related
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).
When developing large application using ASP.NET (MVC or classic, doesn't matter), especially in large team, it is easy to produce a lot of messy, non-traceable CSS definitions. After some time we can end up not knowing why particular definition exists and what is its real effect considering style inheritance and cross-browser differences. Needless to say, changing anything in that mess is a risk and there are hundreds of ways how small change could affect the system.
I know some solutions to organize CSS stylesheets better, like predefined CSS "frameworks" or DotLessCss engine, but I still find it quite hard to cope with CSS as there is no such relationship between HTML markup and CSS styles like i.e. between interface and concrete class in C# code. I know this is by design to make presentation separate from the structure, but I believe it might be useful to have such a correspondence at development level.
Ideally, I need something that can enforce the team not to make messy CSS or be able to clean that mess up automatically. Do you know any resources that may help me, or any guidance how to manage my CSS definitions easily?
Let me ask for something a bit different:
Despite of my several years of web experience, I believe I would feel much more confident if some of my CSS could be moved into C# code, the same way as some of HTML generation is done by MVC HTML Helpers. It saves me writing a lot of unnecessary markup, still allowing to do so if needed. And it is more unit testable, easier to refactor using tools like ReSharper etc.
I don't need mergers and compressors of my CSS, I would like to be able to manage my CSS at declaration level.
Maybe there are some tools like that I'm not aware of, or maybe that idea is just wrong and wouldn't be useful?
The Firefox plugin Dust Me Selectors should help to clean up unused selectors.
That being said please read What's Wrong With CSS
P.S: Please make reading Jeff Atwood's blog a habit :)
It might be worth looking at how Telerik have their css structured in their MVC components.
Telerik
Maybe I formulated my question in wrong way, but I was hoping to be directed to some existing .NET APIs to define/generate CSS. Looks like there's nothing like that. And according to the discussion in parallel question, it may not be as useful as I thought.
I'm thinking about organizing my CSS better. One suggestion is to use something like
.LESS
I'm using ASP.NET and there is currently a Beta .LESS for .NET
Curious if there are other solutions like .LESS?
LESS and SASS are the two major contenders for 'the language CSS should have been'; right now, only LESS has a .NET port.
Before you go and integrate a new component into your web application, you might want to ask yourself what you want to achieve. Are you spending more time than you'd like finding existing CSS rules to change them? Are you introducing bugs as fast as you fix them, because of rule interactions? The answers to those questions will help you decide what kind of cleanup/refactoring/reorganization you really want. Also, you should consider whether some of your CSS problems come from your markup; simpler, saner markup might go a long way toward making your CSS easier to understand.
Organizing your CSS may depend on weather you use HTML or XML.
I have a large set (over 300) of C# ASP.NET pages *.aspx and controls *.ascx, which are littered with inline CSS styles. My task is to extract those style into a CSS file.
So I'm looking for a tool to simplify the task of manually extracting this inline styles and replacing them with class="" statements.
Now I know this is not the ideal solution of doing things, but any tool which could ease the task would be helpful.
No tool will write good CSS selectors for you, just like no tool can write good code for you. Yes, you can generate code from templates, but only for the most repetitive of coding tasks. CSS is more art than science, and as such "auto-generation" will not yield good results.
Writing good, clean, lean, maintainable CSS requires an intimate knowledge of the HTML markup, the style & layout that you are trying to achieve, and the skill of identifying patterns across the whole site, such as font, color, h1 headings, presentation of tabular data etc., which are re-used.
Even writing your own script will not produce good CSS. The best you could hope for is to extract all those inline styles, replace them with a unique id or class, and dump them all into a css file. I don't actually see a lot of benefit in that exercise. You actually end up with more code to maintain because of all the extra id's or classes that you will create.
You will not gain consistency of appearance throughout your site from the above exercise, unless you start to consolidate all those unique id's or classes into fewer, more re-used ones, and this is a task best done by hand, not automation anyway. Page load times may improve due to browser caching of the css stylesheet, but thats about all you gain.
Sorry if I've strayed a bit from your question, but your site sounds like it is crying out for you to re-write your CSS from scratch.
Check out CSS Zen Garden for inspiration on what CSS can do, and examples of beautiful CSS, and be inpired!
I would probably opt for using a scripting language with regular expressions. This seems like it would fit especially well with python's list capabilities - for each match to your regex, you can check the list to see if there is a corresponding entry, extract and assign the class from that result, and add each non-listed match to the list to continue building it up.
You can use this tool, it will look for inline style=... definitions replace them with class definitions and generate a style sheet. Hope this is helpful.
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.