Structuring Modern Web Projects: A Refactoring Journey

In many growing web projects, the initial phase often involves rapid prototyping where code and structure evolve organically. Working on the 'Entregable1---Castanheira-Becq' project, I recently revisited our foundational assets to ensure that our HTML, CSS, and JavaScript implementation remained clean as we added new features. The goal wasn't just to add code, but to ensure that the separation of concerns remained intact as the project scaled.

The Audit

When reviewing the project, I noticed a common anti-pattern emerging: mixed responsibilities. We had JavaScript logic embedded directly within HTML structures and CSS overrides scattered across multiple files. This approach often leads to a 'spaghetti' state where simple UI changes ripple through unrelated components.

Key areas identified during the audit:

• Markup Bloat: HTML structures carrying unnecessary layout classes.
• Script Fragmentation: JavaScript initialization logic was duplicated across sections.
• Style Inconsistency: Redundant CSS selectors increasing the file footprint.

Refactoring for Maintainability

To address this, I focused on decoupling the presentation layer from the behavioral layer. Instead of keeping everything in one place, I adopted a modular approach:

1. Externalize Scripts: Moving functional JavaScript into dedicated modules, ensuring it acts on the DOM rather than being defined within it.
2. Component CSS: Encapsulating styles so that changes to one UI element don't unexpectedly affect global layout properties.
3. Semantic HTML: Using standard tags to ensure that the structure remains readable and accessible.

Example: Decoupling Logic

Instead of inline handlers, we moved to event delegation:

// Instead of inline HTML: <button onclick="handleAction()">
// Use event listeners in a separate script file
document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.action-btn');
  button.addEventListener('click', (e) => {
    console.log('Action triggered safely.');
  });
});

The Takeaway

Refactoring is not a one-time event; it is a discipline. By cleaning up the project architecture, we have made it easier to introduce new features without breaking existing ones. For your next project, try segregating your concerns early—keep your HTML for structure, CSS for presentation, and JavaScript for behavior. Your future self will appreciate the clarity when it is time to scale.

Generated with Gitvlg.com