title: css reusable class understanding needed
body: <p>I am using a 960 responsive layout from skeleton, i have their css stylesheet which i have to addon if i want to include class. After experimenting i managed to get the site i want, but not without having piles of unnecessary selections.</p>
  
  <p>So for example, based on what u see my css reflect the selector .container.four.columns, that say if i add a banner class, in my css should i only do .container.banner or .container.four.columns.banner will be the best way? </p>
  
  <p>Since i thought if i add a lot of reusable style classes to it the css selector will be very long if i go into each details.. Please advise as i'm trying to make my code look as clean and neat as possible but not sure the best selectors to use as when i tried shortcut like just .banner nothing happens and i must have at least .container.banner before it make the changes. Thanks</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="content" class="container"&gt;                                
              &lt;div class="four columns banner"&gt;
                  &lt;div id="banner_a3da" class="banner_img"&gt;
                  &lt;a href="./page_a3da.html" rel="external"&gt;&lt;img src="page_home/banner_A3DA.jpg"&gt;&lt;/a&gt;
                  &lt;/div&gt;                  
              &lt;/div&gt;
              &lt;div class="four columns banner"&gt;
                   &lt;div id="banner_fi" class="banner_img"&gt;
                      &lt;img src="page_home/banner_FI.jpg"&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* Base Grid */
      .container .four.columns                    { width: 220px; }
  
  .banner or .container.banner or .container.four.columns.banner { width:100% }
  </code></pre>