A Package that will bring me to the css code for a selected class from the HTML?


#1

I’m taking over a code project from another developer and I love using Atom. But the problem for me is that I need a way to drill into the CSS code from the HTML Element itself.

i.e. If I’m looking at the following code and I double click on the id=“features1-80” it would bring me to the CSS file that has that ID styling and directly to the line for #features1-80

<div class="container">

If something exists similar to that, I’d be ecstatic to hear about it! If not, then anyone want to make it :wink:!!


#2

I don’t believe that the solution you’re asking for is the correct one, for one big reason: the cascading part of cascading style sheets means that there might be multiple rules or even multiple files that all target a particular element. There are two tools that you already have available that solve your problem better than the package you are asking about.

  1. The dev tools available in all worthwhile browsers (and also in Atom) let you right-click on an element and inspect that particular element, where you can see every one of the rules that applies to that element in one place. If the CSS is not dynamically generated, then the inspector window also lets you see (and go to) each of the files that targets that particular element.

  2. In Atom, you can select an ID name and press Ctrl-Shift-F/Cmd-Shift-F to open the Find in Project panel, which will be automatically populated with your selection. Then all you have to do is press Enter and your whole project will be searched for the text in question. You can even limit this search to a particular directory if the files in question are in a specific location.


#3

Maybe https://atom.io/packages/quick-editor is something for you? Personally I favor browser dev tools if I want to inspect the css for some element so I have not used this myself.