Separar lo que cambia por motivos distintos
En un catálogo como Costa Clara, cambiar los filtros no debería obligar a revisar el menú. Separar responsabilidades facilita encontrar dónde hacer un cambio.
La cohesión debe ser alta: un módulo reúne tareas relacionadas. El acoplamiento debe ser bajo: necesita conocer pocos detalles de otros módulos. Crear archivos por sí solo no logra ninguna de las dos cosas.
Un módulo con una tarea concreta
export function initNavigation() {
const button = document.querySelector('[data-menu-button]');
const menu = document.querySelector('[data-menu]');
if (!button || !menu) return;
button.addEventListener('click', () => {
const open = button.getAttribute('aria-expanded') !== 'true';
button.setAttribute('aria-expanded', String(open));
menu.hidden = !open;
});
}El HTML debe incluir esos atributos y un estado inicial coherente. Este ejemplo muestra la división del código; un menú completo también necesita revisar teclado, foco y adaptación al móvil.
Un archivo para iniciar
import { initNavigation } from './navigation.js';
import { initFilters } from './filters.js';
initNavigation();
initFilters();<script type="module" src="js/app.js"></script>Las funciones se exportan desde su módulo y se importan donde hacen falta. Sirve la web mediante HTTP para cargar los módulos correctamente.
Cuándo parar de dividir
Un buen límite es una responsabilidad que puedes nombrar: navegación, filtros o contacto. Si cada archivo obliga a saltar a otros cinco para entender unas pocas líneas, la separación necesita revisión.
En este portafolio, las tarjetas existen en HTML. El módulo de proyectos solo cambia cuáles se muestran. Así, una mejora interactiva no controla toda la estructura.