Cada vez más, una decisión de la pila de tecnología que una vez se sintió correcta comienza a mostrar sus límites, como darse cuenta de lo ineficiente que es un tornillo después de usar una perforación de energía. Durante años, nos sirvió bien, ofreciendo estilos amplios, temas dinámicos y control total dentro de nuestros componentes React. A partir de ese momento, se hizo evidente que a Styled Components Tailwind CSS change was overdue. Este post es una ruptura de nuestro cambio de Styled Components a Tailwind CSS, por qué hicimos el movimiento, cómo me acerqué a la transición, y cómo ha parecido el proceso hasta ahora.Si está trabajando con estilos legados o considerando Tailwind para sus propios proyectos, espero que esto le dé algo útil (o al menos relativo) para irse con. Por qué HackerNoon originalmente usó componentes estilizados No formé parte del equipo cuando Styled Components fue elegido por primera vez para manejar nuestro CSS, pero en ese momento, , y Styled Components hizo mucho sentido para la arquitectura front-end de HackerNoon. Tailwind CSS hadn’t even been released Permitió a los desarrolladores escribir CSS directamente dentro de JavaScript, haciendo que los componentes estén completamente independientes. Las capacidades de diseño dinámico, el soporte de temática integrado y la capacidad de pasar props directamente a los estilos funcionaron especialmente bien para la amplia variedad de páginas y diseños que estábamos construyendo. . el encapsulated, reusable, and, at the time, thought to be easier to maintain Styled Components served HackerNoon well ¿Qué nos hizo considerar el cambio a Tailwind? Con el tiempo, nuestra base de código creció, así como la complejidad de los estilos de gestión. Los componentes estilizados nos dieron flexibilidad, pero eso vino a un costo: , de , y a Cada vez era más difícil rastrear estilos o reutilizarlos de manera efectiva sin duplicar el código. larger bundle sizes runtime performance hits cluttered component structure También notamos que muchos de nuestros estilos se estaban repitiendo a través de componentes. El enfoque de utilidad primero se sintió como una forma de simplificar todo, desde el diseño hasta la receptividad e incluso el tema. Tailwind CSS Pero seamos reales: para , la idea de refactorizar una base de código masiva Sin embargo, no podíamos ignorar lo ampliamente que Tailwind estaba siendo adoptado en la comunidad de desarrolladores. small dev team like HackerNoon’s line by line Cómo hice el switch ¿La parte más difícil de este cambio? Setup. La instalación de Tailwind fue sencilla, pero una vez que estaba activo, los estilos globales de Tailwind, gracias a Preflight, comenzaron a chocar con nuestros componentes existentes. Un salvavidas aquí estaba establecido En la archivo que se mueve Ciertamente, todavía había problemas menores de estilo para arreglar, pero las cosas parecían menos una zona de guerra. preflight: false tailwind.config.js disabled most of Tailwind’s base resets Desde allí, tuve que ¿Cómo gestionamos los estilos globales, reutilizamos clases y construimos componentes conscientes del tema con Tailwind?Una vez que se puso esa base, estaba listo para construir. establish new conventions Y aquí está la parte que todavía me sorprende: AI made this process actually enjoyable. Refactorizar miles de líneas de código solo habría sido una locura. Pero usé ChatGPT para convertir nuestros componentes estilizados en Tailwind uno a la vez. Para componentes simples -layouts, espaciamiento, estructura- era una brisa. La IA no lo consiguió todo bien.Los componentes más complejos y temáticos todavía son necesarios Pero tener una base sólida para comenzar hizo que las cosas fuesen mucho más fáciles.La documentación de Tailwind también ayudó a llenar las lagunas, y una vez que abrazé completamente la Las cosas comenzaron a clicar. Now, let me be honest: manual coding and plenty of hours utility class mindset ¿Cómo es la migración hasta ahora? Me alegro de decir Tailwind is now live on HackerNoon! A partir de ahora, el a Tailwind CSS, con Componentes estilizados completamente eliminados. La mayoría de las otras páginas todavía dependen de Componentes estilizados, y se convertirán gradualmente— . el La página web de HackerNoon se ha convertido completamente one component, one page at a time La página web de HackerNoon se ha convertido completamente Este enfoque más lento ha sido realmente una bendición.Refactorizar cada componente me dio la oportunidad de el diseño y la estructura de nuestras páginas. Junto a la conversión de Tailwind, hemos introducido un mejor uso del diseño, nuevos componentes e incluso un Esto da vergüenza a nuestro viejo sistema temático. revisit and improve more modern UI custom-built theme picker Después de trabajar en HackerNoon durante más de 4 años, siento Subir a nuestra base de código de nuevo. Tailwind ha hecho la construcción divertida de nuevo. Es limpio, consistente y potente -y estoy emocionado de seguir impulsando la conversión hacia adelante. de nuestro Para lo mejor. 😉 reignited styled-components package.json Reflexiones finalistas El paso a Tailwind CSS no se trataba sólo de reemplazar una biblioteca de estilo, sino de modernizar nuestro flujo de trabajo frontend, abrazando la coherencia y simplificando el desarrollo. Necesitamos seguir escalando. flexibility, speed, and maintainability Todavía es un trabajo en curso —nuestra aplicación todavía tiene un montón de Componentes Estilizados— pero ver a Tailwind en vivo en nuestra página de inicio y en componentes recién refactorizados ha sido increíblemente gratificante.El hecho de que pueda combinar AI con mi propia experiencia para refactor más rápido ha hecho que esta transición se sienta no sólo factible sino emocionante. HackerNoon está evolucionando, y nuestros estilos están evolucionando con ello.

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Check out my projects

Este audio es producido en el idioma original de la historia!

De los componentes estilizados a Tailwind CSS: Una historia de migración de HackerNoon

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una breve introducción a la teoría del cerebro de Boltzmann

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Telegram: el puente de Crypto Island hacia el continente

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Una breve introducción a la teoría del cerebro de Boltzmann

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Telegram: el puente de Crypto Island hacia el continente

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps