Creando Soluciones Web que Conectan y Inspiran
Cómo Hacer que Tu Página Web Luzca Genial: Usando BEM en CSS
¡Hola! Hoy vamos a aprender cómo hacer que las páginas web sean bonitas y ordenadas usando algo llamado BEM en CSS. Imagina que estamos construyendo una casita de bloques. Cada bloque tiene una función y un lugar específico, y eso es lo que hace que la casita se vea bien y no se caiga. BEM es como un sistema para organizar esos bloques en una página web.
¿Qué es BEM?
BEM son las iniciales de Block, Element, Modifier (Bloque, Elemento, Modificador). Piensa en BEM como un juego de construcción:
- Block (Bloque): Es como una caja grande. Por ejemplo, imagina que estamos construyendo una caja para nuestros juguetes. Esta caja es nuestro «bloque» en la página web.
- Element (Elemento): Dentro de la caja, hay juguetes individuales. Cada juguete es un «elemento» del bloque. En nuestra página web, los elementos son partes más pequeñas del bloque, como botones o títulos.
- Modifier (Modificador): A veces, queremos cambiar cómo se ve la caja o los juguetes. Quizás pintamos la caja de rojo o le ponemos un sticker. Eso es lo que hace el «modificador» en BEM. Nos ayuda a cambiar un poco el aspecto de nuestros bloques y elementos.
¿Por Qué Usar BEM?
Usar BEM es como tener un plan para construir tu casita de bloques. Aquí te contamos por qué es útil:
- Organización: Te ayuda a mantener todo en orden. Así, si quieres cambiar algo, como el color de un botón, sabes exactamente dónde buscar.
- Facilidad: Hace que tu código sea más fácil de leer. Como tener instrucciones claras para construir tu casita de bloques.
- Evitar Errores: Con BEM, es más difícil que los bloques se mezclen o se rompan. Todo tiene su lugar y su nombre.
¿Cómo Usar BEM?
Imagina que tienes una caja de juguetes con un botón en ella. Aquí está cómo podrías usar BEM:
- Block (Bloque):
caja-juguetes– Esta es nuestra caja. - Element (Elemento):
caja-juguetes__botón– Este es el botón dentro de la caja. - Modifier (Modificador):
caja-juguetes__botón--rojo– Este es un botón rojo en lugar de uno normal.
Ejemplo de Código con BEM
Imagina que estamos creando una página web con una tarjeta que tiene un título, una imagen y un botón. Aquí está cómo podríamos organizar el código usando BEM:
Mostrar Código HTML
<img src="imagen.jpg" alt="Imagen" class="tarjeta__imagen">
<h2 class="tarjeta__titulo">¡Hola Mundo!</h2>
<button class="tarjeta__botón tarjeta__botón--primario">Leer Más</button>
</div>
Mostrar Código CSS
.tarjeta {
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
width: 300px;
text-align: center;
}
/* Estilos para el elemento 'imagen' dentro del bloque 'tarjeta' */
.tarjeta__imagen {
max-width: 100%;
border-radius: 4px;
}
/* Estilos para el elemento 'titulo' dentro del bloque 'tarjeta' */
.tarjeta__titulo {
font-size: 24px;
margin: 16px 0;
}
/* Estilos para el elemento 'botón' dentro del bloque 'tarjeta' */
.tarjeta__botón {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
/* Estilos para el modificador 'primario' del elemento 'botón' */
.tarjeta__botón--primario {
background-color: #28a745;
}
Explicación:
.tarjetaes el bloque. Es la caja que contiene todo..tarjeta__imagen,.tarjeta__titulo, y.tarjeta__botónson elementos dentro del bloque. Cada uno tiene su propio estilo..tarjeta__botón--primarioes un modificador que cambia el color del botón para que sea diferente del botón normal.