Encontramos 5 formas de escribir CSS en React este 2021
Si eres un desarrollador React, seguramente has pasado horas escribiendo y depurando código CSS. Para muchos, esto puede ser una tarea tediosa y repetitiva. Pero, como siempre, la comunidad de React ha creado diversas alternativas para escritura de CSS en React que pueden hacer que esta tarea sea más sencilla, rápida y efectiva. En este artículo presentamos las cinco formas más populares de escribir CSS en aplicaciones React en el año 2021.
Solución 1: CSS tradicional
El CSS tradicional todavía es utilizado ampliamente en aplicaciones React. Esto se debe a que es una solución fácil de implementar y empaqueta todo en un solo archivo. Sin embargo, puede producir conflictos entre los estilos definidos, lo que puede dificultar la detección y resolución de errores.
// Ejemplo de CSS tradicional
.container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
Solución 2: CSS en línea
El CSS en línea es una forma innovadora de escribir estilos que va directamente en la línea del elemento. Si bien puede parecer caótico, es una forma muy eficaz de hacer las cosas en aplicaciones React. Además, permite la facilidad de paso de props al estilo del elemento, lo que lo convierte en una opción popular para el diseño basado en propiedades.
// Ejemplo de CSS en línea
<div style={{ fontSize: "24px", color: "red", fontStyle: "italic" }}>
{" "}
Ejemplo de línea
</div>
Solución 3: CSS en módulos
El CSS en módulos es una forma de escribir CSS que se limita a su componente individual. Esto hace que los conflictos de estilo sean menos probables, ya que los estilos están contenidos en un solo archivo. También permite la utilización de herramientas que optimizan la escritura de CSS, tales como la centralización del manejo de nombres de clases.
// Ejemplo de CSS en módulos
import styles from './boton.module.css';
export default function Boton() {
return (
<button className={styles.boton}>
Click me
</button>
);
}
/* En archivo boton.module.css */
.boton {
background-color: blue;
color: white;
border: none;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
}
Solución 4: CSS en Styled Components
Styled Components es una solución innovadora para la escritura de CSS en aplicaciones React que se centra en la encapsulación componentizada de los estilos. Su funcionalidad permite la generación de estilos dinámicos basados en estados, props y otros factores, lo que hace que la personalización de estilos se vuelva mucho más sencilla. Además de esto, también proporciona una sintaxis simplificada para que la definición de estilos sea más limpia y eficaz.
// Ejemplo de CSS en Styled Components
import styled from "styled-components";
const Button = styled.button`
background-color: blue;
color: white;
border: none;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
`;
export default function Boton() {
return <Button>Click me</Button>;
}
Solución 5: CSS en CSS-in-JS
El CSS-in-JS es conocido por su capacidad para encapsular los estilos en componentes y al mismo tiempo contener todo en un módulo de Javascript. Esto significa que, al igual que con los Styled Components, la personalización de estilos se vuelve mucho más sencilla. Otra ventaja de esta forma de escribir CSS es su versatilidad, ya que permite escribir estilos en diferentes lenguajes, como por ejemplo SASS.
// Ejemplo de CSS en CSS-in-JS (Emotion)
import styled from "@emotion/styled";
const Boton = styled.button`
background-color: blue;
color: white;
border: none;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
`;
export default function Boton() {
return <Boton>Click me</Boton>;
}
Aprendimos cómo utilizar librarias como Emotion y styled-components
En la búsqueda de una forma efectiva de usar CSS en nuestras aplicaciones React, hemos aprendido la importancia de utilizar librerías como Emotion y styled-components. Estas herramientas han sido esenciales en nuestro proceso de desarrollo. Permíteme compartir contigo nuestra experiencia personal en primera persona del plural.
Emotion es una librería de CSS que te permite agregar estilos a tus componentes React sin necesidad de crear archivos CSS separados. Su sintaxis es muy fácil de aprender y utilizar, y se integra perfectamente con React. Con Emotion, puedes escribir tus estilos en un archivo JavaScript y usarlos directamente en tus componentes. Esto te ayuda a mantener todo el código relacionado en un solo lugar, lo que facilita el mantenimiento.
import styled from "@emotion/styled";
const Button = styled.button`
background-color: blue;
color: white;
border-radius: 5px;
padding: 10px;
font-size: 16px;
`;
function App() {
return (
<div>
<Button>Click me!</Button>
</div>
);
}
styled-components es otra librería que se ha vuelto muy popular en la comunidad React. Esta librería funciona de manera similar a Emotion, pero tiene una sintaxis ligeramente diferente. styled-components te permite crear componentes React con estilos incorporados. Al igual que Emotion, puedes escribir tus estilos en un archivo JavaScript y usarlos directamente en tus componentes.
import styled from "styled-components";
const Button = styled.button`
background-color: blue;
color: white;
border-radius: 5px;
padding: 10px;
font-size: 16px;
`;
function App() {
return (
<div>
<Button>Click me!</Button>
</div>
);
}
Ambas librerías ofrecen soluciones efectivas para escribir estilos en una aplicación React, y la elección entre ellas dependerá de tus preferencias personales y de las necesidades de tu proyecto. Ambas librerías son fáciles de aprender y utilizar, lo que las hace ideales para cualquier persona que sea nueva en la escritura de CSS en React.
Tanto Emotion como styled-components son herramientas valiosas para escribir CSS en tu aplicación React. Son fáciles de aprender y utilizar, y se integran bien con los componentes React. Al utilizar estas librerías, puedes mantener todo el código relacionado en un solo lugar y facilitar el mantenimiento de tu aplicación. Esperamos que nuestra experiencia personal te haya ayudado a entender mejor cómo utilizar estas herramientas en tu propio proyecto de React. ¡Inténtalo!
Descubrimos la importancia de CSS-in-JS para evitar problemas de especificidad
Al empezar a desarrollar aplicaciones con React, nos dimos cuenta de la importancia de utilizar CSS de manera adecuada para mantener un código limpio y organizado. Pero pronto descubrimos que esto no siempre era fácil, especialmente al enfrentar problemas de especificidad en nuestro CSS. Es por eso que empezamos a buscar nuevas soluciones que nos permitieran tener un mayor control sobre nuestro estilo.
Fue entonces cuando descubrimos la utilización de CSS-in-JS, una herramienta que nos permitió manejar el estilo de nuestras aplicaciones de una manera mucho más eficiente y organizada. Al utilizar CSS-in-JS pudimos crear estilos altamente personalizables y dinámicos que nos permitieron tener un mayor control sobre nuestros componentes.
CSS-in-JS es una técnica que permite escribir CSS en el mismo archivo que el código de nuestra aplicación, en lugar de tener que crear un archivo CSS independiente. Esto significa que podemos tener mayor control y crear estilos más específicos que se apliquen únicamente a los componentes que deseamos.
Una de las principales ventajas de utilizar CSS-in-JS es la mejora del rendimiento de nuestra aplicación. Al tener todo el código relacionado en el mismo lugar, podemos hacer que nuestros estilos sean más eficientes y reducir los tiempos de carga. Además, como los estilos se aplican únicamente a los componentes específicos en lugar de afectar a toda la aplicación, podemos evitar la especificidad de CSS, un problema común que puede generar conflictos y errores en nuestra aplicación.
Al usar una biblioteca de CSS-in-JS como styled-components, podemos escribir nuestros estilos directamente en nuestros componentes utilizando JavaScript. Por ejemplo, para crear un botón personalizado, podemos escribir lo siguiente:
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'gray'};
color: white;
border: none;
padding: 0.5em 1em;
font-size: 1em;
`;
<Button primary>Botón Principal</Button>
<Button>Botón Secundario</Button>
En este ejemplo, la propiedad primary es utilizada para diferenciar la apariencia de nuestros botones, lo que nos permite crear múltiples estilos para componentes similares de manera fácil y efectiva. Además, como los estilos para nuestros componentes están agrupados en un solo archivo, podemos encontrar y editar fácilmente los estilos necesarios sin tener que buscar en diferentes archivos.
La utilización de CSS-in-JS es una excelente manera de manejar el estilo en nuestras aplicaciones React. Al utilizar esta técnica podemos tener un mayor control sobre nuestros estilos, evitar problemas de especificidad y mejorar el rendimiento de nuestra aplicación. Además, con la utilización de bibliotecas como styled-components, podemos escribir nuestros estilos de manera concisa y eficiente, lo que nos permite crear un código más limpio y organizado.
Probamos el nuevo método con CSS Modules para un código más modular
Probamos el nuevo método con CSS Modules para un código más modular
En nuestra búsqueda por mejorar el manejo de los estilos en nuestras aplicaciones React, decidimos probar una técnica relativamente nueva, que es el uso de CSS Modules. Después de leer un poco sobre esta técnica, nos animamos a probarla en nuestra última aplicación.
Básicamente, CSS Modules es una forma de escribir CSS que se integra muy bien con el mundo de las aplicaciones de React. En lugar de escribir estilos globales que afectan a toda la aplicación, CSS Modules nos permite escribir estilos modulares que solo afectan a los componentes específicos. Esto significa que podemos escribir estilos específicos para cada componente, lo que nos da más control y organización sobre el código CSS.
Para implementar CSS Modules, primero instalamos el paquete css-loader y agregamos esta configuración en nuestro webpack:
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
Luego, creamos un archivo CSS para nuestro componente y lo importamos directamente en nuestro archivo de componente de React:
import styles from "./Button.css";
Ahora, en lugar de nombrar nuestras clases de CSS de forma global:
/* Global styles */
.button {
padding: 1rem;
border: 1px solid;
}
Podemos nombrar nuestras clases de CSS de forma local:
/* Local styles */
.button_1234 {
padding: 1rem;
border: 1px solid;
}
La magia de CSS Modules es que la clase .button ahora se convierte automáticamente en un nombre de clase único y generado aleatoriamente, como .button_1234. Esto significa que nuestras clases no entrarán en conflicto con otros estilos globales en nuestra aplicación.
Además, podemos utilizar la sintaxis de objetos de JavaScript para asignar nuestros estilos directamente a nuestros componentes:
import React from "react";
import styles from "./Button.css";
function Button() {
return <button className={styles.button}>Click me</button>;
}
export default Button;
De esta manera, nuestros estilos se asignan directamente a nuestros componentes, lo que nos da una forma más intuitiva de controlar el aspecto de nuestros componentes.
Hemos encontrado que CSS Modules es una técnica muy útil para escribir estilos más modulares y específicos para nuestro código de React. Si todavía estás utilizando estilos globales en CSS, te recomendamos que pruebes CSS Modules para una experiencia más organizada y controlada de tus estilos.
Exploramos la eficacia de técnicas como BEM y ITCSS
Al momento de desarrollar una aplicación en React, es imprescindible tener una buena estructura CSS. Un buen proceso de escritura de estilos no solo facilita la modificación del código, sino que también ayuda a prevenir conflictos y errores en el futuro. En este artículo exploraremos dos técnicas que pueden ser de gran ayuda: BEM y ITCSS.
BEM (Block, Element, Modifier) es una metodología para nombrar clases CSS de forma clara y consistente. Básicamente, divide una interfaz en bloques, elementos y modificadores, y los nombra según su función y relación con otros elementos. Por ejemplo, si tenemos un botón dentro de un formulario, podríamos nombrarlo “formulario__botón–enviar”. El doble guión denota un modificador y el doble guión bajo denota un elemento. Esta técnica ayuda a evitar conflictos de nombres y a entender la estructura de la interfaz.
Por otro lado, ITCSS (Inverted Triangle CSS) es una arquitectura CSS que organiza los estilos en capas, de forma que el código se vuelve más fácil de mantener y escalar. En lugar de escribir estilos en un solo archivo, ITCSS divide el código en varias capas, desde la más abstracta (variables y configuraciones) hasta la más concreta (estilos específicos de componentes). Esta separación permite que se apliquen estilos de forma más específica y se eviten conflictos.
Pero, ¿cuál es la eficacia de estas técnicas? Según nuestra experiencia, son muy útiles para proyectos de gran escala y equipos de desarrollo grandes. En proyectos pequeños o en solitario, estas técnicas pueden resultar excesivas y poco prácticas.
Un ejemplo de código con BEM podría ser el siguiente:
.formulario {
/* Estilos generales */
}
.formulario__boton {
/* Estilos del botón */
}
.formulario__boton--enviar {
/* Estilos del botón cuando está activado */
}
.formulario__campo {
/* Estilos del campo del formulario */
}
.formulario__campo--error {
/* Estilos del campo cuando hay un error */
}
Y un ejemplo de código con ITCSS podría ser el siguiente:
// Configuraciones y variables
$color-primario: #0088cc;
// Funciones
@function lighten($color, $amount) {
// Función para aclarar un color
}
// Herramientas
@mixin clearfix() {
// Mixin para limpiar floats
}
// Esqueleto
html,
body {
// Estilos generales
}
// Elementos
.btn {
// Estilos de los botones
}
// Componentes
.formulario {
// Estilos del formulario
}
// Específicos
.formulario--contacto {
// Estilos específicos para el formulario de contacto
}
BEM e ITCSS son técnicas muy útiles para proyectos grandes con equipos de desarrollo grandes. No obstante, pueden resultar excesivas para proyectos pequeños o solitarios. Y es que aunque estas técnicas son efectivas, siempre debemos adaptarlas a nuestras necesidades específicas y no seguir ciegamente cualquier metodología. El objetivo es siempre tener un código modular, legible y escalable, independientemente de las técnicas que utilicemos.
Concluimos que debemos elegir solo una técnica y ser coherentes en su implementación
Después de explorar las 5 formas de escribir CSS en una aplicación React que hemos compartido, llegamos a la conclusión de que la elección de una técnica es crítica para mantener una coherencia y eficiencia en lo que hacemos. De hecho, la elección de una técnica debe basarse en las necesidades específicas de nuestro proyecto y en la habilidad y experiencia del equipo.
Como mencionamos en nuestro artículo, existen múltiples formas de escribir CSS en una aplicación React, cada una con sus pros y contras. Por un lado, tenemos la opción de escribir CSS directamente en nuestros componentes a través de la sintaxis in-line. Esta técnica permite una mayor modularidad y capacidad de reutilización, ya que el CSS está directamente vinculado al componente y no hay necesidad de crear una hoja de estilos separada. Por otro lado, esta técnica puede generar un código complicado si se usan muchos estilos en línea, lo que hace difícil la lectura y el mantenimiento de los componentes.
Otra opción es el uso de los módulos de CSS, en los que se crean archivos de estilo independientes para cada componente. Esta técnica es ideal para mantener una mejor organización y escalabilidad en el proyecto, ya que se evita la repetición de estilos y se asegura que cada componente tenga un archivo de estilo propio. Sin embargo, se requiere de una sintaxis específica y puede resultar tedioso tener tantos archivos de estilo dispersos por todo el proyecto.
Una tercera técnica es mediante el uso de preprocesadores como Sass o Less, que permiten utilizar funciones, variables y mixins para escribir CSS de manera más eficiente y legible. Esta técnica es bastante popular por la facilidad que provee en la escritura de CSS, aunque se requerirá de alguna herramienta para compilar el archivo Sass o Less en CSS.
La cuarta técnica es mediante el uso de styled-components, una biblioteca de JavaScript que permite escribir CSS como componentes de React. Esta técnica es popular por su capacidad para hacer CSS más fácil de mantener y leer, lo que puede llevar a un código más limpio y escalable. Sin embargo, al igual que en la técnica del módulo de CSS, puede generar una gran cantidad de archivos en nuestro proyecto.
Por último, la técnica de CSS en línea puede ser utilizada para aplicaciones más pequeñas o en prototipos donde la simplicidad en la solución es crítica.
En general, para elegir una técnica en particular, es importante considerar las necesidades específicas de su proyecto y ser coherente con su implementación. Es decir, asegurarse de que todo el equipo esté en sintonía en cuanto a la técnica elegida y su aplicación en el proyecto.
La elección de la técnica que se usará para escribir CSS en una aplicación React es esencial para mantener una base de código coherente y eficiente. La elección dependerá de las necesidades específicas del proyecto y la habilidad y experiencia del equipo. Por lo tanto, es importante elegir una técnica que funcione mejor para su equipo y proyecto en particular y ser coherente en su aplicación.