Order of related selectors in inline CSS editor should be reversed

adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.

http://brackets.io

MIT License

33.25k stars 7.63k forks source link

Order of related selectors in inline CSS editor should be reversed #8064

Open larz0 opened 10 years ago

larz0 commented 10 years ago

The most relevant selector (selector that overwrites the other selectors) is at the bottom; it should be at the top.

screen shot 2014-06-07 at 1 00 05 pm

redmunds commented 10 years ago

The current order is just the order in which they're found in the project files (breadth-first project tree search, alphabetically by filename). If selectors were ordered was by specificity, the universal (*) and type (body) selectors would be grouped together.

peterflynn commented 10 years ago

Ordering by specificity is a big-ticket item -- we'd have to analyse the DOM structure, add code to compute the specificity of each selector, and potentially also need to figure out what order different CSS files are loaded on the page. (Or alternatively, during Live Preview we could leverage runtime info in the browser, and fall back to a simpler ordering when not under Live Preview). Marking 'move to backlog' since this is a sizeable chunk of work either way.

peterflynn commented 10 years ago