I think that WebStorm is decent JavaScript IDE but if we 're talking about editing HTML/CSS/Sass, WebStorm is not any better than plethora of other text editors.
IMO basic problem lies in fact that we're still trying to edit hierarchical tree structures of HTML and CSS/SCSS as a plain text instead of editing underlying tree structure.
I think that good HTML/CSS editor should operate on tree and every CSS rule and every property should be object rather than plain text. That would allow to more natural editing and faster code modification/refactoring (I am frontend developer but I hate writing CSS/HTML by hand. It feels like using punch cards... Better editor could allow to do things faster and more effective).
I was looking for structural (and projectional) editor for HTML/CSS and didn't find any. So I started making my own (here is prototype: https://www.youtube.com/watch?v=yRwx09bAT08 )
I agree with edwinnathaniel, IntelliJ with its browser JavaScript debugging plugins is pretty awesome and I find it a fantastic JavaScript IDE.
I am curious what use cases you have for editing in the fashion of your demo video? I don't find myself frequently wanting to view just fonts in a css file. I either have specific rules I want to edit, or I pull up reused fonts and colours into re-used classes (or less variables) and just edit that one spot.
Why would you want to view just colours? Or just fonts? BTW, I am not trying to put down your idea, infact I think it's very interesting concept to work more closely with the tree structures.
Edit: as I think about the idea, it would be awesome if I could click on any html element in a file and it would be able to statically analyze and show all applicable css selectors. Although I frequently use angular and dynamically applied css classes.
> or I pull up reused fonts and colours into re-used classes (or less
> variables) and just edit that one spot.
good editor could pull up reused fonts and colours automatically (detecting if they the same in various nodes).
> I either have specific rules I want to edit
Yes, I'm also making possibility of filtering by specific rules and finding by CSS selector (in HTML also)
And different filters are just a part of the editor. Actually, my first idea was creating something that would allow to make quick changes that are super easy when operating on tree, but you must do them by hand in text editors (e.g. operations like "move to parent", "wrap this HTML element in new `div` element etc.).
I also want editor to be operable without keyboard/mouse switching. And because when I make websites I often use mouse to test in browser all functions, I want good mouse support and be able to change e.g. top from 0px to 10px using only mouse. This is possible in e.g. DevTools, why not to put this feature in editor?
> Edit: as I think about the idea, it would be awesome if I could click on
> any html element in a file and it would be able to statically analyze and
> show all applicable css selectors.
Yes. It would be nice, although I didn't solve this from technical perspective yet.
But for now I think about something like in Brackets - you edit HTML and could edit styles in place without switching to the other file.
IMO basic problem lies in fact that we're still trying to edit hierarchical tree structures of HTML and CSS/SCSS as a plain text instead of editing underlying tree structure.
I think that good HTML/CSS editor should operate on tree and every CSS rule and every property should be object rather than plain text. That would allow to more natural editing and faster code modification/refactoring (I am frontend developer but I hate writing CSS/HTML by hand. It feels like using punch cards... Better editor could allow to do things faster and more effective).
I was looking for structural (and projectional) editor for HTML/CSS and didn't find any. So I started making my own (here is prototype: https://www.youtube.com/watch?v=yRwx09bAT08 )