CSS es un lenguaje fácil de aprender (e implementar) para crear un hermoso sitio web. Sin embargo, cuando se trata de implementar CSS a escala, no es tan simple. Para sitios web y aplicaciones a gran escala, CSS se vuelve realmente difícil de escribir.
La especificidad de CSS es paralizante y, por lo tanto, usar !important a menudo es inevitable y eventualmente se suma al tamaño del archivo CSS.
Bueno, la buena noticia es que los desarrolladores web han ideado varias metodologías para ayudar a escribir y organizar mejor CSS, como BEM, OOCSS, SMACSS e ITCSS. Hemos cubierto algunas de estas metodologías en nuestras publicaciones anteriores, Comprender las metodologías de escritura de CSS e Introducción a ITCSS para desarrolladores web.
En esta publicación, vamos a ver otra metodología llamada CSS de utilidad primeroque, en el momento de escribir este artículo, está ganando terreno rápidamente entre la comunidad de desarrolladores web.
Vamos a ver cómo funciona.
CSS que prioriza la utilidad: cómo funciona
Tradicionalmente, escribiremos una clase CSS que puede contener los estilos para el colores, tamaño, fronteras, márgenesy oscuridad como abajo:
.foo {
margin: 0 auto;
padding: 10px;
border-radius: 4px;
box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);
background-color: blue;
}
Con Utility-first CSS, cada clase es una composición CSS de bajo nivel. En lugar de crear una clase que aplique un montón de reglas CSS diferentes, solo contendrá reglas muy específicas. Si me gustaría agregar una esquina redondeada, llamémoslo .rounded-sm:
.bg-white {
background-color: white;
}
.rounded-sm {
border-radius: 4px;
}
.shadow-md {
box-shadow: 0 10px 30px -2px rgba(0, 0, 0, 0.1);
}
Si desea aplicar un color de fondo blanco, un radio de borde pequeño y una sombra, deberá agregar estas tres clases.
<div class="bg-white round-sm shadown-md"></div>
Al principio, esto puede parecer un desastre. Como necesita agregar más estilos, deberá agregar más clases al elemento div. Pero una vez que haya construido algo de esta manera, notará algunos de los beneficios, ya que le permite:
- Para crear un estilo personalizado sin escribir un CSS personalizado así como sin tener que crear nombres de clase personalizados. Como nombrar una clase es difícil, especialmente en un sitio web o aplicación a gran escala, y a menudo terminamos dando a nuestras clases nombres ambiguos como
.box,.card,.containeretc. - Para hacer un cambio sin preocuparse por romper algo de las otras páginas o componentes, lo que hace que el CSS del sitio web sea más fácil de mantener.
El CSS de utilidad primero no es un paradigma completamente nuevo. Tiene otro nombre llamado CSS atómico. Sin embargo, la comunidad web no aceptó la idea del todo, por lo que no obtuvo suficiente tracción para convertirlo en un paradigma popular para escribir CSS.
Un nuevo marco llamado CSS viento de cola surgió que trajo esta idea de Utility-first CSS, y de repente tiene sentido. Entonces, ¿qué hace que Tailwind CSS sea diferente?
CSS viento de cola
Tailwind CSS es creado por Adam Wathan. Se envía como un módulo NPM. Podemos instalarlo fácilmente escribiendo este comando a continuación:
npm install tailwindcss
Además de las clases de utilidad, Tailwind viene con características prácticas como su directiva @tailwind y @apply.
Los siguientes códigos importarán los estilos incorporados de Tailwind: los estilos básicos que abordan la consistencia del estilo predeterminado del navegador similar a Normalizar.csslos componentes y las utilidades.
@tailwind base; @tailwind components; @tailwind utilities;
El @apply directiva le permite componer diferentes estilos. Esta directiva será útil cuando tenga componentes con clases de utilidad repetitivas.
Un ejemplo común de esto es para un botón. Es prácticamente más conveniente agregar una clase .btn como a continuación en lugar de agregar un montón de clases diferentes.
<button class="btn">Button</button>
En este caso, el @apply es útil para juntar estos estilos en una sola clase .btn.
.btn {
@apply bg-blue-400 text-white font-bold py-2 px-4 rounded;
}
Optimización del tamaño del archivo
Otra cosa buena de TailwindCSS es que funciona muy bien con PurgeCSS para eliminar estilos no utilizados en su sitio web. Y dado que rara vez creará sus clases y CSS personalizados, el resultado de su hoja de estilo puede ser significativamente pequeño.
¡Firefox Send puede enviar su hoja de estilo a solo 4.7kb (comprimido con gzip)!.
Integración del editor de código
Si usa Visual Studio Code, puede aumentar aún más la productividad con la extensión: TailwindCSS Intellisense. Esta extensión permite autocompletar para las clases TailwindCSS mientras escribe.
Admite varios tipos de archivos, incluidos HTML, Vue y PHP.
Estas son algunas de las ventajas clave de usar TailwindCSS en comparación con otros marcos CSS. En lugar de cargar un montón de hojas de estilo, Tailwind CSS viene como un módulo NPM.
Proporciona configuraciones que nos permitirán producir CSS que satisfaga nuestras necesidades y podría resultar en una hoja de estilo más pequeña.
Terminando
Cambiar la forma en que escribimos CSS no siempre es fácil. Significa que tenemos que desaprender lo que ya estamos acostumbrados. Al principio, Utility-first CSS puede parecerte extraño, pero como se mencionó, una vez que te acostumbres a escribir CSS de esta manera, verás que tu productividad se multiplica.
¿Ha intentado usar Utility-first CSS en su proyecto? Háganos saber acerca de su experiencia en la sección de comentarios a continuación.