title: Creating HTML Modules with consistant CSS & HTML
body: <p>Here's a live <a href="http://jsfiddle.net/ex9CQ/1/" rel="nofollow noreferrer">example</a></p>
  
  <p>I am attempting to create <em>modules</em> whose markup and CSS never change (e.g. I can use the same module in an utilities, footer, header, etc. section), but I still want the freedom to increase/decrease the size of the module.</p>
  
  <p>Ideally, my CSS would be something like this:</p>
  
  <pre><code>article {
      base styles
  }
  article.sample1 {
      custom styles
  }
  article.sample2 {
      custom styles
  }
  </code></pre>
  
  <p>I'm able to adjust the size of the article.login module with this code:</p>
  
  <pre><code>section.utilities &gt; article
  </code></pre>
  
  <p>or</p>
  
  <pre><code>section.test &gt; article
  </code></pre>
  
  <ol>
  <li><p>Article Element (or alternative).  I'm using the article element.  Is there a better one?  I poked around a little on the inter-tubes looking for custom elements (<a href="http://www.alistapart.com/articles/customdtds2/" rel="nofollow noreferrer">A List Apart</a>, <a href="http://happyworm.com/blog/tag/custom-tags/" rel="nofollow noreferrer">The Worm Hole</a>, and <a href="http://ajaxian.com/archives/adding-custom-tags-to-internet-explorer-the-official-way" rel="nofollow noreferrer">Ajaxian</a>).   Should I stick with <em>article</em>, use a different one, or make a custom one?</p></li>
  <li><p>IE.  I haven't been able to test this in IE.  I think I have my bases covered with <a href="http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/" rel="nofollow noreferrer">inline-block</a> and <a href="https://stackoverflow.com/questions/2991623/make-background-size-work-in-ie/6353808#6353808">background-size</a>, but I'm not sure about <a href="http://www.quirksmode.org/css/contents.html" rel="nofollow noreferrer">child selectors</a>.  Do you see any problems supporting this code?</p></li>
  <li><p>Lastly, is this approach a Bad Idea™?  Ultimately, this would allow me to build modules/objects in PHP files which, I'm hoping, will result in rapid development and easy code management.</p></li>
  </ol>
  
  <p><strong>Update</strong></p>
  
  <p>I wanted to create a custom element (module), but found that to be impractical.  The combination of the <a href="http://ejohn.org/blog/html-5-data-attributes/" rel="nofollow noreferrer">data attribute</a> and <a href="http://css.maxdesign.com.au/selectutorial/selectors_attribute.htm" rel="nofollow noreferrer">CSS attribute selectors</a>, provide me the tools treat these like custom elements.</p>
  
  <pre><code>&lt;article data-module="helloWorld" /&gt;
  </code></pre>
  
  <p>All modules can be referenced by </p>
  
  <pre><code>article[data-module] { ... }
  </code></pre>