Una introducción de 5 minutos a los componentes con estilo

CSS es raro. Puedes aprender los conceptos básicos en 15 minutos. Pero pueden pasar años antes de que descubras una buena manera de organizar tus estilos.

Parte de esto se debe solo a las peculiaridades del lenguaje en sí. Fuera de la caja, CSS es bastante limitado, sin variables, bucles o funciones. Al mismo tiempo, es bastante permisivo ya que puede diseñar elementos, clases, ID o cualquier combinación de estos.

Hojas de estilo caótico

Como probablemente haya experimentado por sí mismo, esta es a menudo una receta para el caos. Y aunque los preprocesadores como SASS y LESS agregan muchas funciones útiles, en realidad no hacen mucho para detener la anarquía CSS.

Ese trabajo organizativo se dejó en manos de metodologías como BEM, que, si bien son útiles, es completamente opcional y no se puede aplicar a nivel de idioma o herramientas.

La nueva ola de CSS

Avance rápido un par de años, y una nueva ola de herramientas basadas en JavaScript está tratando de resolver estos problemas en su raíz, cambiando la forma en que escribe CSS.

Styled Components es una de estas bibliotecas, y ha atraído rápidamente mucha atención debido a su combinación de innovación y familiaridad. Entonces, si usa React (y si no lo hace, consulte mi plan de estudio de JavaScript y mi introducción para React), definitivamente vale la pena echarle un vistazo a esta nueva alternativa CSS.

Recientemente lo utilicé para rediseñar mi sitio personal, y hoy quería compartir algunas cosas que aprendí en el proceso.

Componentes, con estilo

Lo principal que debe comprender sobre Styled Components es que su nombre debe tomarse literalmente. Ya no está diseñando elementos o componentes HTML en función de su clase o elemento HTML:

Hola mundo

h1.title {
  tamaño de fuente: 1.5em;
  color morado;
}

En cambio, está definiendo componentes con estilo que poseen sus propios estilos encapsulados. Entonces los está utilizando libremente en toda su base de código:

importar estilo desde 'componentes con estilo';
const Title = styled.h1`
  tamaño de fuente: 1.5em;
  color morado;
`;
 Hola mundo 

Esto puede parecer una diferencia menor, y de hecho ambas sintaxis son muy similares. Pero la diferencia clave es que los estilos ahora son parte de su componente.

En otras palabras, nos estamos deshaciendo de las clases CSS como un paso intermedio entre el componente y sus estilos.

Como dice el cocreador de componentes con estilo Max Stoiber:

"La idea básica de los componentes con estilo es aplicar las mejores prácticas eliminando la asignación entre estilos y componentes".

Complejidad de descarga

Esto parecerá contra-intuitivo al principio, ya que el objetivo de usar CSS en lugar de diseñar directamente elementos HTML (¿recuerdas la tag?) Es desacoplar estilos y marcas al introducir esta capa de clase intermedia.

Pero ese desacoplamiento también crea mucha complejidad, y hay que argumentar que, en comparación con CSS, un lenguaje de programación "real" como JavaScript está mucho mejor equipado para manejar esa complejidad.

Atrezzo sobre clases

De acuerdo con esta filosofía de no-clases, los componentes con estilo utilizan accesorios sobre las clases cuando se trata de personalizar el comportamiento de un componente. Entonces en lugar de:

Hola mundo

// será azul
h1.title {
  tamaño de fuente: 1.5em;
  color morado;
  
  &.primario{
    color azul;
  }
}

Escribirías:

const Title = styled.h1`
  tamaño de fuente: 1.5em;
  color: $ {props => props.primary? 'azul púrpura'};
`;
 Hello World  // será azul

Como puede ver, los componentes con estilo le permiten limpiar sus componentes React manteniendo todos los detalles de implementación relacionados con CSS y HTML fuera de ellos.

Dicho esto, el CSS de componentes con estilo sigue siendo CSS. Así que cosas como esta también son totalmente válidas (aunque ligeramente no idiomáticas):

const Title = styled.h1`
  tamaño de fuente: 1.5em;
  color morado;
  
  &.primario{
    color azul;
  }
`;
 Hola mundo  // será azul

Esta es una característica que hace que los componentes con estilo sean muy fáciles de acceder: ¡en caso de duda, siempre puede recurrir a lo que sabe!

Advertencias

También es importante mencionar que los componentes con estilo siguen siendo un proyecto joven y que algunas características aún no son totalmente compatibles. Por ejemplo, si desea diseñar un componente hijo de un padre, tendrá que confiar en el uso de clases CSS por ahora (al menos hasta que salga el componente de estilo v2).

Tampoco existe una forma "oficial" de renderizar previamente su CSS en el servidor, aunque definitivamente es posible inyectando los estilos manualmente.

Y el hecho de que los componentes con estilo generen sus propios nombres de clase aleatorios puede dificultar el uso de las herramientas de desarrollo de su navegador para descubrir dónde se definen originalmente sus estilos.

Pero lo que es muy alentador es que el equipo central de componentes con estilo es consciente de todos estos problemas y está trabajando arduamente para solucionarlos uno por uno. La versión 2 llegará pronto, ¡y estoy deseando que llegue!

Aprende más

Mi objetivo aquí no es explicar en detalle cómo funcionan los componentes con estilo, sino más bien darle un pequeño vistazo para que pueda decidir por sí mismo si vale la pena echarle un vistazo.

Si he logrado despertar tu curiosidad, aquí hay algunos lugares donde puedes obtener más información sobre los componentes con estilo:

  • Max Stoiber escribió recientemente un artículo sobre el motivo de los componentes con estilo para Smashing Magazine.
  • El repositorio de componentes con estilo tiene una extensa documentación.
  • Este artículo de Jamie Dixon describe algunos beneficios de cambiar a componentes con estilo.
  • Si desea obtener más información sobre cómo se implementa realmente la biblioteca, consulte este artículo de Max.

Y si quieres ir aún más lejos, ¡también puedes ver Glamour, una versión diferente del CSS de nueva ola!

Tiempo de autopromoción: estamos buscando colaboradores de código abierto para ayudar con Nova, la forma más fácil de crear aplicaciones React y GraphQL completas con formularios, carga de datos y cuentas de usuario. Todavía no usamos componentes con estilo, ¡pero usted podría ser el primero en implementarlos!