Say you have a module. Every site has modules, right?
<div class="module">
</div>Perfect! We did it!
But now, a New Circumstance™ comes along. This module isn’t going to work exactly as is. It’s pretty close, but in this New Circumstance™ the module is going to need some extra bottom margin.
How do you handle that? Let’s explore some ways.
Body class affects it
Are all the modules on a particular page or area of your site like this? Perhaps you can add a class to that page (or area):
<body class="books-page">
...
<div class="module">
</div>.module {
/* normal style */
}
body.books-page .module {
/* variation styles */
}You don’t really need to tag qualify the .books-page, but I often do because it’s no big deal in this circumstance and reminds me what’s going on.
Sass is useful in these circumstances because the nesting kinda ties the room together.
.module {
/* normal style */
aside.books & {
/* variation style */
}
}Totally new class
Perhaps the new style is different enough that you are going to call it something different.
<div class="solitary-module">
</div>.module {
/* normal style */
}
.solitary-module {
/* alternate style */
}If the style are pretty similar, you could:
.module, .solitary-module {
/* normal style */
}
.solitary-module {
/* variation styles */
}Which is exactly what @extend does in Sass:
.module {
/* normal style */
}
.solitary-module {
@extend .module; /* could be a %placeholder selector */
/* variation style */
}Double up classes
Perhaps you create an additional class, but that class isn’t meant to work on it’s own, it’s just a variation.
<div class="module module-books">
</div>.module {
/* normal styles */
}
.module.module-books {
/* variation styles */
/* you don't HAVE to double up the classes here in the CSS, but it enforces the connection (while increasing specificity) */
}Data-attribute variations
I don’t think this is particularly common, but I kinda dig it.
<div class="module" data-variation="books">
</div>Attributes are like classes (same specificity) but can have values.
.module {
/* normal styles */
}
.module[data-variation="books"] {
/* variation styles */
}Reads pretty well.
Inline styles
Is this variation rare? Perhaps just an inline style will work.
<div class="module" style="margin-bottom: 40px;">
</div>Typically frowned upon (not reusable), but if it’s a one-off thing, it does the job.
Shame.css
You can always deal with it later with shame.css!
<div class="module chris-did-this">
</div>/* I will totally deal with this later I promise */
.chris-did-this {
/* variation styles */
}How do you do it?
What do you do when your design pattern breaks down? is a post from CSS-Tricks
