Let's work together

Tell us about your project and we'll get back to you soon. All fields are required.

Writing DRY Code

Date Posted: Saturday, 30 August 2014 11:03
Posted By: Craig B
Tags: design css

The following post is written by David Tsang, one of the designers here at Elcom. 

Intended Audience: Designers and implementers 

Dry stands for "Don't Repeat Yourself" as opposed to it's polar opposite WET (Write Everything Twice)

What is dry code?

Dry code is an approach to CSS coding that minimises repetition of styling for commonly used styles.

Why write dry code?

The aim of dry code is to achieve:
  • Smaller file sizes – so that visitors have quicker site load times
  • Easier maintenance - efficient workflow of CSS so you're not repeating yourself.

When writing DRY code the aim is to apply it for styles that are likely to be constantly changing. There's minimal value in doing it for styles defined once or twice – it'd be more work than it’s worth and defeats the DRY approach purpose. 

Here's an example: Dry CSS A typical non-DRY approach would be to do this if we wanted to add a border-left Dry CSS Here's a DRY'er approach to this purely using fundamental CSS: Dry CSS With this example there is less repeated code, if we wanted to add a new border property you would simply just have to define the colour.

This can be scaled globally if you wanted to reuse the attributes for e.g: Dry CSS Here we're simply defining the border colour each time rather and chaining the CSS to repeat the code.

Another example Dry CSS As you can see the potential using DRY and it's a fun approach in coding CSS the way it should be!

Other recommended articles

Document Management Best Practices

What you need to know about document management software: what is it, why its important and best practices.

Customer Experience and its Impact on Business

Today’s consumer wants to be able to connect with the brands that they use through multiple channels and often, 24/7/365, depending on the business. The key to delivering an excellent customer experie ...

Strategize and Assemble Data: Stages 3 and 4 of our 6 Step Guide For a Social Intranet Business Case

Our eWorkbook, 6 step guide for a social intranet business case, is an insightful methodology which aims to provide readers with a comprehensive guide to establishing a compelling business case for th ...

Understanding Customer Experience

Consumers expect great customer service, and they expect to receive it on their preferred platform, whether that’s social media, live chat, email, SMS or phone.

Request a demo

Close demo form