Creating HTML Modules with consistant CSS & HTML

Question

Here's a live example

I am attempting to create modules 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.

Ideally, my CSS would be something like this:

article {
    base styles
}
article.sample1 {
    custom styles
}
article.sample2 {
    custom styles
}

I'm able to adjust the size of the article.login module with this code:

section.utilities > article

or

section.test > article

1. 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 List Apart, The Worm Hole, and Ajaxian). Should I stick with article, use a different one, or make a custom one?

2. IE. I haven't been able to test this in IE. I think I have my bases covered with inline-block and background-size, but I'm not sure about child selectors. Do you see any problems supporting this code?

3. 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.

Update

I wanted to create a custom element (module), but found that to be impractical. The combination of the data attribute and CSS attribute selectors, provide me the tools treat these like custom elements.

<article data-module="helloWorld" />

All modules can be referenced by

article[data-module] { ... }

Answer 1

My .02:

1. Historically, defining custom elements has always been frowned upon, and, semantically speaking, one should choose one that is closest to their intended goal. This gave way to prodigious use of divs and spans. My personal opion is that the introduction of the article tag is a compromise allowing for highly customizable elements without actually walking out of the HTML box and into the XML one. From the W3C Specification:

   The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. W3C Specification

   In conclusion - the article is a good choice for this.

2. It's IE. Expect to spend lots of time writing extremely indirect and possibly totally irrelevant code making use of newer ideas in IE. Most old ideas don't work in IE.

3. I think this is a good idea. Be careful about your nuimber of modules though as, depending on your server configuration, using php wrappers to house the modules could involve lots of file reading and seek times.

Hope this helps.