Las 5 mejores herramientas CSS para desarrolladores y diseñadores web

CSS ha recorrido un largo camino, pero las herramientas a su alrededor no lo han hecho hasta ahora.


Si sientes que escribir CSS es como luchar contra monstruos en un pozo de alquitrán, no estás solo. Si bien CSS es una de las tecnologías más fundamentales que impulsa la Web, no es un lenguaje de programación o un marco de trabajo adecuados per se. Como resultado, tan pronto como su proyecto comienza a hacerse más prominente, también lo hace el desorden: las reglas del selector 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 irse de las manos 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 domesticar sino que también se puede disfrutar. En este artículo, voy a hablar sobre cinco herramientas CSS que he encontrado de gran valor en mi trabajo. He evitado conscientemente, incluyendo herramientas de “juguete” como generadores CSS, generadores de menú, etc., porque crean más problemas de los que resuelven.

¡Se acerca el tren CSS! ¡Vamonos! �� ��

PostCSS

Si amas JavaScript, te encantará 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 un azúcar de sintaxis basado en JavaScript sobre CSS. PostCSS envuelve varios paquetes / funciones potentes juntos, lo que resulta en un flujo de trabajo mucho más agradable y fácil cuando se trata de CSS. Por ejemplo:

  • Los prefijos de proveedor se agregan automáticamente según la propiedad que esté utilizando.
  • La capacidad de detectar qué funciones CSS se pueden usar en el navegador actual.
  • Usando las próximas actualizaciones de sintaxis de CSS, aún por publicar, pero muy potentes.
  • Una cuadrícula receptiva que es tan flexible como se pone.

Creo que no le haré justicia a PostCSS si no incluyo el ejemplo de la cuadrícula. Así que, aquí vamos. Algo tan simple como esto:

div {
columna perdida: 1/3
}

se convierte en un sistema CSS completo con casi todos los casos límite atendidos:

div {
ancho: calc (99.9% * 1/3 –
(30 px – 30 px * 1/3));
}
div: nth-child (1n) {
flotador izquierdo;
margen derecho: 30px;
claro: ninguno;
}
div: último hijo {
margen derecho: 0;
}
div: nth-child (3n) {
margen derecho: 0;
flotar derecho;
}
div: nth-child (3n + 1) {
Limpia los dos;
}

Dado que es una cosa impulsada por JS, PostCSS no es exactamente fácil de configurar, especialmente si eres un diseñador y no has 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.

PurgaCSS

¿Le encanta el flujo de trabajo basado en el marco de la interfaz moderna pero está frustrado de que traigan demasiado equipaje? En caso afirmativo, PurgeCSS es tu 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 frontales como React, Angular, Vue, etc., pasa por lo que se llama un “proceso de compilación”. Esencialmente, codifica todos sus CSS, JS, SASS, etc., en archivos separados (organizándolos como lo encuentre más intuitivo), pero una vez que haya terminado, le dice al paquete que “compile” la cosa. Lo que hace es leer todo el código fuente que ha escrito, aplicarle varios filtros (minificación, ofuscación / uglificación, etc.) y escupir la salida en archivos individuales, generalmente “app.js” para todo el JavaScript, y “App.css” para todos los CSS. Estos archivos, junto con un flaco “index.html”, 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 supera los 500 KB!

PurgeCSS se agrega como parte de su flujo de trabajo de compilación y evita que el CSS no utilizado se agrupe en la salida 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, por ejemplo, el 10% de las clases de Bootstrap, el 90% restante es la única extensión en su archivo CSS final. Pero gracias a PurgeCSS, dichos archivos CSS no utilizados pueden identificarse y evitarse en el proceso de compilación, lo que resulta en archivos CSS finales mucho más pequeños (la reducción de tamaño de 5-6 veces es bastante normal).

Entonces, adelante, “purgue” CSS innecesario con PurgaCSS! ��

Viento de cola

Viento de cola es un marco CSS, pero va tanto contra la corriente que pensé que lo incluiría aquí entre las herramientas CSS. Si odias el CSS en línea (¡¿quién no ?!), Tailwind probablemente te hará retroceder con horror la primera vez que lo encuentres. Veamos por primera vez cómo codificar un formulario típico con Tailwind CSS:

Nombre de usuario

Contraseña

Porfavor elija una contraseña.

Registrarse


Se te olvidó tu contraseña?

© 2019 Acme Corp. Todos los derechos reservados.

