Lost In Pixelation

Better Class Name Construction

CSS Frameworks are common place these days. They provide us the ability to construct complex, varied UI elements with a relatively small amount of CSS. This approach has been because it provides you the ability to start with base styles for an element, and then add or remove complexity as needed. Let's look at a couple examples from some popular UI Frameworks:

//Bootstrap Buttons
<button type="button" class="btn btn-primary btn-lg">Submit</button>

//PureCSS Buttons
<button type="button" class="pure-button pure-button-primary">Submit</button>

Where the OCD among us run into a problem is that we often end up with very convoluted, redundant class names in our markup. While there is nothing necessarily wrong with this approach, if your goal is concise semantic class names, there needs to be a better way. How can we get the same extensibility that these frameworks provide without creating complex class lists? The answer lies in CSS3 attribute selectors.

Attribute Selectors

CSS attribute selectors provide the ability to match styles with the value of specific attributes on a DOM element. CSS3 added the ability to further refine these matches, most powerfully with the wildcard modifier. By appending `*` to your attribute selector, you can match element in the attribute list that contains a specific string. By leveraging this functionality, we can replicate the functionality of these frameworks, but with much more concise class names.

Let's recreate our button examples above using this approach:

Bootstrap

[class*="btn"] {
  
  // base button styles
  
  &[class*="primary"] {

    // primary button styles

  }

  &[class*="lg"] {

    // large button styles
  
  }

}

PureCSS

[class*="pure-button"] {
  
  // base button styles
  
  &[class*="primary"] {

    // primary button styles

  }

}

Now our markup will look like this:

<button class="btn-primary-lg" href="/">Submit</a>
<button type="button" class="pure-button-primary">Submit</button>

This gives us the exact same functionality as the way Bootstrap or PureCSS does it, but with much neater, semantic class names. Browser support is also pretty great, only excluding IE8 and earlier.

We don't have to only use this approach to improve our class names from frameworks. We can also use it with our own styles. This approach works especially well if you are following an object-oriented approach to your CSS, like BEM:

.form {

  &[class*="button"] {
    
    // base button styles
    
    &[class*="primary"] {
  
      // primary button styles
  
    }
  
    &[class*="large"] {
  
      // large button styles
    
    }
  
  }
  
}

These styles would allow us to combine our button styles a variety of ways while still maintaining good BEM syntax:

<button type="button" class="form__button-primary--large">Submit</button>
<button type="button" class="form__button--large">Submit</button>
<button type="button" class="form__button--primary">Submit</button>

This gives us the power of a flat, object-oriented class structure, without sacrificing the flexibility of being able to construct complex UI elements. Over the last year, we have used this approach at Piqora in our internal CSS frameworks to great effect. It has not only made our class names cleaner, but it has also made our SASS files much easier to scan when looking for specific styles we need to extend or modify.

How do you feel about using complex class lists to style your UI elements? Have you come up with a better solution for reusable UI modules? I'd love to hear about it.

© 2011-2015 Lost In Pixelation, All Rights Reserved.