Una clase de utilidad se forma de la siguiente manera:
`u-utility-name`
Por ejemplo:
`u-full-width`
`u-block`
Una clase de utilidad es una clase independiente, es decir, no es ni bloque ni elemento ni modificador.
Es una clase especial que simplemente nos añade algo muy concreto.
Las clases de utilidad son las clases más específicas de nuestro proyecto.
Es bastante común que las declaraciones de estas clases tengan !important para garantizar que superan todos los estilos heredados.
Estas clases se deben usar como último recurso para abordar alguna circunstancia muy especial.
Por ejemplo, teníamos estas clases de CSS y queremos convertirlas a clases del tipo utilidad:
.none{
display: none!important;
}
.tar{
text-align: right!important;
}Si las transformamos al sistema BEMIT, quedaría así:
.u-none{
display: none!important;
}
.u-tar{
text-align: right!important;
}No deberías tener que modificar estas clases ya que su declaración es muy específica y concreta.
Este tipo de clases apenas deberías verlas en todo tu proyecto.
A veces hay proyectos en que yo no uso ni una clase de utilidad y te recomiendo que tú también intentes no usar esta capa.
Cuando decidas que una clase es una utilidad, tendrás que añadir el prefijo `u-` a su nombre.
Esto nos servirá para saber que la clase está definida cómo utilidad solo viendo su nombre.
Veamos un ejemplo de uso de clase de utilidad.
El código HTML sería así:
<div class="c-form">
<div class="c-form__field">
<label class="c-form__label u-tar">Name</label>
<input class="c-form__input" type="text" />
</div>
</div>Si te fijas, en el nodo `label` está la clase de utilidad `u-tar` añadida.
Y esa utilidad, en el SCSS vivirá en la capa de utilidades de nuestro sistema de carpetas.
¿Qué ganamos al añadir ese prefijo?
Pues para empezar, identificar que esa clase es una utilidad con solo ver su nombre.
Antes no podías saber si una clase era objeto, componente, utilidad o cualquier otra cosa.
Ahora que sabes que es una utilidad, sabes que es una clase muy específica y con mucha fuerza de selector.
Sólo debe ser usada en casos muy concretos.
Además, de un vistazo, también sabes en qué capa vive y, por si fuera poco, también sabrás en qué archivo están definido sus estilos.
Al ser una utilidad, su estilo estará definido en el archivo `_utilities.scss`
Vale, ahora imagina que tú has salido a comer y yo edito tu proyecto y al volver te encuentras esto:
<div class="c-form">
<div class="c-form__field">
<label class="c-form__label u-tar u-uppercase">Name</label>
<input class="c-form__input" type="text" />
</div>
</div>¿Dónde pueden estar definido los estilos de esa clase `u-uppercase` que te he añadido yo al código?
Lo primero, identificamos que es una utilidad, gracias al prefijo `-u`, por lo que ya sabes la carpeta de tu sistema en la que estará el estilo definido: en la carpeta de utilidades.
¿Y en qué archivo?
Pues en nuestro sistema hemos definido que todas las utilidades que tengamos, que deberían ser pocas o ninguna, estarán en el archivo `_utilities.scss`
Con ese nombre nos está diciendo que esa clase está poniendo en mayusculas sí o sí el texto.
.u-none{
display: none!important;
}
.u-tar{
text-align: right!important;
}
.u-uppercase{
text-transform: uppercase!important;
}
Y aún así, de no encontrar la clase, tan solo tienes que buscar en tu carpeta de utilidades el nombre de clase, que en nuestro caso, es el archivo `_utilities.scss`
No hay más sitios donde buscar, tiene que estar en la capa de utilidades.
Esta clase es parte de un curso que he creado en Udemy, si te interesa profundizar más, en este artículo te cuento de que va este curso: metodología BEMIT CSS
Si te ha gustado el artículo, apóyame para que traiga más contenido como este.
Dale a like al vídeo y comenta, suscríbete al canal, pero sobretodo, comparte con tus amigos front end, quizás alguno quiera aplicar esta metodología en alguna web.
Nos vemos muy pronto.
Un abrazo y … ¡a maquetar!