Check out this live demo
I'm working on creating modules that have consistent markup and CSS, allowing for flexibility in size adjustments. I want to use the same module in various sections like utilities, footer, or header.
My goal is to structure my CSS like this:
article {
base styles
}
article.sample1 {
custom styles
}
article.sample2 {
custom styles
}
I can control the size of the article.login module with the following code:
section.utilities > article
or
section.test > article
Choice of Element: I'm using the article element but should I consider a different one or create a custom element? Any suggestions?
IE Compatibility: I haven't tested this in IE yet. Do you foresee any issues with support for inline-block, background-size, or child selectors?
Is this Method Efficient: Will building modules/objects in PHP files using this approach lead to efficient development and code management?
Update
After attempting to create a custom element (module) and finding it impractical, I discovered that utilizing data attributes and CSS attribute selectors allows me to treat them as custom elements.
<article data-module="helloWorld" />
All modules can be styled by
article[data-module] { ... }