“¡¿Esto es una broma o qué ?! ¿Cuáles son todas esas pequeñas clases molestas? Tras una inspección más cercana, ¿por qué demonios estoy configurando los márgenes, el relleno y el color directamente junto con el HTML? ¿Es este 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 encontré un podcast donde el invitado había rehecho 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 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 e intentan 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, la experiencia de CSS vainilla le resulta abrumadora??

Si la respuesta a cualquiera de estos es un “sí”, necesita mucho Tailwind. Ahora echemos un vistazo a lo que es Tailwind y lo que hace.

Tailwind es lo que se llama un CSS de primera utilidad, que difiere de lo que hacemos en nuestros flujos de trabajo cotidianos: CSS semántico. La diferencia entre CSS semántico y CSS de utilidad es que el primero intenta agrupar 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, .carousel, etc., que sus subsecciones etiquetadas en consecuencia (por ejemplo, .card-body, .card-footer, etc.). Este es, con mucho, el enfoque más común para 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 denominará .margin-y-medium y se puede aplicar en cualquier parte del HTML marcado donde se necesita este margen. Si bien esto introduce un poco de un cambio de nombre de clase (solo eche un vistazo rápido al código que compartí anteriormente o en la captura de pantalla, ¡muchas clases!), La intención del CSS es clara: no necesita saltar entre la documentación, su CSS y su HTML para descubrir los nombres correctos y el efecto correcto.

Es una forma de trabajo muy liberadora, pero también hay un problema: debe tener sus 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 ningún componente de su página, y depende de usted construir los estilos a partir de los bloques de construcción dados. Otro problema es el de la configuración: Tailwind le permite agrupar varias clases de CSS en lo que se llaman componentes, pero se realiza a través de JavaScript y requiere un cargador de módulos y un paquete como Webpack.

Dicho y hecho, Tailwind es una forma nueva y llamativa de estilizar, y atraerá a aquellos que anhelan una mayor simplicidad y control..

Saas

A pesar de que Hablar con descaro a ha existido durante 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 dominar la locura que se arrastra en el proyecto una vez que CSS crece más allá de unas pocas líneas.

Imagínese esto: ha recorrido un largo camino escribiendo el CSS para su proyecto. Está utilizando algunos colores, ha descubierto algunos márgenes sensibles para varios divs, estilos de fuente, etc. Excepto que ahora te das cuenta de que no todo encaja bien. Tal vez le gustaría probar márgenes más grandes para todas las secciones, tarjetas y botones. Bueno, ahora que? Incluso la sola idea de tener que buscar-reemplazar a través de su archivo CSS gigante es suficiente para causar un dolor de cabeza. Todos lo hemos hecho, y todos sabemos cuán propenso a errores 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 hace que sea difícil “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 comienza a rayar la superficie de las cosas 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 gastadas es una inversión que le pagará una y otra vez!

Linters CSS

Dado que los diseñadores web (y los desarrolladores de UI, aunque me pregunto cómo estos dos términos son diferentes ��) usan editores de texto simples, o como es el caso en estos días, el código directamente de las herramientas de desarrollo de Chrome, rara vez escuchan o se benefician de un linter. Por otro lado, los programadores que usan buenos editores de texto como VS Code, Sublime Text u otros IDEs conocen muy bien esta herramienta, ya que es una segunda naturaleza para ellos. De todos modos, el punto es que si usted es uno de esos desarrolladores de CSS que se ahoga en CSS desordenado, podría beneficiarse de una interferencia.

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 IDEs y editores de código y pueden configurarse para ejecutarse cada vez que guarde el archivo fuente. También te ayudan con vistas previas de color, errores y autocompletado mientras compones tus archivos CSS:

Pero esta es la mejor parte: si sigue un estilo y formato CSS en particular, puede ajustar el linter a su satisfacción. Esto asegura 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 guarde / confirme el código fuente). Entonces, ya sea que trabaje en equipo o solo, un linter siempre es una gran adición al flujo de trabajo de su proyecto.

Conclusión

Ahora estoy seguro de que está convencido de que el desarrollo moderno de CSS está muy lejos del enfoque de pastorear a los 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 no son fáciles de configurar, especialmente si no está en términos amigables con el ecosistema npm . Pero antes de que te sientas disgustado y vuelvas la cara, dime esto: era CSS fácil cuando eras el primero aprendizaje ¿eso? ¿Fue fácil aprender a centrar un div, dominar los cambios de humor de las carrozas, y así sucesivamente? Del mismo modo, las herramientas que describí aquí tienen cierta curva de aprendizaje, pero valen la pena..

Honestamente, una vez que haya comenzado a experimentar los resultados, se arrepentirá por no hacerlo antes. Y no subestimemos la importancia de CSS que es modular, eficiente y bien organizado!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map