SECAR componentes con estilo

Me gusta trabajar con componentes con estilo . Le permiten escribir CSS en su JavaScript, manteniendo su CSS muy cerca de su JavaScript para un solo componente. Como desarrollador front-end al que le encanta diseccionar una página web y dividirla en componentes reutilizables, la idea de los componentes con estilo me alegra. El enfoque es limpio y modular y no tengo que buscar en ningún archivo CSS gigantesco para ver si ya existe una clase que necesito. Tampoco tengo que agregar una clase a ese archivo CSS interminable y sentirme culpable por hacer que ese archivo ya gigantesco sea aún más grande.

Sin embargo, a medida que continúo en el camino del uso de componentes con estilo, comencé a darme cuenta de que, si bien es genial separar los estilos CSS para que sean específicos de componentes singulares, estoy empezando a repetirme mucho por el bien de la organización. mis estilos por componente. He estado creando nuevas declaraciones CSS y, por lo tanto, nuevos componentes con estilo para cada componente, y veo una gran duplicación en mi CSS. No, los componentes con estilo no siempre son exactamente iguales, pero dos de las tres líneas de CSS coincidirían con dos de las tres líneas de CSS en otro componente. ¿Realmente necesito repetir este código cada vez que necesite estos estilos?

Tomemos como ejemplo flexbox . Flexbox es ideal para diseños responsivos. Alineará los elementos de cierta manera y, con cambios mínimos, se puede modificar para que se vea bien en diferentes tamaños de pantalla. Entonces, la mayoría de las veces me encuentro escribiendo:

display: flex;flex-direction: row; /* the default; in react native, column is the default */

Casi con la misma frecuencia me encontré escribiendo:

display: flex;flex-direction: column;

Los dos fragmentos de código anteriores son bastante comunes: el primero toma todos los elementos secundarios y los coloca uno al lado del otro, de izquierda a derecha, en una fila. El segundo toma todos los elementos secundarios y los coloca uno encima y debajo del otro (de arriba a abajo) en una columna. Cada uno de estos fragmentos de código se puede hacer más específico; sin embargo, podemos agregar diferentes propiedades para especificar aún más cómo queremos que se distribuyan los elementos secundarios en la página. Si queremos que los elementos estén espaciados uniformemente en el ancho de pantalla disponible, por ejemplo, podemos agregar la siguiente línea a cada fragmento de código:

justify-content: space-evenly;

Además, hay otras propiedades como align-itemsla que podemos agregar para personalizar aún más el diseño de estos elementos. Entonces, si tenemos tres componentes diferentes que requieren un diseño de caja flexible, pero tienen propiedades diferentes adicionales, ¿cómo podemos usar componentes con estilo de una manera no repetitiva?

Inicialmente, tiene sentido crear tres conjuntos de estilos para cada componente, como este:

// component oneconst ComponentOne = styled.div`  display: flex;  flex-direction: row;  justify-content: flex-start;`
// component twoconst ComponentTwo = styled.div`  display: flex;  flex-direction: row;  justify-content: space-between;`
// component threeconst ComponentThree = styled.div`  display: flex;  flex-direction: row;  justify-content: space-evenly;`

Los estilos enumerados anteriormente harán el trabajo. Los tres componentes tienen elementos secundarios dispuestos en una fila, colocados de izquierda a derecha, con espacios diferentes entre cada elemento secundario. Sin embargo, tener las mismas dos líneas de código repetidas tres veces aumenta el CSS.

Para evitar repetirnos, podemos extender un componente base a cada uno de los otros componentes y luego agregar los estilos adicionales que necesitamos a esos componentes:

// flex row componentconst ExampleFlex = `  display: flex;  flex-direction: row;`
// component oneconst ComponentOne = styled(ExampleFlex)`  justify-content: flex-start;`
// component twoconst ComponentTwo = styled(ExampleFlex)`  justify-content: space-between;`
// component threeconst ComponentThree = styled(ExampleFlex)`  justify-content: space-evenly;`

Eso se siente mucho mejor. Esta versión, en la que ampliamos el ExampleFlex /componente, no solo elimina el código repetitivo, sino que también mantiene el código relacionado con la visualización de elementos en una fila en un solo lugar. Si necesitáramos actualizar ese código relacionado con la dirección de los elementos en una columna, podemos hacerlo en un lugar en lugar de tres.

Nota importante: cuando extiende estilos de otro componente, los estilos que heredan de ese componente base deben aparecer después del componente base, como en el ejemplo anterior. Colocarlo ComponentOne /arriba ExampleFlex /provocaría un error que dice: Error de referencia no detectado: no se puede acceder a ‘ExampleFlex’ antes de la inicialización.

Para llevar esta idea un paso más allá, la siguiente demostración muestra una situación en la que es posible que necesite estilos similares en dos elementos diferentes de la interfaz de usuario en la página, pero cada uno de esos elementos tiene ligeras diferencias.

Como puede ver, tanto la navegación que se encuentra en la parte superior de la página como el pie de página que se encuentra en la parte inferior de la página deben diseñarse en una dirección de fila en pantallas más grandes y luego cambiar a un diseño de columna en dispositivos móviles. Sin embargo, los dos elementos difieren en que la navegación en la parte superior de la página debe estar alineada hacia la izquierda para dejar espacio para el logotipo a la derecha, mientras que los enlaces del pie de página deben estar alineados hacia la derecha. Debido a estas diferencias, tiene sentido crear dos componentes con estilos diferentes para cada uno de estos elementos; el Navigation /elemento para la navegación superior y el Footer /componente para la navegación inferior de la página.

Los estilos de navegación principales se ven así:

const Navigation = styled.div`  align-items: center;  display: flex;  flex-direction: row;  justify-content: space-between;  padding: 10px;  width: calc(100% - 20px);
  @media (max-width: 768px) {    flex-direction: column;  }`

Mientras que los estilos del pie de página inferior se ven así:

const Footer = styled.div`  align-items: center;  display: flex;  flex-direction: row;   justify-content: flex-end;  padding: 10px;  width: calc(100% - 20px);
  @media (max-width: 768px) {    flex-direction: column;  }`

¿La única diferencia en esos dos elementos? La justify-contentpropiedad. Además, el LeftSideNav /componente se utiliza display: flexcon la misma consulta de medios.

Fuera de estos tres componentes que comparten gran parte del mismo CSS, el NavItem /componente y los FooterNavItem /componentes de enlace son muy similares con ligeras diferencias. Entonces, ¿cómo SECAMOS esto?

Si observa el ejemplo a continuación, verá que el CSS que se reutiliza en múltiples componentes se puede extraer en su propio componente, que ampliamos para realizar los cambios específicos que podamos necesitar para componentes más específicos.

Con los cambios implementados, nuestro archivo JavaScript que contiene todos los componentes con estilo es 10 líneas más corto que la versión anterior. Si bien esto puede parecer una pequeña diferencia, a medida que las aplicaciones crecen, estos cambios podrían ayudar a minimizar el CSS que se envía con una aplicación a medida que se siguen agregando estilos.

¡También está el accesorio polimórfico “as”!

Además de extender estilos de un componente a otro, los componentes con estilo también nos brindan un accesorio polimórfico llamado “como” que aplica estilos de un componente determinado a otro elemento siempre que se especifique ese nuevo elemento. Esto resulta útil en situaciones en las que la interfaz de usuario de dos elementos puede tener el mismo aspecto, pero la funcionalidad HTML subyacente detrás de esos dos elementos es diferente.

Tomemos como ejemplo los botones y enlaces con el estilo de botones. Si bien a primera vista parecen tener una funcionalidad similar (se puede hacer clic en ambos para activar una acción), los dos tienen propósitos funcionalmente diferentes . Un botón es excelente para enviar un formulario o cambiar el diseño de la página actual en la que te encuentras, pero un enlace te llevará a un recurso.

He creado un bolígrafo a continuación que ilustra esto. A primera vista, los dos botones parecen iguales. Sin embargo, el de la derecha es en realidad un a elemento con el estilo de un botón, mientras que el de la izquierda es un buttonelemento real. Estos dos botones podrían ser parte de la navegación del sitio en el futuro, y uno de ellos deberá vincularse a un sitio externo. En un primer intento de desarrollar estos dos elementos, tiene sentido ver el código para cada componente como en el primer ejemplo que vimos.

Si sabemos que estos dos elementos tendrán exactamente los mismos estilos, podemos diseñar cada uno como un Button /, agrupando el componente con estilo con el JavaScript que acompaña al botón que estamos creando. Luego aplicamos exactamente esos mismos estilos a un Link /componente que especificamos:

Si observa el lápiz de arriba, podrá ver que hemos eliminado todos los CSS duplicados relacionados con el estilo de estos dos elementos. En lugar de repetir el CSS para que el botón lo use en el componente de enlace, podemos aplicar un valor a la propiedad as de esta manera:

Button as="a" href="#" ... I am a Link!/Button

Esto nos da la posibilidad de cambiar el elemento a una etiqueta HTML manteniendo los estilos que ya hemos definido para el Botón.

---

Ampliar los estilos de referencia (y tal vez incluso mantener algunos de ellos juntos en un solo globalStyles.jsarchivo) es una forma efectiva de SECAR nuestro código de componentes con estilo, haciéndolo mucho más manejable. Mantener CSS al mínimo no sólo mejora el rendimiento de un sitio web, sino que también puede evitar que los desarrolladores tengan que buscar entre líneas de CSS en el futuro.