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.
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.
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.
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.
Frontend web dev, on a mission to make cool stuff and learn the Full Stack.