title: Why is that variables and hierarchy is not supported in css by default?
body: <p>I am somewhat new to UI development, but I am very much uncomfortable with how CSS actually works.</p>
  
  <p>My use-case : [ Attempted with css &amp; less ]</p>
  
  <p>I wanted to apply some specific styles inside a particular <code>div</code> on a page.</p>
  
  <p><strong>css attempt :</strong></p>
  
  <pre><code>div.class1 {
      font: normal 12px arial, helvetica, sans-serif;
      font-color: #f30;
  }
  div.class1 div.class2 {
      border: 1px solid #f30;
  }
  </code></pre>
  
  <p><strong>less attempt :</strong></p>
  
  <pre><code>@red: #f30;
  @font-family: arial, helvetica, sans-serif;
  div.class1 {
      font: normal 12px @font-family;
      font-color: @red;
      div.class2 {
          border: 1px solid @red;
      }
  </code></pre>
  
  <ul>
  <li>Now, writing css can induce bugs since it forces you to repeat <code>#f30</code> &amp; <code>div.class2</code> everytime you try to achieve hierarchy and variable re-use.</li>
  </ul>
  
  <p><strong>My Question :</strong></p>
  
  <ul>
  <li>Why is that css makes things difficult ?</li>
  <li>less does nothing special - just makes obvious improvements and translates to css ?</li>
  <li>What is that css wants to motivate in users because of which it promotes such a redundant coding style ?</li>
  </ul>
  
  <p><strong>I strongly believe css should be what less is. Definitely I am overlooking some obvious advantage of why things are done that way in css.</strong></p>
  
  <p>I thought it was a legacy problem, but I was surprised when I saw no attempts to solve this with css3.</p>
  
  <p>Please help me understand how should I approach css ?</p>