Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating HTML Modules with consistant CSS & HTML

Creating HTML Modules with consistant CSS & HTML


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


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.


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.

All modules can be referenced by

article[data-module] { ... }
Problem courtesy of: w0lf42


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.

Solution courtesy of: sdo


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating HTML Modules with consistant CSS & HTML


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription