DRY CSS (Don’t Repeat Yourself)

When we have working with CSS for a few time, we begin to discover one of its dangers. Our CSS increases its lines of code without control, becoming a giant that forces us to use bad practices like !importants, IDs and more to maintain the specificity in order.

DRY comes to give us a simple and powerful methodology to reduce our code to the minimum. Combined with Grunt, we can get implement it without problems and too many complications.

What is DRY CSS?

The first time I heared about DRY CSS was in this talk of Jeremy Clarke at ConFoo 2012 in Montreal. From here, a lot of designers and developers in the community began to write their own articles about it like this.

This is a very interesting concept because one of the main problems of CSS is how it can increase ad infinitum. It’s very easy you increase your CSS without need, growing the complexity, reducing the performance and complicating the manteinance.

The less lines of code we have, the more standardized code we have and the more maintainable code we have.

Understanding DRY CSS

DRY forces us to think globally, not locally and it improves drastically our vision of the things that compose our project.

Normally, the big error we have when we produce CSS is write it while we read the HTML. This approach produces a CSS too coupled to the content and too specific by the selectors used.

Other approach frequently used is the oriented one to components or widgets. The CSS is only coupled at the level of the widget that can be reused in other websites. It’s a huge improve over the previous approach but the feeling again is that our CSS is needlessly big and coupled.

When we apply DRY principles, our CSS is totally oriented to the CSS properties so that, necessarily, our CSS be as short as possible.

So, our way of thinking must change. Normally, we think from global to specific. We begin thinking in the page, then the header, the logo and finally, the font. When we apply DRY all revolve around the property, that is, the float, the text-decoration and so on.

We define a property (float: left; for example) and we set all objects we want they use this property. See the example below:

#LIGHT-WHITE-BACKGROUND, .translation, .entry .wp-caption, .recent-comment .comment-text, .roundup h3, .post-header-sharing, .subscription-manager ol, .light-white-background { background-color: #fff; border-color: #ccc; }

In the formal DRY CSS, we use a header ID that defines the set of properties. However, it can create a conflict with the best practices and CSSLint show us like an error. So, you don’t need to create these IDs.

At the same time, when we use SASS, LESS or whatever preprocessor you want, you can improve your code using Mixins and Variables improving the flexibility of this method.

Conclusion

The first important thing is you can reduce your code to the minimum, improving performance and mantainability. The second one is that you decouple your CSS from your content improving mantainability again and, why not, the reusability of your code. An extra for you is that using DRY will help you to understand better the CSS properties and selectors.

The less time you spend with your CSS, the more time you have to improve your knowledge and your code.

Originally published at www.frontdojo.com.