CSS Variables in Firefox Nightly
CSS variables are the only reason I started using Sass and LESS in the first place. But although these preprocessors come with other interesting features, I never managed to truly incorporate them in my workflow.<p>The way I ended up solving the CSS variables issue (i.e. replacing the same property/value combination in multiple locations) was to actually regroup <i>selectors</i>.<p>For example, I'd have:<p><pre><code>  #title,
  .nav a,
  .post-title em {
    color: #db4e44;
  }
</code></pre>
The only annoying thing is that it can result in a long list of selectors (although I'd put them on one line anyway). But one thing I truly appreciate with this approach is that you can edit <i>any</i> value with your browser's inspector, and see it <i>instantly</i> update all instances at once. It's great to test out new colors for example.<p>The other option would be to have a specific class that would apply this style. But then, you'd move the styling from the CSS to the HTML, and I've always tried to prevent myself from breaking this golden rule.