# frontend-principles

> Criterios de trabajo para HTML semántico, CSS y JavaScript vanilla.

- Author: pqem
- Repository: pqem/erica-avalos
- Version: 20260120114715
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/pqem/erica-avalos
- Web: https://mule.run/skillshub/@@pqem/erica-avalos~frontend-principles:20260120114715

---

---
name: frontend-principles
description: Criterios de trabajo para HTML semántico, CSS y JavaScript vanilla.
scope: root
---

# Frontend Principles

## Propósito
Definir criterios operativos para mantener HTML semántico, CSS claro y JavaScript vanilla simple en este repositorio estático.

## HTML semántico
- Usar etiquetas semánticas (`header`, `nav`, `main`, `section`, `article`, `footer`).
- Mantener jerarquía lógica de títulos (`h1` → `h2` → `h3`).
- Evitar `div` si existe una etiqueta semántica adecuada.
- Mantener una estructura clara y fácil de leer.

## CSS (orden, responsive, simplicidad)
- Priorizar estilos legibles y consistentes.
- Mantener un orden lógico (layout → componentes → utilidades).
- Usar enfoque mobile-first y ajustar con breakpoints mínimos.
- Evitar reglas innecesarias o duplicadas.
- Preferir cambios locales antes que reestructuras globales.

## JavaScript vanilla (claridad, modularidad básica)
- Usar JavaScript vanilla, sin librerías ni frameworks.
- No agregar JS si el cambio puede resolverse solo con HTML o CSS.
- Mantener funciones pequeñas y legibles.
- Agrupar lógica por módulo simple (objeto, IIFE o patrón equivalente).
- Evitar variables globales innecesarias.
- Inicializar lógica en `DOMContentLoaded` cuando aplique.

## Regla final
- Si un cambio rompe claridad o simplicidad, detenerse y pedir confirmación.