¡Hola equipo! 👋 Este proyecto es un ejemplo práctico de cómo organizar nuestro CSS utilizando la metodología SMACSS (Scalable and Modular Architecture for CSS).
El objetivo es aprender a escribir CSS que sea más ordenado, fácil de mantener y escalable.
SMACSS es una guía de estilo que nos ayuda a estructurar nuestro código CSS en 5 categorías diferentes. En este proyecto, hemos aplicado cada una de ellas para dar estilo a una Card y un Botón.
Todo nuestro CSS vive en assets/css/style.css y está dividido en secciones claras:
Aquí definimos los estilos por defecto para las etiquetas HTML (como body, h1, p).
- ¿Qué hace?: Resetea márgenes, define la tipografía base y el color de fondo general.
- Ejemplo:
body,*.
Define la estructura principal de la página (la "maqueta" o esqueleto).
- Convención: Usamos el prefijo
.l-para identificar estas clases. - Clases usadas:
.l-site: Contenedor principal..l-header: Encabezado..l-main: Área principal..l-content: Sección de contenido.
Son las partes reutilizables de nuestro diseño, como nuestra Card y el Botón. Son independientes y pueden moverse a cualquier parte del layout sin romperse.
- Clases usadas:
.card: El contenedor de la tarjeta..btn: El botón.
Define cómo se ven los elementos en diferentes estados (activo, deshabilitado, presionado, etc.).
- Convención: A menudo usa el prefijo
.is-o pseudo-clases. - Ejemplo:
.is-pressed: Estilo cuando el botón es presionado (simulado con JS).:focus: Cuando el elemento está seleccionado.
Define variaciones visuales generales, como un "Modo Oscuro".
- Ejemplo:
.theme-dark: Cambia los colores de fondo y texto para una apariencia oscura.
- Abre el archivo
index.htmlen tu navegador. - Verás la Card estilizada.
- Haz clic en el botón "Alternar tema" para ver cómo actúa la categoría Theme y State.