¿Sabías que más del 97 % de los sitios web usan CSS para diseñar?
Las hojas de estilo en cascada, o CSS, permiten a los desarrolladores crear páginas web atractivas, escaneables y presentables.
El lenguaje CSS especifica cómo se presentan los documentos al usuario. Un documento, en este caso, es un archivo escrito en un lenguaje de marcado como XML o HTML.
Contenido del sitio
¿Qué es el estilo en React?
La simplicidad de crear, ejecutar y mantener una aplicación React es la razón principal de su popularidad. React es una biblioteca de JavaScript en lugar de un marco, que ofrece más que funciones preescritas y fragmentos de código.
La disponibilidad de componentes reutilizables, su flexibilidad, la estabilidad del código, la velocidad y el rendimiento son algunas de las razones por las que React se encuentra entre los marcos y bibliotecas de JavaScript.
Diseñar en React es el proceso de crear varios componentes visualmente atractivos en una aplicación React utilizando CSS. Sin embargo, debe tenerse en cuenta que React usa JSX (JavaScript y XML) en lugar de HTML como lenguaje de marcado. Una de las principales diferencias es que HTML usa .class para etiquetar clases, mientras que JSX usa .ClassName para referirse a ellas.
¿Por qué debería diseñar React usando CSS?
- Haz que tu aplicación sea responsiva. Las aplicaciones web modernas deben ser accesibles tanto en pantallas pequeñas como grandes. CSS le permite aplicar consultas de medios a su aplicación React y hacer que responda a diferentes tamaños de pantalla.
- Acelerar el proceso de desarrollo. Puede usar la misma regla CSS en varios componentes de su aplicación React.
- Haga que la aplicación React sea mantenible. Es fácil realizar cambios de apariencia en componentes/partes específicos de su aplicación utilizando CSS.
- Experiencia de usuario mejorada. CSS permite un formato fácil de usar. Un React con texto y botones en lugares lógicos es fácil de navegar y usar.
Hay varios enfoques que los desarrolladores pueden usar para diseñar sus aplicaciones React. Aquí hay algunos de los más comunes;
Escribir estilos en línea
Los estilos en línea son el enfoque más fácil para diseñar una aplicación React porque los usuarios no necesitan crear una hoja de estilo externa. El estilo CSS se aplica directamente al código React.
Cabe señalar que los estilos en línea tienen una alta prioridad sobre otros estilos. Entonces, si tuviera una hoja de estilo externa con algún formato, el estilo en línea la anularía.
Esta es una demostración del estilo en línea en una aplicación React.
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
<h2>Add a little style!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
El elemento mostrado mostrará un h1 con un fondo azul claro.
Beneficios del estilo de línea
- Rápido. Este es el enfoque más fácil, ya que agrega estilo directamente a la etiqueta que desea diseñar.
- Tiene una gran preferencia. Los estilos en línea reemplazan las hojas de estilo externas. Por lo tanto, puede usarlo para centrarse en una función en particular sin cambiar toda la aplicación.
- Ideal para prototipos. Puede usar estilos en línea para probar la funcionalidad antes de incrustar el formato en una hoja de estilo externa.
Desventajas del estilo de línea
- Puede ser tedioso. Diseñar cada etiqueta directamente lleva tiempo.
- Límite. No puede usar funciones CSS como selectores y animaciones con estilos en línea.
- Muchos estilos en línea hacen que el código JSX sea ilegible.
Importación de hojas de estilo externas
Puede escribir CSS en un archivo externo e importarlo a la aplicación React. Este enfoque es comparable a importar un archivo CSS a la etiqueta.
de un documento HTML.Para hacer esto, debe crear un archivo CSS en el directorio de su aplicación, importarlo a su componente de destino y escribir reglas de estilo para su aplicación.
Para demostrar cómo funcionan las hojas de estilo CSS externas, puede crear un archivo CSS y llamarlo App.css. A continuación, puede exportarlo de la siguiente manera.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
El fragmento de código anterior importa una hoja de estilo externa al componente App.js. El archivo App.css se encuentra en la carpeta Componentes.
Beneficios de las hojas de estilo CSS externas
- reutilizable. Puede usar las mismas reglas CSS en diferentes componentes de una aplicación React.
- Hace que el código sea más presentable. Comprender el código es fácil cuando se usan hojas de estilo externas.
- Proporciona acceso a funciones CSS avanzadas. Puede utilizar pseudoclases y selectores avanzados cuando trabaje con hojas de estilo externas.
Contra hojas de estilo CSS externas
- Requiere una convención de nomenclatura confiable para garantizar que los estilos no se anulen.
Usar módulos CSS
Las aplicaciones de React pueden llegar a ser muy grandes. Los nombres de las animaciones CSS y los nombres de las clases se expanden globalmente de forma predeterminada. Esta configuración puede ser problemática cuando se trata de hojas de estilo grandes, ya que un estilo puede anular a otro.
Los módulos CSS resuelven este problema definiendo localmente los nombres de animación y clase. Este enfoque garantiza que los nombres de clase solo estén disponibles en el archivo/componente donde se necesitan. Cada nombre de clase recibe un nombre de programación único, lo que evita conflictos.
Para implementar módulos CSS, cree un archivo con .module.css. Si desea nombrar su hoja de estilo como un estilo, el nombre del archivo será estilo.módulo.css.
Importe el archivo creado en su componente React y estará listo para comenzar.
Su archivo CSS podría tener este aspecto;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Puede importar el módulo CSS a su App.js de la siguiente manera;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello Geekflare reader</h1>
);
}
export default App;
Beneficios de usar módulos CSS
- Se integra fácilmente con SCSS y CSS
- Evite conflictos de nombres de clases
Desventajas de usar módulos CSS
- Hacer referencia a los nombres de las clases usando módulos CSS puede resultar confuso para los principiantes.
Usar componentes con estilo
Los componentes con estilo permiten a los desarrolladores crear componentes usando CSS en código JavaScript. Un componente con estilo actúa como un componente de React que viene con estilos. Los componentes con estilo proporcionan un estilo dinámico y nombres de clase únicos.
Para comenzar a usar los componentes con estilo, puede instalar el paquete en su carpeta raíz usando este comando;
npm install styled-components
El siguiente paso es importar componentes con estilo a su aplicación React
Aquí hay un fragmento de código de App.js que usa componentes con estilo;
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;
La aplicación renderizada tendrá los estilos anteriores importados de los componentes con estilo.
Beneficios de los componentes con estilo
- es predecible. Los estilos en este enfoque de estilo están anidados dentro de componentes individuales.
- No hay necesidad de preocuparse por las convenciones de nomenclatura de sus clases. Simplemente escriba sus estilos y el paquete se encargará del resto.
- Puede exportar componentes con estilo como accesorios. Los componentes con estilo convierten CSS normal en componentes React. Entonces puede reutilizar este código, extender estilos a través de accesorios y exportar.
Desventajas de los componentes con estilo
- Debe instalar una biblioteca de terceros para comenzar.
Hojas de estilo sintácticamente impresionantes (SASS/ SCSS)
TOUPET viene con herramientas y funciones más potentes que faltan en el CSS normal. Puedes escribir estilos en dos estilos diferentes guiados por estas extensiones; .scss y .sass.
La sintaxis de SASS es similar a la de CSS regular. Sin embargo, no necesita los paréntesis de apertura y cierre al escribir reglas de estilo en SASS.
Aparecerá un fragmento SASS simple de la siguiente manera;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
Para comenzar a usar SASS en su aplicación React, primero debe compilar SASS en CSS simple. Después de configurar su aplicación a través del comando Create React App, puede instalar node-sass para admitir la compilación.
npm install node-sass
Luego puede crear sus archivos y darles extensiones .scss o .sass. A continuación, puede importar sus archivos de la forma habitual. Por ejemplo;
import "./Components/App.sass";
Ventajas de SASS/SCSS
- Viene con muchas características dinámicas como mixins, anidamiento y extensión.
- No tiene mucho repetitivo para escribir código CSS cuando usa SASS/SCSS
Desventajas de SASS/SCSS
- Los estilos son globales, por lo que es posible que encuentre problemas importantes.
¿Cuál es el mejor enfoque de estilo?
Ya que hemos discutido cinco enfoques, desea saber cuál es el mejor. Es difícil señalar al ganador absoluto en esta discusión. Sin embargo, estas consideraciones lo ayudarán a tomar una decisión informada:
- Indicadores de desempeño
- Si necesita un sistema de diseño
- La facilidad de optimizar tu código
El estilo en línea está bien cuando tiene una aplicación simple con unas pocas líneas de código. Sin embargo, todos los demás; external, SASS, Styled Components y CSS Modules, son adecuados para aplicaciones grandes.
¿Cuáles son las mejores prácticas para mantener CSS en una aplicación React grande?
- Evite el estilo de una línea. Escribir estilos CSS en línea para cada etiqueta en una aplicación React grande puede ser agotador. En su lugar, utilice una hoja de estilo externa adaptada a sus necesidades.
- Escribe tu código. Linters como Stylelint resaltarán los errores de estilo en su código para que pueda corregirlos rápidamente.
- Realice revisiones periódicas del código. Escribir CSS suena divertido, pero las revisiones periódicas del código facilitan la identificación temprana de errores.
- Automatice las pruebas en sus archivos CSS. Enzyme y Jest son excelentes herramientas que puede usar para automatizar las pruebas en su código CSS.
- Conserve su código SEC. cuando trabaje con estilos de uso común, como colores y márgenes, use variables y clases de utilidad de acuerdo con el principio No se repita (DRY).
- Utilice convenciones de nomenclatura como Modificador de elemento de bloque. Tal enfoque facilita la escritura de clases CSS que son fáciles de entender y reutilizar.
Conclusión
Arriba hay algunas de las formas que puede usar para diseñar React. La elección del enfoque de estilo dependerá de sus necesidades, habilidades y gustos. Incluso puede combinar múltiples enfoques de estilo, como hojas de estilo en línea y externas, en su aplicación React.
También puede explorar algunos de los mejores marcos y bibliotecas de CSS para desarrolladores front-end.
