A Quick Look at CSS Pre-processing For The Pac-12 Conference's New Platform Theme

William O'Beirne
Posted

Theming with CSS has been one of those things that has pained me as a developer. One of the oldest sayings in development is D.R.Y., "Don't Repeat Yourself." And yet when it comes to style sheets, that's just about all you do. Nested selectors and common styles (especially the verbose CSS3 and browser-specific styles) wear down your CTRL, C, and V keys pretty quickly. And that's where CSS preprocessors have come in, to help keep our sanity intact when it comes to styling.

Recently, our friends and client, the Pac-12 Conference came to us with a site build project that included a rich design that made an excellent use-case for a CSS preprocessor.  We are very excited to announce that the new Pac-12 Conference beta platform was released today! You can read more about the release in TechCrunch's "Pac-12 Revamps Network Websites Around Unique Sports Events To Connect More Fans."

In this post, I'll detail some of our thought processes and discovery findings to determine why CSS preprocessor was the best solution, and I'll give a few examples of how CSS pre-processor made our life a whole lot easier.

Sass vs LESS

I won't dwell on it long, given that there are a ton of blog posts on this topic already, but I do want to explain why we found Sass to be the right tool for the job.

Frameworks

There was some discussion about using ZURB's Foundation or Twitter's Bootstrap for this project, and Foundation was settled on because of its lack of inherent styles that needed overriding. Foundation uses Sass, and Bootstrap uses LESS. However, we found that Bootstrap also has a Sass version that trails behind the latest release a bit. Given that the choice was still up in the air, Sass seemed like the most flexible option.

Compass

As the title of this post gives away, Compass was a huge plus for Sass. The myriad of mixins, sprite handling, a ready-made reset stylesheet, and plenty of command line tools that were available through Compass, made Sass much more attractive to us.

Now, on to the cool stuff

For Pac-12, the problem of repetitious CSS was put under the microscope when we started working on school team pages on their site.  These team pages have very similar custom styling that only had a few colors variations. We found that we would only need 12 nearly identical sets of styles, that differ by simple hex value changes. Traditionally with CSS, we would have done something like this:

  1. .arizona #bg {
  2. background: #a00112 url("../images/arizona-bg.jpg") no-repeat center top;
  3. }
  4.  
  5. .arizona a {
  6. color: #CC0033;
  7. }
  8. .arizona a:hover,
  9. .arizona a:active {
  10. color: #EE1549;
  11. }
  12.  
  13. /* 10 more of these */
  14.  
  15. .washington #bg {
  16. background: #391962 url("../images/washington-bg.jpg") no-repeat center top;
  17. }
  18.  
  19. .washington a {
  20. color: #391962;
  21. }
  22. .washington a:hover,
  23. .washington a:active {
  24. color: #421C82;
  25. }

But with Sass, we were not only able to be more concise, but we also had a few easier ways of implementing the styles. To keep the page load and CSS selector footprint down (each team stylesheet has more styles than the 3 above), we decided to make individual files of each of the teams, and then load them selectively. We did so by having one base style file, that looks something like this:

[less]#bg {
  background: $schoolBg;
}
a {
  color: $primaryColor;
  &:hover,
  &:active {
    color: lighten($primaryColor, 15%);
  }
}[/less]

And 12 school files that look something like this:

  1. // Variables
  2. $schoolBg: #CC0033 url("../images/arizona-bg.jpg") no-repeat center top;
  3. $primaryColor: #CC0033;
  4.  
  5. // Styles
  6. @import "school_styles";

And with a little effort, and considerably less repetition, we had ourselves 12 team style sheets that can be tweaked with changes to a single file.

Example of 4 different Pac-12 team pages

The bite-sized components also get broken out into reusable pieces, but as mixins. Arrows are a common case for this, as they're a pretty slick CSS trick that is hard to remember, so that there have been tools specifically made for generating the right styles for them. However, with the power of Sass (and with some elbow grease from Github user erinautomatic and his fantastic mixin), we can generate great arrows with a single line.

This:

[less]@include arrow(left, top, 15px, 20px, #FFF, #999);[/less]

Becomes this:

Example of a CSS arrow on a popup

The bottom line

This post wasn't necessarily about what to use for better theming, or how to use it.  I am merely providing examples of why you should be paying attention to these tools. I can tell you that going forward, I will be using a CSS compiler on every project. Looking back at vanilla CSS now feels like looking at the days of <table> tags for page layout and inline style attributes.

Let me know how you feel about the various tools out there, and if you've got any tips or tricks for working with your tool of choice.

William O'Beirne