1) I am not sure I follow what you mean.
But “The long term goal is to make SO CSS smart enough to really analyze a theme and its HTML to make far more intelligent suggestions.” Sounds promising 🙂
2) I had missed that so this is good to access pages that have clear links on the page.
I still think you need a way to get to a page directly for pages that may have the link buried inside the web site, or for test pages that may not even be accessible from the site. So I would say bot my suggestion would be useful there
3) Selectors:
I looked closer at what was going on with selectors and I am a bit confused.
What I am seeing is that when I select an element, it shows me the complete selector hierarchy at the top (beside the magnifying glass).
Then under that on the left are “Some” selectors being used for the styling of the selected object, and on the right “some” of the CSS properties being applied to that object.
The “some” is what confuses me. It looks like only the rules that specifically include the html tag of the selected object are there, but the ones that are being applied through a class are not.
So we are actually not seeing all the CSS properties applied to the object, nor are we seeing all the Selectors used to style that object.
I think that when you select an object, you should go through ALL the active CSS rules being applied to it (inherited or otherwise), and show them all (All selector used in these rules and all CSS properties applied).
In terms of UI, I see two approaches.
A) The left side would show ALL the selectors used, and on the right you would show only the CSS properties that belong to an highlighted selector on the left.
B) The left side would show ALL the CSS properties applied to the object (what he browser developer tools shows under Computed), then when clicking on a specific property it would highlight it and show the selectors used to set that property on the right.
Approach A makes more sense to someone who knows and understand CSS, approach B makes more sense to a novice user.
Maybe you could provide both with a mode choice to show either of these two display 🙂
The idea is that when selecting an element, we should be able to see every property being applied to it, and which selectors are used to set each of them.
Then we would want to know if the rule is specific to that object only or if it applies to other things, and if it does get a recommendation on how to make an overriding rule unique to the object.
Eventually it may be easier if I could send you links to test pages, but the test site I used in inside a sub folder of a public site so I would rather not post the link here.
