Aprender CSS Técnicas modernas y metodologías

CSS 3 ha revolucionado el desarrollo web con sus avanzadas capacidades y flexibilidad. En esta lección, exploraremos técnicas modernas y metodologías que optimizan el uso de CSS 3 en proyectos actuales.

Técnicas modernas en CSS 3

Uso de variables CSS

Las variables CSS, también conocidas como custom properties, permiten definir valores reutilizables en tu hoja de estilos. Esto facilita la gestión y modificación de estilos.

:root {
--color-primario: #3498db;
--margen-base: 16px;
}

body {
color: var(--color-primario);
margin: var(--margen-base);
}

Flexbox y Grid Layout

Flexbox y Grid Layout son sistemas de diseño que proporcionan una estructura flexible y adaptable. Flexbox es ideal para diseños unidimensionales, mientras que Grid Layout es perfecto para estructuras bidimensionales.

Ejemplo de Flexbox

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.item {
margin: 10px;
}

Ejemplo de Grid Layout

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.grid-item {
background-color: #f1f1f1;
padding: 20px;
}

Metodologías en CSS 3

BEM (Block, Element, Modifier)

BEM es una metodología de nomenclatura que facilita la escritura de CSS mantenible y escalable. Se basa en bloques, elementos y modificadores.

/* Bloque */
.menu {}

/* Elemento */
.menu__item {}

/* Modificador */
.menu__item--activo {}

OOCSS (Object-Oriented CSS)

OOCSS promueve la separación de estructura y apariencia, lo que mejora la reutilización de código y la consistencia en los estilos.

/* Estructura */
.card {
padding: 20px;
border: 1px solid #ddd;
}

/* Apariencia */
.card--oscuro {
background-color: #333;
color: #fff;
}

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS divide los estilos en cinco categorías: base, layout, module, state y theme. Esto ayuda a mantener un código CSS organizado y fácil de manejar.

/* Base */
body {
font-family: Arial, sans-serif;
}

/* Layout */
.header, .footer {
background-color: #333;
color: #fff;
}

/* Module */
.card {
padding: 20px;
border: 1px solid #ddd;
}

/* State */
.is-hidden {
display: none;
}

/* Theme */
.theme-dark .card {
background-color: #333;
color: #fff;
}