¿Qué es un bloque?
Un bloque es una entidad independiente con significado propio.
Es una sección de código HTML, una parte del documento.
Un bloque puede ser simple o compuesto, es decir, que en su interior viven más bloques independientes.
Para nombrar un bloque, puedes utilizar letras, dígitos y guiones.
Pero tienes que tener en cuenta algunas restricciones a la hora de nombrar un bloque:
- No puedes usar mayúsculas.
- No puedes usar dos guiones bajos seguidos, porque está reservado para los elementos.
- Y tampoco puedes usar dos guiones seguidos, porque está reservado para los modificadores
Vamos a ver ejemplos, mira:
El HTML:
<!-- BLOQUE -->
<div class="block">
<!-- ... -->
</div>
<!-- BLOQUE -->
<div class="form">
<!-- ... -->
</div>
<!-- BLOQUE -->
<div class="tabs">
<!-- ... -->
</div>
<!-- BLOQUE -->
<div class="search-block">
<!-- ... -->
</div>
<!-- BLOQUE -->
<div class="custom-form">
<!-- ... -->
</div>
<!-- BLOQUE -->
<div class="another-block-custom">
<!-- ... -->
</div>Y este sería su SCSS:
// BLOQUE
.block{
/* ... */
}
// BLOQUE
.form{
/* ... */
}
// BLOQUE
.tabs{
/* ... */
}
// BLOQUE
.search-block{
/* ... */
}
// BLOQUE
.custom-form{
/* ... */
}
// BLOQUE
.another-block-custom{
/* ... */
}Vale.
Como puedes ver, son nombres simples, no tienes que complicarte demasiado.
La idea es que el nombre de clase te informe sobre lo que va a contener el bloque.
El primero ejemplo es teórico para ver la sintaxis pero los otros sí que son ejemplos reales.
Solo viendo por ejemplo, el bloque form,
¿qué información te está dando ya?
Te está diciendo que en su contenido hay un formulario.
Todo el formulario completo: con sus inputs, el típico textarea de comentarios, su botón de enviar, los mensajes de error… todo, debería estar dentro de este bloque.
¿Y el bloque tabs?
¿Que te está queriendo decir?
Solo con el nombre del bloque ya sabes que ahí dentro estará todo el contenido referente a las tabs.
Los nombres de bloque search-block, custom-form y another-block-custom también son correctos, cumplen con las condiciones necesarias.
Puedes usar un guión entre palabras si lo necesitas.
Y ahora mira estos ejemplos incorrectos:
<!-- BLOQUE -->
<div class="searchBlock">
<!-- ... -->
</div>
<!-- BLOQUE -->
<div class="search__block">
<!-- ... -->
</div>
<!-- BLOQUE -->
<div class="search--block">
<!-- ... -->
</div>¿Porqué son incorrectos?
Pues porque:
- searchBlock – es incorrecto porque no puedes usar mayúsculas
- search__block – es incorrecto porque no puedes usar dos guiones bajos, está reservado para los elementos
search--block– es incorrecto porque no puedes no usar dos guiones seguidos, está reservado para los modificadores.
Bien,
Ahora, para atacar los estilos del bloque en CSS, tienes que utilizar solo el selector de clase con el nombre del bloque.
Es decir, sin etiquetas html, ni IDs, ni selectores anidados, ni clases extras ni nada.
Esto es muy importante, porque necesitas atacar al bloque sin dependencia de otros bloques o elementos en una página.
Resumiendo, sólo puedes usar la clase del bloque como selector.
Algunos ejemplos correctos serían :
.block { color: # 042; }
.form { color: # 042; }
.slider { color: # 042; }
.tabs { color: # 042; }
.search-block{ color: # 042; }
.custom-form{ color: # 042; }Y ahora algunos ejemplos erróneos:
div.block { }
.tabs .button { }
#form{ }
.section > .tabs { }¿Porque son incorrectos?
Porque no estás usando SOLO la clase del bloque.
- div.block – no uses un tag html con clase
- .tabs .button – no uses selectores con anidación
- #form – no uses ids
- .section > .tabs – no uses selectores con anidación
Gracias a este principio, los bloques HTML son realmente independientes entre sí.
Además el CSS también está atacando sólo al bloque al que pertenece.
Esto te da muchísima seguridad a la hora de hacer modificaciones en la web.
Veamos en un ejemplo de la seguridad y tranquilidad que te da todo esto a la hora de editar la web.
Además quería enseñarte un ejemplo de bloque compuesto.
Como te dije antes, los bloques pueden ser simples o compuestos.
Tienes la posibilidad de añadir un bloque dentro de otro.
Hasta ahora habías visto bloques simples, pero ahora vamos a meter un bloque dentro de otro y ver qué pasa.
Te presento el siguiente caso:
El HTML:
<!-- EJEMPLO BLOQUE COMPUESTO -->
<div class="header">
<div class="col"></div>
<div class="col">
<div class="menu">blog about contact</div>
</div>
</div>Y su SCSS:
.header{
width: 100%;
display: flex;
background-color: lightblue;
padding: 20px;
outline: 1px solid darkblue;
}
.col{
width: 50%;
display: block;
background-color: lightgreen;
padding: 20px;
outline: 1px solid darkgreen;
}
.menu{
width: 100%;
display: block;
background-color: lightcoral;
padding: 20px;
outline: 1px solid darkred;
}Y esto se ve así:
header es un bloque independiente, col es otro bloque independiente, y menu es otro más.
No se molestan entre ellos.
Cada uno tiene sus propios estilos y no habrá ningún tipo de conflicto.
Si mueves el bloque menú y lo pones en la raíz, sigue funcionando todo perfectamente, los estilos no se rompen ni se modifican.
Mira, el HTML ahora quedaría así:
<!-- EJEMPLO BLOQUE COMPUESTO -->
<div class="header">
<div class="col"></div>
<div class="col">
</div>
</div>
<div class="menu">blog about contact</div>Y en la web, se vería así:
Lo único en lo que afecta el bloque col al bloque menu es el espacio que tiene disponible el bloque menu.
Tienes que tener en cuenta que el ancho máximo disponible del bloque menu ahora es diferente, por eso varía su ancho al moverlo a la raíz.
Antes tenía un máximo disponible de 50% que lo delimitaba otro bloque.
Concretamente el bloque col.
Al sacarlo del bloque col ya no está restringido por ese máximo. De ahí que cambie su ancho.
Vale,
¿Qué pasaría si metieras un bloque col dentro del otro bloque col?
¿Y si dentro de este último metes el bloque menu?
Pues vamos a verlo:
El HTML, sería así:
<!-- EJEMPLO BLOQUE COMPUESTO -->
<div class="header">
<div class="col">
<div class="col">
<div class="menu">blog about contact</div>
</div>
</div>
</div>Y en la web, se vería así:
¿Ves? Nada se «rompe», todo fluye, todo es cómodo.
Y esto no es nada.
¡Aún hay mucho más!
Anterior clase del curso: ¿Qué es BEM CSS?
Este artículo está extraído de una de las clases del curso de Udemy sobre la metodología BEMIT CSS
Aquí tienes otro artículo donde hablo sobre BEMIT CSS