Using Sass Mixins for More Semantic Markup

CSS Frameworks like Twitter Bootstrap are wonderful for creating sites quickly and easily but they provide a lot of styles that go unused and require a lot of style related markup.

For small, static websites or one page sites this isn't much of a problem. For large sites and CMS sites this can create a maintainability issue.

I do a lot of WordPress theme development and I cannot take for granted that end users will know how to style content themselves. Using an OOCSS approach, the end user may have to add classes to headings to center them or make them bold.

Sure I can create preset styles for them or they could use the visual editor to style posts without any HTML knowledge but this is time consuming and may result in inconsistent styles if content creators are just styling posts according to their preference. They may also have to go through these posts again and change styles to make them consistent. This could be very time consuming and expensive.

This defeats the entire purpose of CSS.

The power of CSS lies in its ability to create consistent styles with minimal effort for those creating content. Components should be flexible and reusable but this doesn't have to come and the cost of clean, semantic HTML.

However, writing the same styles over and over for elements is time consuming and error prone. Its also difficult to maintain in the long run.

I've been searching for a middle ground. The best solution I have found so far is Sass mixins and extends. They allow for the creation of reusable components without cluttering markup. They can simply be included when existing elements and semantic classes are styled.

Over the last few weeks I've put together a library of Sass utilities. This allows me to reuse styles and still keep my HTML mostly free of style classes. For example, instead of creating several classes of buttons and adding them to my markup, I can create mixins and just add them to my stylesheets.

Instead of this:

<a class="button-link rounded-button center">Centered Button</a>

I can create a mixin that creates a basic button shape and then build off of this basic mixin create specific mixins for pill buttons, glass buttons, rounded buttons.

@mixin button-link($color, $bk-color) {
  color: $color;
  padding: 10px 0 10px 0;
  text-decoration: none;
  background-color: $bk-color;

  &:hover {
    background-color: $color;
    color: $bk-color;
    text-decoration: none;
  }
}

@mixin centered-button($color, $bk-color) {
  margin-left: auto;
  margin-right: auto;
  @include button-link($color, $bk-color);
}

.button-link {
  @include centered-button(white, black);
}

This way I can have one .button-link class and style it according to its container. This results in much cleaner, more semantic markup.

I could also create style classes like .pill-button or .rounded-button by including the appropriate mixin in my stylesheet but I find that I don't really use multiple button styles in the same container.

If I have buttons that perform a specific task such as deleting an item from a database I could create a class called .button-link-delete and change the background-color argument to red. This is still a semantic class because it describes the button's purpose. If I decide all buttons that delete items should have a yellow background I only need to change my stylesheet. I don't have to change an .danger class to .alert.

Also, I can still use classes like .center or .danger if necessary. This is a middle ground approach between OOCSS and purely semantic HTML.

This method also results in a much leaner end CSS files. Any unused mixins are not included in my CSS files. I can also develop a library of sass mixins that I can include in all my projects for truly reusable styles.

Further Reading: