CSS ha recorrido un largo camino, pero las herramientas que lo rodean no lo han hecho hasta ahora.
Si cree que escribir CSS es como luchar contra monstruos en un pozo de alquitrán, no está solo. Si bien CSS es una de las tecnologías más fundamentales que impulsan la Web, no es un marco o lenguaje de programación adecuado per se. Como resultado, tan pronto como su proyecto comienza a hacerse más prominente, también lo hace el desorden: las reglas de selección parecen estar por todas partes y es difícil encontrar qué es dónde; a medida que incluye fuentes, CSS externo, JS y otros activos en sus páginas, el tamaño final del paquete parece salirse de control, y se pregunta dónde se perdieron los ideales de los front-end rápidos y fáciles de usar.
Pero no tiene por qué ser así. Hoy en día, las herramientas en torno a CSS han evolucionado a un nivel en el que el flujo de trabajo no solo se puede controlar, sino que también se puede disfrutar. En este artículo, voy a hablar sobre cinco de estas herramientas CSS que he encontrado de gran valor en mi trabajo. He evitado conscientemente incluir herramientas de “juguete” como generadores de CSS, generadores de menús, etc., porque crean más problemas de los que resuelven.
¡Se acerca el tren CSS! ¡Vamos! 😛 😀
PostCSS
Si le encanta JavaScript, le encantaría la idea de que ahora podemos agregar y controlar CSS a través de JavaScript. Y esa es exactamente la habilidad que PostCSS proporciona.
Sin embargo, no se trata simplemente de azúcar de sintaxis basada en JavaScript sobre CSS. PostCSS reúne varios paquetes/características potentes, lo que da como resultado un flujo de trabajo mucho más agradable y sencillo cuando se trata de CSS. Por ejemplo:
- Los prefijos de proveedores se agregan automáticamente en función de la propiedad que esté utilizando.
- La capacidad de detectar qué funciones CSS se pueden usar en el navegador actual.
- Usando las actualizaciones de sintaxis próximas, aún por lanzar, pero muy poderosas para CSS.
- Una cuadrícula receptiva que es lo más flexible posible.
Creo que no le haré justicia a PostCSS si no incluyo el ejemplo de cuadrícula. Así que, aquí vamos. Algo tan simple como esto:
div se convierte en un sistema CSS completo con casi todos los casos extremos atendidos:
div
div:nth-child(1n)
div:last-child
div:nth-child(3n)
div:nth-child(3n + 1) Dado que es una cosa impulsada por JS, PostCSS no es exactamente fácil de configurar, especialmente si es un diseñador y no ha tenido mucho que ver con módulos, paquetes y el mundo npm en general. Dicho esto, el potencial de PostCSS en su trabajo es enorme y no debe pasarse por alto.
PurgarCSS
¿Te encanta el flujo de trabajo moderno basado en el marco frontend pero estás frustrado porque traen demasiado equipaje? En caso afirmativo, PurgeCSS es su amigo, al menos en lo que respecta a CSS.
Para aquellos que quizás no sepan cuál es el problema: aquí hay un resumen rápido. Cuando crea aplicaciones de una sola página utilizando marcos front-end como React, Angular, Vue, etc., pasa por lo que se llama un «proceso de construcción». Esencialmente, codifica todo su CSS, JS, SASS, etc., en archivos separados (organizándolos como le resulte más intuitivo), pero una vez que haya terminado, le dice al empaquetador que «construya» la cosa. Lo que hace es leer todo el código fuente que ha escrito, aplicarle varios filtros (minificación, ofuscación/auglificación, etc.) y escupir la salida en archivos individuales, generalmente «app.js» para todo el JavaScript, y “app.css” para todo el CSS. Estos archivos, junto con un «index.html» delgado, es todo lo que necesita para ejecutar el front-end de la aplicación. La desventaja es que dado que todo se incluye en estos archivos finales, su tamaño a menudo se extiende más allá de lo permitido para un tiempo de respuesta rápido; por ejemplo, no es raro ver un «app.js» que tiene más de 500 KB.
PurgeCSS se agrega como parte de su flujo de trabajo de compilación y evita que el CSS no utilizado se incluya en el resultado final. Un caso de uso típico es Bootstrap: es una biblioteca de tamaño mediano con varias clases de interfaz de usuario para diferentes componentes. Si su aplicación usa, digamos, el 10 % de las clases de Bootstrap, el 90 % restante es el único exceso en su archivo CSS final. Pero gracias a PurgeCSS, estos archivos CSS no utilizados pueden identificarse y evitarse en el proceso de compilación, lo que da como resultado archivos CSS finales mucho más pequeños (la reducción de tamaño de 5 a 6 veces es bastante normal).
Entonces, adelante, «purga» el CSS innecesario con PurgarCSS! 🙂
Viento de cola
Viento de cola es un marco CSS, pero va tan en contra de la corriente que pensé en incluirlo aquí entre las herramientas CSS. Si odias el CSS en línea (¡¿quién no?!), lo más probable es que Tailwind te haga retroceder con horror la primera vez que lo encuentres. Veamos por primera vez cómo podrías codificar un formulario típico usando Tailwind CSS:
<div class="w-full max-w-xs">
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
Username
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
Password
</label>
<input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
<p class="text-red-500 text-xs italic">Please choose a password.</p>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
Sign In
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
Forgot Password?
</a>
</div>
</form>
<p class="text-center text-gray-500 text-xs">
©2019 Acme Corp. All rights reserved.
</p>
</div>“¡¿Es esto una broma o qué?! ¿Qué son todas esas pequeñas clases molestas? Tras una inspección más cercana, ¿por qué diablos estoy configurando los márgenes, el relleno y el color directamente junto con el HTML? ¿Esto es 2019 o qué?”.
Se esperan pensamientos como estos. Lo sé porque sentí lo mismo e inmediatamente cerré la tapa de Tailwind. Fue solo hasta más tarde que me encontré con un podcast en el que el invitado había renovado un sitio web moderno y de tamaño decente en Tailwind que comencé a prestar atención.
Antes de continuar, considere estas preguntas:
- ¿Estás cansado de memorizar las clases de framework estándar y sus funciones para que puedas personalizar tus diseños a tu gusto? Un buen ejemplo es cambiar la apariencia y el comportamiento de la barra de navegación de Bootstrap.
- ¿Crees que los marcos populares como Bootstrap son excesivos y tratan de hacer mucho más de lo que deberían?
- ¿Te encuentras mezclando marcos porque quieres lo mejor de todos los mundos?
- ¿Le gusta tener más control sobre sus diseños y, sin embargo, encuentra abrumadora la experiencia Vanilla CSS?
Si la respuesta a cualquiera de estas es un «sí», necesita Tailwind desesperadamente. Ahora echemos un vistazo a lo que es Tailwind y lo que hace.
Tailwind es lo que se llama un CSS de utilidad primero, que difiere de lo que hacemos en nuestros flujos de trabajo cotidianos: CSS semántico. La diferencia entre el CSS semántico y el CSS utilitario es que el primero trata de agrupar los elementos de estilo por el nombre de las secciones visuales que aparecen en la página. Entonces, si tiene un menú de navegación, tarjetas, carrusel, etc., en una página, la forma semántica de hacer las cosas sería agrupar las reglas de estilo CSS en clases como .nav, .card, .carouseletc., que sus subsecciones etiquetaron en consecuencia (por ejemplo, .card-body, .card-footer, etc.). Este es, con mucho, el enfoque más común de CSS, y todos estamos familiarizados con él a través de marcos como Bootstrap, Foundation, Bulma, UI Kit, etc.
Por otro lado, el estilo de «utilidad» de escribir clases de nombres CSS precisamente de acuerdo con su función: una clase que controla el margen para los lados superior e inferior se nombrará como .margin-y-medium y se puede aplicar en cualquier parte del marcado HTML donde se necesite este margen. Si bien esto introduce un poco de arrastre en el nombre de la clase (solo eche un vistazo rápido al código que compartí anteriormente o a la captura de pantalla, ¡muchas clases!), La intención del CSS es muy clara: no necesita saltar de un lado a otro entre la documentación, su CSS y su HTML para descubrir los nombres correctos y el efecto correcto.
Es una forma de trabajar muy liberadora, pero también hay un problema: debe tener los conceptos básicos de CSS en su lugar (incluidos conceptos modernos como Flexbox). Esto se debe a que Tailwind no ofrece estilos listos para usar para ninguno de los componentes de su página, y depende de usted construir los estilos a partir de los componentes básicos proporcionados. Otro problema es el de la configuración: Tailwind le permite agrupar varias clases de CSS en lo que se llama componentes, pero se hace a través de JavaScript y requiere un cargador de módulos y un paquete como Webpack.
Todo dicho y hecho, Tailwind es una nueva forma polarizadora y llamativa de diseñar, y atraerá a aquellos que anhelan una mayor simplicidad y control.
Hablar con descaro a
A pesar de Hablar con descaro a existe desde hace mucho tiempo, lo he incluido aquí porque los desarrolladores aún no saben lo útil que es. Stylistically Awesome Style Sheets (o SASS) es un superconjunto de CSS que se desarrolló para domar la locura que se cuela en el proyecto una vez que CSS crece más allá de unas pocas líneas.
Imagínate esto: has recorrido un largo camino escribiendo el CSS para tu proyecto. Está utilizando algunos colores, ha descubierto algunos márgenes razonables para varios divs, estilos de fuente, etc. Excepto que ahora te das cuenta de que no todo encaja tan bien. Tal vez le gustaría probar márgenes más grandes para todas las secciones, tarjetas y botones. Bueno, ¿ahora qué? Incluso la sola idea de tener que buscar y reemplazar a través de su archivo CSS gigante es suficiente para dar un dolor de cabeza. Todos lo hemos hecho, y todos sabemos lo propenso a errores que es. Sass resuelve este problema introduciendo variables:
Cuando escribimos HTML, anidamos elementos dentro de otros elementos. Pero al escribir CSS, tenemos que escribir una jerarquía plana de reglas, lo que dificulta «ajustar» mentalmente el CSS en el HTML. Con Sass, puede imitar la estructura de la página dentro de sus archivos de estilo:
Todo esto ni siquiera empieza a rasque la superficie de las ventajas que ofrece Sass: diseño modular, incluir archivos, mixins, herencia. . . La lista sigue y sigue. Claro, necesitará aprender un flujo de trabajo del compilador Sass e incluirlo en el suyo, pero en mi opinión, ese par de horas dedicadas es una inversión que le pagará una y otra vez.
Borbón
Borbón es un conjunto de herramientas Sass puro que es legible por humanos y liviano. Si está utilizando Sass, debería considerar usar esta herramienta, ya que es gratuita y proporciona métodos concisos de una sola línea para realizar diversas tareas.
Por ejemplo, para establecer colores de borde para los bordes específicos de un cuadro, solo necesita agregar el siguiente código.
.element
// CSS Output
.element Filtros CSS
Dado que los diseñadores web (y los desarrolladores de UI, aunque me pregunto en qué se diferencian estos dos términos 🤔) usan editores de texto simples, o como es el caso en estos días, codifican directamente desde las herramientas de desarrollo de Chrome, rara vez escuchan o se benefician de un pelusa Por otro lado, los programadores que usan buenos editores de texto como VS Code, Sublime Text u otros IDE conocen muy bien esta herramienta ya que es algo natural para ellos. De todos modos, el punto es que si eres uno de esos desarrolladores de CSS que se ahogan en CSS desordenado, podrías beneficiarte de un pelusa.
En pocas palabras, un linter es un programa que verifica su código en busca de errores e inconsistencias. Lo hace con la ayuda de un conjunto de reglas que tiene para descubrir qué está mal y qué es inconsistente. Los buenos linters se integran con IDE y editores de código y se pueden configurar para ejecutarse cada vez que guarde el archivo fuente. También lo ayudan con las vistas previas de color, los errores y la finalización automática mientras redacta sus archivos CSS:
Pero aquí está la mejor parte: si sigue un estilo y formato CSS en particular, puede ajustar el linter a su gusto. Esto garantiza que el CSS dentro de un proyecto siga la misma guía de estilo (el linter también se puede configurar para formatear automáticamente el archivo cada vez que se guarda/confirma el código fuente). Entonces, ya sea que esté trabajando en equipo o solo, un linter siempre es una gran adición al flujo de trabajo de su proyecto.
Conclusión
Estoy seguro de que ahora está convencido de que el desarrollo de CSS moderno está muy lejos del enfoque de pastoreo de gatos del pasado. 🙂
Dicho esto, admitiré algo nuevamente, incluso si sueno como un disco rayado: algunas de las herramientas que he cubierto en este artículo son no fácil de configurar, especialmente si no está en términos amistosos con el npm ecosistema. Pero antes de que te sientas asqueado y desvíes la cara, dime esto: ¿fue fácil CSS cuando eras principiante? aprendiendo ¿él? ¿Fue fácil aprender a centrar un div, dominar los cambios de humor de floats, ¿Etcétera? Del mismo modo, las herramientas que describí aquí tienen cierta curva de aprendizaje, pero valen la pena.
Honestamente, una vez que hayas comenzado a experimentar los resultados, te castigarás por no haberlo hecho antes. ¡Y no subestimemos la importancia de CSS que es modular, simple y bien organizado!
Relacionado:
