title: How to simplify CSS code
body: <p>I am working with an existing piece of CSS code that looks like this (excerpted from a much larger body of code):</p>
  
  <pre><code>.apl_widget_fourLevel {
  margin:0 auto 1em;
  overflow:hidden;
  /* zoom:1 */ /* IE Sheet */  
  }
  
  /* a panel container */
  .apl_widget_fourLevel .apl_widget_level {
      float:left;
      position:relative;
      overflow:hidden;
      text-align:center;
      width:102px;
      height:150px;
      margin:0 1px 0 0;   
  }
  
  /* extra height for widgets with the supplementary data beneath the panels */
  /* reset width for selected mini panels */
  .apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
      height:auto;
  }
  
  /* extra height for widgets with the supplementary data beneath the panels */
  /* reset width for selected mini panels */
  .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
      height:auto;
      width:90px;
  }
  
  /* reset width for selected mini panels */
  .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
      width:102px;
  }
  
      /* the gray label in the panel 
         enforce for mini display */
      .apl_widget_fourLevel .apl_widget_level .apl_widget_label,
      .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
          position:absolute;
          top:20px;
          left:0;
          width:100%;
          margin:0;
          color:#555;
          font-weight:normal;
          text-transform:uppercase;
          font-size:100%;
          line-height:1.0em;
          z-index:1;
      }
  
      /* offset for mini labels */
      .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
          margin-top:20px;
          font-size:85%;
      }
  
      /* label cascade reset for IE6, sigh */
      .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
          margin-top:0;
          font-size:100%;
      }
  
      /* the value displayed in the panel */
      .apl_widget_fourLevel .apl_widget_level .apl_widget_value,
      .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
          position:absolute;
          top:45px;
          left:0;
          width:100%;
          margin:0;
          color:#fff;
          font-weight:bold;
          font-size:28px;
          line-height:1.0em;
          z-index:1;
      }
  
      /* offset for mini value */
      .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
          margin-top:15px;
          font-size:24px;
      }
  
      .apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
          margin-top:3px;
          font-size:20px;
          font-weight:normal;
          opacity:0;
          -moz-opacity:0;
          -webkit-opacity:0;
          filter: alpha(opacity=0);
      }
  
      /* value cascade reset for IE6, sigh  */
      .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
          margin-top:0;
          font-size:28px;
      }
  
      /* range values smaller */
      .apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
          margin-top:7px;
          font-size:15px;
      }
  
      .apl_widget_fourLevel .apl_widget_value a {
          color:#fff;
      }
  
      /* supplemental value beneath the panel */
      .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
          position:absolute;
          bottom:0px;
          left:0;
          width:100%;
          color:#0072ad;
          font-weight:bold;
          font-size:28px;
          z-index:1;
      }
  
      .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
          color:#0072ad;
      }
  
      /* low values will be lighter color */
      .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
      .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
          color:#30a2dd;
      }
  
      /* the image container element */
      .apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
          overflow:hidden;
          width:100%;
          height:135px;
          position:relative;
      }
  
          /* the panel image itself */
          .apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
              position:absolute;
              top:0;
              left:-5px;
              margin-top:-150px;
          }
  
          /* Individual Level image offsets */
          .apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
              left:-5px;
          }
  
          .apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
              left:-105px;
          }
  
          .apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
              left:-205px;
          }
  
          .apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
              left:-305px;
          }
  
          /* mini panel offsets */
          .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
              margin-top:-300px;
              margin-left:-6px;
          }
  
          /* reset image offset via margin for highlighted/selected style */
          .apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
              margin:0;
          }
  </code></pre>
  
  <p>My major problem with this is the complexity: every rule has 3-5 selectors on it, making it really hard to figure out which rule applies. There are 25 rules here for styling four buttons with text. It can't be that hard!</p>
  
  <p>Some background: this CSS styles a widget that shows four bitmapped images, one of which is selected, from a single bitmap using CSS sprites. Unselected images come from one row of the large bitmap and the image in the selected state comes from another row. The selected image is put into a box that is wider and taller than the boxes of unselected images.</p>
  
  <p>So is there a program that will simplify this to something cognitively manageable? Is there a tool that can identify which values are unnecessary because they are replaced by more specific selectors? Are there best practices for dealing with CSS so that you don't get unnecessarily selective paths?</p>
  
  <hr>
  
  <p>Update: 2010-08-31 12:25</p>
  
  <p>So I looked into <a href="http://lesscss.org/" rel="nofollow noreferrer">less</a> as a way of conceptualizing the CSS code. And because my code isn't in less, I looked up <a href="http://github.com/sickill/css2less/blob/master/css2less.rb" rel="nofollow noreferrer">css2less</a>. Here is an excerpt of what css2less produces on the code in question:</p>
  
  <pre><code>.apl_widget_fourLevel {
      margin:0 auto 1em;
      overflow:hidden;
  
      .apl_widget_level.apl_widget_level1 {
          .apl_widget_panel {
              img {
                  left:-5px;
              }
          }
      }
      .apl_widget_level.apl_widget_level2 {
          .apl_widget_panel {
              img {
                  left:-105px;
              }
          }
      }
      .apl_widget_level.apl_widget_level3 {
          .apl_widget_panel {
              img {
                  left:-205px;
              }
          }
      }
      .apl_widget_level.apl_widget_level4 {
          .apl_widget_panel {
              img {
                  left:-305px;
              }
          }
      }
      ....
  }
  </code></pre>
  
  <p>So here's the thing: apl_widget_levelX are actually unique. I think a good tool could generate this:</p>
  
  <pre><code>img#apl_widget_level1 { left:-5px; }
  img#apl_widget_level2 { left:-105px; }
  img#apl_widget_level3 { left:-205px; }
  img#apl_widget_level4 { left:-305px; }
  
  .apl_widget_fourLevel {
      margin:0 auto 1em;
      overflow:hidden;
      ....
  }
  </code></pre>
  
  <p>Similar comments for the selected/unselected elements.</p>
  
  <p>I like where the answers are going but I am looking for tools to make my life easier. The full CSS code in this file is 2500 lines and the entire suite is 11000 lines.</p>
  
  <hr>
  
  <p>Update: 2010-09-01 09:50</p>
  
  <p>This is what I turned it into by hand:</p>
  
  <pre><code>ul.apl_widget_content {
      width: 492px;
      height: 140px;
      position: relative;
  }
  ul.apl_widget_content li {
      background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
      list-style: none;
      display: inline;
      position: absolute;
      text-align:center;
      text-transform:uppercase;
  }
  
  #apl_widget_level1 {
      left:5px; top: 0px;
      background-position: -13px -300px;
      width: 86px; height: 133px;
  }
  #apl_widget_level2 {
      left:105px; top: 0px;
      background-position: -113px -300px;
      width: 86px; height: 133px;
  }
  #apl_widget_level3 {
      left:205px; top: 0px;
      background-position: -213px -300px;
      width: 86px; height: 133px;
  }
  #apl_widget_level4 {
      left:305px; top: 0px;
      background-position: -313px -300px;
      width: 86px; height: 133px;
  }
  #apl_widget_level1s {
      left:5px; top: 0px;
      background-position: -5px 0px;
      width:102px; height: 133px;
  }
  #apl_widget_level2s {
      left:105px; top: 0px;
      background-position: -105px 0px;
      width:102px; height: 133px;
  }
  #apl_widget_level3s {
      left:205px; top: 0px;
      background-position: -205px 0px;
      width:102px; height: 133px;
  }
  #apl_widget_level4s {
      left:305px; top: 0px;
      background-position: -305px 0px;
      width:102px; height: 133px;
  }
  div.apl_widget_label {
      padding-top: 35px;
      font-size: 85%;
      font-weight:normal;
      top: 20px;
      line-height:1em;
  }
  .selected .apl_widget_label {
      padding-top: 15px;
  }
  div.apl_widget_value {
      font-size:24px;
      margin-top:10px;
  }
  .selected div.apl_widget_value {
      margin-top:15px;
  }
  .apl_widget_value a {
      text-decoration:none;
      color:#FFF;
  }
  </code></pre>
  
  <p>Previously 175 lines. Now 75 lines. Most of the code (40 lines) does the CSS spriting.</p>
  
  <hr>
  
  <p>Update 2010-09-01 11:30</p>
  
  <p>HTML now looks like:</p>
  
  <pre><code>&lt;ul class="apl_widget_content"&gt;
      &lt;li id="apl_widget_level1"&gt;
          &lt;div class="apl_widget_label"&gt;Level &lt;/div&gt;
          &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="apl_widget_level2"&gt;
          &lt;div class="apl_widget_label"&gt;Level&lt;/div&gt;
          &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="apl_widget_level3s" class="selected"&gt;
          &lt;div class="apl_widget_label"&gt;Level&lt;/div&gt;
          &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="apl_widget_level4"&gt;
          &lt;div class="apl_widget_label"&gt;Level&lt;/div&gt;
          &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>HTML previously looked like:</p>
  
  <pre><code>&lt;div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini"&gt;
      &lt;div class="apl_widget_content"&gt;
          &lt;div class="apl_widget_level apl_widget_level1 "&gt;
              &lt;div class="apl_widget_label"&gt;Level&lt;/div&gt;
              &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/div&gt;
              &lt;div class="apl_widget_panel"&gt;
                  &lt;img alt="" src="widget_fourlevel_1.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="apl_widget_level apl_widget_level2 "&gt;
              &lt;div class="apl_widget_label"&gt;Level&lt;/div&gt;
              &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/div&gt;
              &lt;div class="apl_widget_panel"&gt;
                  &lt;img alt="" src="widget_fourlevel_1.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected"&gt;
              &lt;div class="apl_widget_label"&gt;Level&lt;/div&gt;
              &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/div&gt;
              &lt;div class="apl_widget_panel"&gt;
                  &lt;img alt="" src="widget_fourlevel_1.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="apl_widget_level apl_widget_level4 "&gt;
              &lt;div class="apl_widget_label"&gt;Level&lt;/div&gt;
              &lt;div class="apl_widget_value"&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/div&gt;
              &lt;div class="apl_widget_panel"&gt;
                  &lt;img alt="" src="widget_fourlevel_1.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;                    
  &lt;/div&gt;
  </code></pre>