Confoo 2012 – DRYing CSS for brevity, unity and maintainability

By: Sofia Shendi, February 29, 2012

Another summary of a talk we attended on Day 1 of Confoo 2012. If you haven’t checked out the Make Web Not War Dojo yet – make sure to come visit us tomorrow for lightning talks, kinect Fruit Ninja and giveaways!

DRYing CSS for brevity, unity and maintainability
by Jeremy Clarke

Jeremy Clarke brought a new CSS concept to us today by introducing what he calls the Don’t Repeat Yourself CSS.

By working on a big website like Global Voices, he’s had to deal with a lot of challenges on the WordPress platform but also with always optimizing the site at its best.

In general, the session was meant to help developers and/or designers to improve their CSS by removing any redundancy and having the lightest stylesheet possible.

It’s something that I keep working on myself after creating my own CSS Framework that my team uses on any new project. It’s always interesting to see how we can fit a complete new website design in approximately the same number of lines by using a smart approach to coding CSS.

Before explaining what DRY CSS is exactly, I’d like to start with the the other solution Jeremy gave us but doesn’t promote.

LESS and Mixins

LESS is a Javascript library that lets you create a dynamic CSS and use dynamic behavior such as variables, mixins, operations and functions. Here’s an example of what could be done:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

 

For a developer, it can sound exciting to use LESS and render everything dynamically but when you think about it, it’s not safe at all. You are giving the entire control of your site design to an external library that could not work because of a bug, a missing file or simply Javascript being turned off.

Also, LESS pushes you to learn a new whole language when the goal is to become a master at CSS and make it as light as possible.

Dry CSS

Now what DRY CSS has to offer doesn’t have anything to do with external libraries but with re-arranging your CSS.

The base of DRY is to group your CSS. If you’ve worked with WordPress before, you might have seen that type of CSS in themes Twenty Ten and Twenty Eleven.

By grouping your CSS, it is possible to reduce your number of lines exponentially. You can use groups for shapes, colors, structures, modules or text. To do so, Jeremy Clarke’s concept is to:

  • Start a group with an ID to name it – written in uppercase to spot easily in Firebug
  • Place all the divs and classes that need that style – it could be a font size, a text color or even a float alignment
  • End the group with the ID as a class

It would look like this:

#GROUP-WITH-BIGGEST-FONT-EXAMPLE,
h1,
.title,
.cta a,
.group-with-biggest-font{
font-size:3em;
color:#000;
}

 

By using groups, it also becomes interesting to use tools like CSSEdit to get a clear view of what each section does to your content.

Advantages

  • Groups can be interesting for a faster website skin change.
  • A section can be moved around pretty fast.
  • Modifying a style in Firebug will change everything simultaneously and let you decide if it should be site-wide or not.
  • Integrates well with grids, OOCSS or SMACSS.

Conclusion

I find Jeremy’s approach interesting but it’s not something I would use. I find that there are a lot of ways to make your CSS clean and keep it from repeating itself.

I build my CSS Framework by applying a mix of these practices:

  • Object-oriented CSS (OOCSS) – place repeating styles in classes
  • Alphabetically Ordered CSS – a great practice for when multiple developers work on the same projects
  • Single-line CSS – write all CSS for a div or class on one line as long as you don’t declare styles for specific browsers
  • Reset.css – stop repeating “clean up” CSS and get it all done before starting your own custom CSS

In the end, CSS like any other type of coding is something very personal but I think it’s important to implement standards especially if you’re working with a team and your goal is to also optimize the time spent on the stylesheet.

Slides

 

Would you try the DRY CSS method? If not, what are your best practices?

Session covered at

Tagged with: ,
Posted in Events

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Avatar of Sofia Shendi

Sofia Shendi

What people are saying about #webnotwar

I think I can speak for the team when I say we are @richardpietro's biggest fans @WebNotWar @jp_pietro #webnotwar #OGT14

Happy? A very resounding yes. Ecstatic, proud, honored as well. Very happy to make #webnotwar on the #OGT14 @richardpietro @jp_pietro Retweeted by Keith Loo

Happy? A very resounding yes. Ecstatic, proud, honored as well. Very happy to make #webnotwar on the #OGT14 @richardpietro @jp_pietro Retweeted by Bryan Xu

Happy? A very resounding yes. Ecstatic, proud, honored as well. Very happy to make #webnotwar on the #OGT14 @richardpietro @jp_pietro

Happy? A very resounding yes. Ecstatic, proud, honored as well. Very happy to make #webnotwar on the #OGT14 @richardpietro @jp_pietro

+1 "@richardpietro: @6t6qt @WebNotWar @thekeithloo I'd love to see @brucechau doing that lol #OGT14 #WebNotWar"