Building Blocks: Revisiting DRY and Modular Code

By Daniel Nordby • February 4, 2016

Quickly, to summarize my previous post, DRY code is code that doesn’t repeat itself – that eliminates redundancy by using best practices and modular functionality to group together and reuse code. DRY code is vital to applications and websites: it allows for quicker development time, it makes them easier to maintain – for developers and clients, and it helps them perform more reliably and faster.

 

Keeping your code DRY is good practice in general, and is crucial on both the front and backend of a web app. That said, as a front end developer, I’m going to focus primarily on how to DRY up HTML, CSS, and JavaScript.

 

HTML

HTML can be difficult to keep dry, especially if you’re not using some kind of fron tend framework. HTML is used to create the structure of a page, and given that it can be challenging to not be over-descriptive while creating a page.
One of the most crucial things to developing DRY HTML is solid naming conventions. Naming your HTML classes and ID’s on a whim can lead to <div> soup that confuses the overall structure and leads to excess code. Instead, consider your structure thoroughly, use the smallest number of elements that will still accomplish your goal, and then carefully choose descriptive classes and ID attributes that describe each element. Is that <div> wrapping another element? Sure, but don’t assign it an ID of “div-wrapper.” Instead, notice that it’s containing your page’s footer social items and call it “footer-social,” or something equally descriptive and unique.
In terms of naming conventions with classes and ID’s, also consider leaning towards the use of classes. Classes can be applied across multiple items – for example if you have multiple buttons on a page, they can all be grouped under a “buttons” class. The alternative is assigning an ID to each button on the page, and styling it uniquely – which bloats both your HTML and your CSS.
Finally, to clean up layouts especially, consider includes to modularize your header, footer, or any other reusable code. That way, on any page that requires your header, you can utilize one line of code and have the same effect as fully including your header. Implemented across dozens of pages, that winds up cutting down on tons of lines of code. While there’s always more than one way to do it, I’ve found that using JavaScript is an effective way to accomplish this.

 

CSS
CSS can be very easy to keep DRY, but the temptation is always there to lose focus while trying to solve a particular problem and deviate from the things that naturally make CSS clean.
First remember what CSS means – Cascading Style Sheet. The browser that is interpreting your CSS is going to start at the top and move to the bottom, meaning rules towards the bottom have the potential to hold the most influence. Given that, ordering is obviously key. To keep my code DRY, I like to focus on one section of my page at a time and work my way down. This creates a natural flow (header styles should be at the top, and footer styles should be at the bottom of my CSS!), but more importantly it keeps me from jumping around the page and writing potentially conflicting CSS, and then duplicating, negating, or overwriting other code. Ordering your CSS well, in whatever style works for you, is key to keeping it DRY.
CSS also targets elements based on levels of specificity – ID’s holding the most weight, followed by classes, followed by general element tags themselves. That means you should always write your CSS using the least amount of necessary specificity required to achieve the desired effect. You can certainly target your div with an ID of “image-wrapper” and class “pull-right”, but if you need to write rules farther down your CSS (maybe a media query for your responsive layout?) you must use at least the same amount of specificity or more to make any updates. Using less specificity keeps things cleaner, and also causes less frustration towards the end of a project.

Also consider using SASS, or its alternate syntax, SCSS. I like to use SCSS which allows you to nest style rules within others. This allows you to visually see the structure of the page you’re styling better, as well as gives you visual hints when you’re being redundant.

 

JavaScript

Lastly, a bit of self-critique. I’m notorious for writing JavaScript that is long-winded, repetitive, and confusing. But really, JS may be the easiest of the addressed languages to DRY up.

The first is to use loops. JavaScript has them, so take advantage! If you find yourself writing similar code over and over, it is extremely likely that you’d instead be able to implement a loop of some kind to reduce redundancy. The language comes equipped with dozens of other tools to cut down on unnecessary code, so don’t simply write out what works unless it is unique each and every time.

Another amazingly powerful JavaScript tool are functions. Functions allow you to group code that you expect to use over and over into a named container, and then call it by simply using its name. The more complex the operation, the more useful this becomes. If you’re simply outputting a message to the screen, a function can still be of use. But when you’re searching through a form for validation errors, looping over multiple items in an array, or performing any number of other tasks, functions become vital very fast to keep things organized and DRY.

This is obviously a high-level review of how to keep your front end code DRY. In the comments, let us know your other tips and tricks to make your clean code even better by applying the concept of Don’t Repeat Yourself.

Daniel Nordby

Frontend web dev, on a mission to make cool stuff and learn the Full Stack.

Like what you’re reading? Sign up for the Verbal+Visual newsletter and receive monthly roundups.

Create great.

Contact us