via ajaxian:

John Allsopp, who authored XRAY, has a new tool for us to play with. MRI is a bookmarklet that fires up a tool allowing you to query items on the page using CSS selectors. As you put in your queries you will see the items on the page that match. You can also click on areas of the page to show some selector queries that would find that area.

via ajaxian:

CSS is pretty central to Ajax, and large Ajax projects often have a lot of CSS to deal with, so it’s worthwhile asking how to maintain all of it. Garrett Dimon’s Architecting CSS is a good set of advice for structuring your CSS files (from July, 2005; unearthed on Digg).

The article identifies three ways to organise your stylesheets:

• Archetype-Based A stylesheet for each class of page, e.g. homepage stylesheet, article stylesheet, etc.
• Page Element/Section-Based A stylesheet for each class of page section, e.g. header stylesheet, sidebar stylesheet.
• Tag-Based Similar to the previous approach, but based around tags, e.g. form stylesheet, table stylesheet.

Other topics include:

• Including stylesheets with @include
• Deciding how much to rely on selectors (Redundancy vs Dependency)
• Use of comments
• Use of !important
• Alphabetizing attributes to ensure you don’t forget any

I just happened upon event:Selectors. It’s very similar to Behaviour.js (the author’s spelling, not mine) in most respects, though its much smaller (72 lines / ~2k) and has some nice added functionality using Prototype shortcuts (Behaviour is stand-alone and duplicates a lot of Prototype stuff and is, therefore, larger).

Basic usage:

var Rules = {
   '#icons a:mouseover': function(element) {
     var app = element.id;
     new Effect.BlindDown(app + '-content', {queue: 'end', duration: 0.2});
   },
 
   '#icons a:mouseout': function(element) {
     var app = element.id;
     new Effect.BlindUp(app + '-content', {queue: 'end', duration: 0.2});
   }
 }

Now, this alone is nice, but nothing exceptional. You could do the same thing with prototype thusly:

Event.observe(window,"load",function() {
  $$('#icons a').each(function(tag) {
    Event.observe(tag,'mouseover', function() {
      var app = tag.id;
      new Effect....
    });
  });
});

Ok, so it’s definitely longer to do without it, but not terribly so. But what really gets me excited is this:

 '#footer:loaded': function(element) {
    element.setStyle({backgroundColor: '#ccc'});
  }

This will apply the code to the element once it’s loaded. That’s just awesome. That’s just awesome times five. Wait, it gets better: it will also apply all your rules to your Ajax responses, too (if you want it to). This means when you bring in a chunk of html into the DOM you don’t have to set up all your events on it again.

It has a few other nice touches (you can, for instance, apply these events to more than one selector, for instance). Check it out.