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 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 behaviour 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 is 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, colours, 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 colour 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.
