3.6 Avoid Code Duplication

Redundancy is the enemy of sustainability. Having systems in place to ensure that everyone can work from established patterns, the website or application remains clean and easy to use, and iteration over redesign is firmly in the mindset that will help promote sustainable practices. It’s also worth being wary of abstracting code too early (see AHA methodology) or incorrectly, as while good abstractions can be more efficient, poor ones can waste effort and introduce complexity, bloat, and bugs to your codebase which can lead to emissions.

Criteria

Remove Or Simplify: Remove or simplify (through rewriting for performance) your code to focus on essential features and have a cleaner, less redundant product (and codebase).
Iteration Over Recreation: Improve (iterate) an existing creation rather than constantly redeveloping and redesigning products from scratch (duplication of coding effort) if possible to reduce visitor learning burden and developer impact.
Organize Code Arrangement: Within CSS and JavaScript, use methodologies (like BEM) and systems like DRY and WET to optimize the arrangement and output of your source code.

Impact

Medium

Effort

Medium

Benefits

Environmental:
While CSS methodologies increasingly add more code to your markup, they improve maintainability (reducing development time at scale), which can reduce energy usage.
Accessibility:
Developers with accessibility requirements may find the naming conventions used in CSS methodologies easier to work with than generic CSS selector identifiers.
Performance:
Avoiding repetitive code reduces waste in markup, which reduces the time sites take to download (and reduces server energy usage).
Economic:
An optimized codebase (that’s reusable) can improve productivity and code quality.

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

.opinions_box {
	margin: 0 0 8px 0;
	text-align: center;
	&__view-more {
		text-decoration: underline;
	}
	&__text-input {
		border: 1px solid #ccc;
	}
	&--is-inactive {
		color: gray;
	}
}

Block, Element, Modifier.

Resources

View the Guideline