CSS inline editor applied only to "active" CSS files #1175

gtorodelvalle opened this Issue Jun 27, 2012 · 6 comments


None yet
6 participants

Hi guys, I noticed that when I "COMMAND + E" to access the CSS inline editor related to certain element of my HTML code, all the CSS files with selectors which may apply to my HTML element are shown. I would suggest to only show the CSS files that really apply to the HTML file and element I am inspecting.

For example, I have an HTML file with these link tags:

I also have a third CSS file in my project which is applied to another HTML file.
If I "COMMAND + E" on some element of my first HTML, I get CSS code from the 3 CSS files (considering all of them have CSS selectors which apply, of course), and not only of the 2 CSS files really linked to my HTML page, and consequently which really apply to this page and its elements ;-)

Personally, I think that showing CSS code which really does not affect the element you are currently inspecting may cause errors since the developer may think that she is changing something whose effect is not (obviously since the CSS file does not apply) applied.

I'm seeing something similar when testing out the quick editor in the Brackets code in /src/index.html file. If for example I select a span tag, I see all styles that have a span as part of the selector, none of which appear to really apply to the span tag I've selected (and in this case, it's a really long list of selectors found). They all apply to span tags that have other class names as part of the selector than the one I'm actually looking at.

Is it expected that the CSS matches are very broadly matched rather than matching the element based on the IDs and classes and tags that the element is within as well as ID and classes applied to the tag itself?


njx commented Jun 27, 2012

Hi folks--yes, we don't have very sophisticated heuristics for figuring out what CSS is applied. We should have a backlog item for refining them, but I can't find it in Trello right now--I'll make sure we have one.

Currently, we scan all CSS files in the project, and we find selectors based on where your cursor is. So, if your cursor is in the "span" tagname, we find all spans, but if your cursor is in class="foo", we find all rules whose rightmost component is .foo. We're not looking at the whole tag at once, and we're not taking the cascade into account. So those are all things we should be improving in the future.

Only showing "active" CSS files is a great idea, but the benefit of scanning all CSS files is that the inline editor works with MVC frameworks like CodeIgniter where stylesheets might be included elsewhere.

As a user of frameworks, I'd argue that unless someone knows some voodoo magic to figure out "active" CSS files for all forms of creating a webpage, just leave it as is.

To me having too many CSS results is a pollution problem that actually hinders my work. For example, if you open up index.html in the Brackets project, and then place your cursor in in a span tag, hit CMD-E. There are 205 selectors that are returned. That is an unworkable number of results, there has to be some smarter type of filtering in place.

The case for handling frameworks can be solved by having an inclusion or exclusion list of files or folders.


pthiess commented Oct 17, 2012

Added to Trello card 645, closing.

pthiess closed this Oct 17, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment