title: Tool to track classes/ids between CSS, HTML and Javascript
body: <p>In developing a website, I have a section structured like so:</p>
  
  <pre><code>    &lt;ul id="preview-tabs" class="row nav nav-tabs"&gt;
          &lt;li&gt;&lt;a href="#main-preview-pane"&gt;Main&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#alt1-preview-pane"&gt;Alternative 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#alt2-preview-pane"&gt;Alternative 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>With corresponding CSS:</p>
  
  <pre><code>#preview-tabs {
      border-bottom: 1px solid #8E9753;
  }
  </code></pre>
  
  <p>And finally the Javascript:</p>
  
  <pre><code>$('#preview-tabs a').click(function (e) {
          e.preventDefault();
          $(this).tab('show');
  });
  </code></pre>
  
  <p>Now somewhere along the way I might need to change the ID of the UL to something like <code>design-tabs</code> and would have to remember to update the corresponding CSS and Javascript to maintain the functionality.</p>
  
  <p>My question: is there a tool that keeps track of this relationship and can either 
  1) Alert me that some linked code needs to be updated OR 
  2) Do the update of the code automatically. Sort of like the Refactor feature for Java in Netbeans</p>