Photo by Samara Doole on Unsplash

Dry CSS

Trying not to drown in code

Let’s talk a little about DRY CSS practices and how they can help us write better code. More importantly lets also discuss why embracing these practices early on is so important.

For many newcomers to the industry the initial instinct is to code “top to bottom”, or on a page by page basis. These methods can work for small sites like portfolios and similar simple projects, however should one need to scale up the site later this could prove counterproductive. The developer will most likely need to rewrite their CSS to accommodate the added pages and or features to avoid the pitfalls that can come with these methods.

Terminology and the pitfalls

First let us discuss the vocabulary surrounding the DRY approach:
code bloat- The inclusion of more code than is needed to accomplish a given task or set of tasks. Code that is unnecessarily long, slow or taxing on resources.
code duplication- Code that is repeated due to other overriding styles, in an effort to affect desired change.
inheritance- The styles applied due to specificity, lack of style rules, or the cascading affect of CSS.
specificity- The direct specification of CSS targets with relation to their location or naming convention.

The vocabulary above describes the various aspects that can affect your code and leave it sopping wet. But fear not my intrepid developers, for there are ways to avoid and or minimize this. The first an foremost thing one should do is plan ahead, it can be a bit difficult to “see” the end result beforehand but with the following tips you can improve your ability to write DRY-er code.

The game plan and theory

There are several techniques developed by the dreamers of dreams of at the W3C to help improve the lives and code of developers, done for everyone's sake. Lets talk about some of these techniques and then see them in action:

Selector Grouping, can reduce the lines of code you have dramatically whilst still accomplishing the desired affect. Observe the following example:

h1{
color: #008000;
font-family arial helvetica sans-serif;
}
h2{
color: #008000;
font-family arial helvetica sans-serif;
}
h3{
color: #008000;
font-family arial helvetica sans-serif;
}
h4{
color: #008000;
font-family arial helvetica sans-serif;
}

This block of code could be easily trimmed down to just a few lines of code by grouping these selectors like so:

h1, h2, h3, h4{
color: #008000;
font-family arial helvetica sans-serif;
}

Since they all have shared styles they can all be declared simultaneously and the styles applied reducing the code from 16 lines of code to 4 and significantly reducing the number of characters as well! In the long run the benefits of this can prove quite massive.

Shorthand style declaration, is a method of declaring a style which has multiple properties in a single line instead of several. Lets see this in action:

div{
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
} 

The margin property like padding are actually shorthand for multiple related properties of the target element. In this case the margin property can accept values for top, right, bottom and left. For these there is more than one way to shorten our code. The shorthand for the above code can be written like so:

div{
margin:0px 10px 0px 10px;
}

The values are always applied in the following order “top, right, bottom, left”.

Furthermore in this case we can even further simplify the rule, when specifying only two values the CSS rule applies the first value to the top AND bottom, and the second rule to the left AND right. Lets take a look at that:

div{
margin:0px 10px;
} 

Since this line of code sets the top and bottom to the same measurement, and the left and right to the same measurement we can safely omit the last two values and get the same result! We have just reduced 6 lines of code containing 67 characters down to a mere 3 lines containing 21 characters!

Selector nesting, is a way of adding specificity to our style rules whilst still optimizing our code. The nature of CSS’s cascading affect allows us to specify styles through inheritance, this means that any rule written will be applied to it’s target UNLESS it is specifically overwritten by another rule later in the code (excluding !important we’ll talk about that another time though). Selector nesting gives us a way to specify exceptions to a rule without writing lots of extra code. Let’s take a look at this:

h1, h2, h3, h4{
color: #008000;
font-family arial helvetica sans-serif;
}

This rule is one we wrote above, it specifies the color and font of all header elements. If we wanted to change this rule for a SIGNLE header element we’d have to override ALL elements and then override it again later in the code. Instead we can add a specifier to target the SINGLULAR element we want to differ. We can do this by nesting our target inside of another selector, in this case we will imagine that our target header is a child element of a div with a class of .target , as such we can target this ONE header like so:

.target h2{
color: #999999;
}

In doing this we have targeted only the specific element we want to change, and in this case altered it’s color without affecting the other elements OR altering our HTML to accommodate the changes we want! Altering our HTML for the sake of our CSS is a something we want to avoid whenever possible, with the tools given to us by the W3C we can easily affect some POWERFUL CSS with relative ease!

Benefits of DRY CSS

There are several benefits to DRY CSS just to name a few:
1. Easier to read and edit.
2. Uses less resources and loads faster
3. Scalable code means as your site increases in size and complexity your code remains manageable.
4. Less bugs hiding in your code.
5. It’s prettier, there is something very satisfying about well written code, especially when we know WE WROTE IT!

FINAL NOTES

• Planning ahead to use these methods will take some practice and the more you push yourself to do so the easier it will get.
• Always start writing your code with these concepts in mind, this includes ANY programming language!
• If you feel lost or overwhelmed in this process, use your google-fu, there are tons of resources for assisting with cleaning up our code!
• Remember to refactor AS you code! If you start to notice repetition stop and look to see if there are ways to optimize the code you are working with. There may not always be a way to optimize, but if you do so wherever possible AS YOU GO, you will find yourself working with much more manageable code!