Modular CSS Tools

Contextual style changes can bloat CSS. Whether it’s random spacing or color changes (damn designers), small variations can get out of hand. How can we manage contextual tweaks without growing the size and scope of our CSS? Let’s take a look at using single-property tool classes for managing one-off design changes.

Let’s start by looking at a few examples:

.mbm {
  margin-bottom: 20px;
}

.por {
  position: relative;
}

.tac {
  text-align: center;
}

Modular Tools are single-property CSS classes that adhere to the Single Responsibility Principle. That is, they do one thing and one thing well.

Currently, we use tools for things like:

• Border
• Background
• Display
• Floats
• Margin
• Opacity
• Padding
• Positioning
• Rounding
• Text
• Visibility
• Width

Why are they useful?

They’re helpful when you need a specific style in a unique context, but can’t justify creating (and naming) a new module or modifier to achieve the desired effect.

– MVCSS docs

On many occasions, we need to:

• Add bottom margin to an element
• Center the text of a component on a particular page
• Set position: relative on a parent for positioning context

It’s unreasonable to continue building new elements to meet these conditions. As the size of an application increases, modular tools become necessary to keep the CSS manageable.

Let’s look at some examples.

Clearing margin on an element

In this example, we have a .card module with a title and paragraph text. On our base paragraph (p) elements, we’ve set a bottom margin. Within the .card, the bottom margin causes an issue. We need to clear it to keep the spacing uniform.

We create a class called mbf (margin bottom flush) and apply it to the p element. We’ve avoided more styles on our .card, and we have a reusable class for use elsewhere.

Tip: Look at the Sass tab in the example above to see the tool class.

What is the alternative?

We could set margin-bottom to 0 on .card p, but now we’ve altered the specificity. A class with conflicting styles applied to .card p will not overwrite its styles. Also, a .card with two paragraphs will not be spaced properly (unless you specify only the last paragraph should have its margin cleared).

Contextual text alterations

Let’s say we have an empty state in our application. We don’t have any posts, so we have copy that reflects that.

But we want to alter the paragraph text to be a smaller font size, as well as a subdued color. How would we handle this with tool classes?

What is the alternative?

We could create a new module to handle this, but we have to think about how it’s used. If we have many instances of this pattern, it makes sense to abstract it into its own module. But, if it’s a contextual change, we’re safe using tool classes to create the pattern.

Responsive adjustments

We’ve looked at a few examples of how tool classes can help keep our CSS manageable. But can they help with responsive alterations? Indeed they can!

Using our previous example, we want to center the text at mobile, but have it left-aligned at tablet and desktop.

What have we done here?

• We’ve wrapped our h2 and p in a div with the class of tac
• We added a new tal--m tool class inside a media query to left-align the text at the medium breakpoint

The --m modifier is what we use to match the medium breakpoint, which is a tablet-sized breakpoint.

What is the alternative?

Like the previous examples, the alternative is to create a new module to handle the pattern. This isn’t bad, but as the size of your CSS grows, the more duplication you’re likely to encounter. Tool classes, when used properly, can keep your CSS small and manageable.

Knowing when to abstract

It’s very important to abstract when necessary. Yes, you can use tool classes to great effect, but they can grow unwieldy as well. Knowing when to abstract is the key to their proper usage.

We can use single-property tool classes to construct any pattern, like our card earlier.

I’m sure you can see the issue with this, though.

• What happens when we reuse this pattern elsewhere?
• What if we change the amount of padding on the pattern?

When this happens, we have to find the pattern in the codebase and change the classes one by one. It’s not ideal, and using a module for reused patterns is still the best solution. Tool classes are just that: tools; use them alongside other CSS best practices, and your CSS will benefit.