Modules

Thinking modularly in CSS allows us to create more reusable CSS. And allows us to really reduce our duplication making our code more maintainable.

Why is modularity important?

When writing CSS, and any code, we want to make everything as lean and maintainable as possible. In code there’s a common idiom: “Keep it DRY”; meaning don’t repeat yourself.

When writing code, don’t just think about what makes sense now, but also think about what makes sense in the future.

If you come back to a project in a year, will you know what’s going on?
If you give your code to another person is it obvious where everything is?
If you find yourself copying and pasting code from one place to another, you have a problem.
If you find that two elements have nearly identical code, combine them together.
If you find something that feels wrong or hacky, see if there’s a better way.

Ways to simplify CSS

When looking at simplifying your CSS there a few things you can consider:

Look for common properties, like text alignment, margins, paddings, etc.
Look for common patterns, common design items with small variations, like buttons, or horizontal lists, and extract those into reusable classes.
Use min-width media queries so you don’t have to copy and paste all your CSS into each new MQ.

If you’re using a grid system or the modular type system, they often come with a bunch of abstracted CSS classes to help you out.

Some utility classes you could consider:

.left, .right to float elements.
.text-left, .text-center, .text-right to change the text alignment.
.bold, .italic to change the font weight and style.
.gutter, .island for consistent padding.
.push for consistent margins.
.img-flex to make images responsive.

But be really careful not to go overboard—these classes should be considered “brute-force” and used within reason.

Example: list group

A very common pattern in websites is using lists because they semantically make sense but not wanting them to have bullets. This is called a “list group”.

Here’s a simple navigation, almost always a list, but rarely with bullets.

<nav>
  <ul class="nav list-group">
    <li><a href="#">Terrestrial planets</a></li>
    <li><a href="#">Gas giants</a></li>
    <li><a href="#">Dwarf planets</a></li>
    <li><a href="#">Asteroids</a></li>
  </ul>
</nav>

We can use the .list-group class as a way to simplify, always removing the padding and bullets from a list.

.list-group {
  padding-left: 0;
  list-style-type: none;
}

Another common thing we want with lists is to make the <li> elements horizontal, instead of stacked, called “inline list group”.

<nav>
  <ul class="nav list-group list-group-inline">
    ⋮

Then with a little bit extra CSS we can have a list with no bullets and inline.

.list-group-inline > li {
  display: inline-block;
}

Notice how I kept the two classes separate, so we could remove the bullets with one class, and make the items horizontal with another class.

Example: buttons

Another great place to look for simplification is with buttons.

Here’s an example of a simple button:

<a class="btn" href="#">Go!</a>

Here’s some standard CSS for a button:

.btn {
  display: inline-block;
  padding: 0.5em 0.75em;
  background-color: red;
  border: 3px solid darkred;
  color: #fff;
  text-decoration: none;
}

Now, if I wanted a differently coloured button, it’s unnecessary to create a whole second class with duplicated CSS, I can just make a slight modifier class:

.btn-bright {
  /* I only change those properties that are different */
  background-color: yellow;
  border-color: darkyellow;
  color: #000;
}

And apply it to my HTML like this:

<a class="btn btn-bright" href="#">Go!</a>

So now the button inherits all the CSS from the standard .btn class plus the slightly modified .btn-bright class—creating much less duplicated CSS.

If you have a modular type system you can use the font-size classes to adjust the size of the button with another class:

<!-- Inheriting the .mega class from the type system -->
<a class="btn btn-bright mega" href="#">Go!</a>

Common website modules

List group: vertical & horizontal lists.
Buttons: small, medium, large, alternative, buttons + modular typography.
Icons: different sizes, stacked, inline, image replacement.
Media object: flexible image size, embeddable, with list group, stacked, reversed.
Embed containers: for flexible images and videos, with specific aspect ratios—to prevent layout reflow after the image loads.

The common.css file used in the examples and videos could be replaced by your modular typography typography.css file for better results.

Naming conventions

There are a couple major naming conventions for modular CSS that help clarify the intent of our classes and help us visualize the HTML by just looking at the CSS classes.

When we looked at icons, that naming system comes from SMACSS.
The BEM naming convention takes naming a little further by using double underscores or double hyphens to represent certain ideas—this can be seen in the embed containers.

Links

Getting Your Head Around BEM Syntax

Generated modules & patterns

You probably don’t want to write all these same CSS patterns, or try and find them and copy and paste them from previous websites, every time you make a new website.

Check out Modulifier, a tool I created for myself to generate the code for these patterns & modules and many other things I like to include by default on every website I make.