Redundancy and duplication in code should be avoided
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
Human-testable
Remove or simplify (through rewriting for performance) your code to focus on essential features and have a cleaner, less redundant product (and codebase).
Resources
Criteria: Iteration over recreation
Human-testable
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.
Resources
- A Sustainable Design Handbook
- Becoming a Better Programmer: Improve Code by Removing It
- Stop Redesigning And Start Tuning Your website Instead
- United Nations SDGS - Goal 12 - Consumption & Production
- When you Should—and Shouldn't—Consider Redesigning your Website
- Why Website Redesigns Should be Avoided (And a Proven Process)
- You'll Rebuild Everything Every Four Years Anyway
Criteria: Organize code arrangement
Within CSS and JavaScript, use an organizing methodology and systems like DRY and WET to optimize the arrangement and output of your source code.
Resources
- 3 software development principles I wish I knew earlier in my career
- AHA Programming
- Clean Code Essentials: YAGNI, KISS, DRY
- Clean Code Explained
- Clean Code in JavaScript
- CSS: Classes Seriously Sprawling
- DRY CSS: How to Use Declarations Just Once, Effectively
- Organizing your CSS
- Produce clean and maintainable code
- The Art of Clean Code
- The systemic failure of implementing CSS principles
- Web Almanac: Sustainability
Impact: Medium, Effort: Medium
| GRI | Impact |
|---|---|
| materials | Medium |
| energy | Medium |
| water | Medium |
| emissions | Medium |
Benefits of this guideline
- Environment: 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.
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; } } -
contentBlock, Element, Modifier.
Tags:
- CSS
- JavaScript
- Patterns
- Performance