¿Cómo usar CSS en diferentes dimensiones (CSS-in-JS)?

Hoy veremos sobre CSS-in-JavaScript. CSS es impresionante y fácil de usar, pero las aplicaciones front-end se han escalado a un ritmo masivo y complejo que no hace que el CSS actual esté diseñado para el trabajo. CSS-in-JS es un verdadero negocio y, en muchos sentidos, es el mejor hoy en día cuando se trata de crear y diseñar aplicaciones en la web.

Qué es CSS-in-JS: tal como su nombre lo indica, CSS-in-Javascript. Todavía es CSS pero aprovecha las capacidades de JavaScript. Utiliza JavaScript como lenguaje para describir estilos de forma declarativa y mantenible.

Beneficios de CSS-en-JS:

1. Lanza errores para ayudarlo a evitar errores, incluidos errores de sintaxis, tipo y no definidos.
2. Hace que el código muerto sea más fácil de administrar.
3. Le ayuda a aprovechar cualquier cosa del ecosistema de JavaScript.
4. No es necesario que mantenga varios archivos CSS.
5. Muchas bibliotecas CSS-in-JS ofrecen mejoras de rendimiento como CSS crítico sin necesidad de configuración adicional.

Cuándo usar CSS-in-JS: un principiante que solo quiere crear sitios web sin un front-end dinámico puede encontrar el CSS estándar como la mejor opción para diseñar. Pero para los desarrolladores que están trabajando en un proyecto de JavaScript con muchos componentes, CSS-in-JS es la mejor opción para usted.

Para implementar CSS en JS: no podemos usar CSS-in-JS sin bibliotecas CSS-in-JS. Hay muchas bibliotecas CSS-in-JS Veamos cómo usar CSS en JS con la ayuda de estas bibliotecas con ejemplos.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app 

Paso 2: Ahora, navegue a la carpeta ‘formulario’ escribiendo los siguientes comandos en el terminal del símbolo del sistema.

cd foldername

 Estructura del proyecto: Tendrá el siguiente aspecto. 

Paso 3: escriba el siguiente comando para ejecutar su proyecto en el navegador localhost: 3000

npm start

1. Componentes con estilo: es una de las bibliotecas CSS-in-JS más populares presentadas en Github. Tiene más de 23K estrellas en GitHub. Con los componentes con estilo, crea un componente React normal con sus estilos adjuntos. El componente con estilo tiene características increíbles, como errores de nombre de clase, mantenimiento sencillo. Los pasos sobre cómo trabajar con componentes con estilo se muestran a continuación:

Paso 1: Instale la biblioteca requerida usando el siguiente comando en su terminal:

// with npm
npm install styled-components

or
// with yarn
yarn add styled-components

Paso 2: Ahora la instalación está lista. Escriba el siguiente código en el archivo App.js. Aquí hay un ejemplo de cómo diseñar con un CSS-in JS library styled-component . En este archivo, diseñaremos rápidamente nuestro javascript usando el componente con estilo primero importándolo y luego comenzará a diseñarlo.

import React from 'react';
import styled from 'styled-components;
  
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: hotpink;
`;
  
// The Title component will render
// an <h1> tag with some styles
  
const Wrapper = styled.div`
  padding: 4em;
  background: rebeccapurple;
`;
// The Wrapper component will render
// a <div> tag with some styles
  
const Paragraph =styled.p`
color: white;
  
// When styling classes you simply use
// an ampersand and you style your class
// just like you did with traditional CSS
  
& .text{
text-align: left;
  
}
&:hover{
  color:pink;
}`
  
// The paragraph component will render a 
// <p> tag with some styles
  
const App = () =>{
return(
  <Wrapper>
    <Title>
      Styled Components
    </Title>
    <Paragraph className='text'>
        This is paragraph
    </Paragraph>
  </Wrapper>
);
}
  
// Use Title and Wrapper like any other
// React component – except they're styled!

Paso 3: Ejecute el siguiente código en la terminal

npm start
or
yarn start

Producción: 

2. JSS: Es una librería más con más de 6k estrellas en GitHub. JSS es una herramienta de creación de CSS que le permite utilizar JavaScript para describir estilos de forma declarativa, sin conflictos y reutilizable. Consta de varios paquetes: el núcleo, complementos, integraciones de marcos y otros. Los pasos sobre cómo trabajar con JSS se encuentran a continuación:

Paso 1: Instale la biblioteca requerida usando el siguiente comando en su terminal:

// with  npm
npm install --save react-jss

or
// with yarn
yarn add react-jss

Paso 2: ahora que la instalación está completa, escriba el siguiente código en el archivo App.js. Aquí hay un ejemplo de cómo diseñar con CSS en la biblioteca JS JSS . En este archivo, diseñaremos rápidamente nuestro javascript usando JSS primero importándolo y luego comenzará a diseñar.

import React from 'react';
import {createUseStyles} from 'react-jss'
  
const useStyles = createUseStyles({
 wrapper: {
  textAlign: 'center',
   width: '100%',
   padding: '50px',
   color: '#444',
 },
  
 title: {
   color: '#fd1a26',
   fontWeight: 400,
 },
});
  
const App = () => {
const classes = useStyles()
return(
 <div className={classes.wrapper}>
    <h1 className={classes.title}>Hello World</h1>
    <p className={classes.p}>This is a paragraph</p>
  
  </div>
)
}
  
export default App;

Nota: En JSS, al diseñar, usa comas para separar los estilos y el estilo de los diferentes elementos.

Paso 3: Ejecute el siguiente código en la terminal

npm start
or
yarn start

Producción:

3. Emoción: es una biblioteca CSS-in-JS que se centra en el rendimiento de la aplicación. Tiene más de 7.7K estrellas en GitHub. Proporciona una composición de estilo potente y predecible, además de una gran experiencia de desarrollador con funciones como mapas de origen, etiquetas y utilidades de prueba. Los pasos sobre cómo trabajar con la emoción se encuentran a continuación:

Paso 1: Instale la biblioteca requerida usando el siguiente comando en su terminal:

// with npm
npm install @emotion/styled @emotion/react

or

// with yarn
yarn add @emotion/styled @emotion/react

Paso 2: ahora que la instalación está completa, escriba el siguiente código en el archivo App.js. Aquí hay un ejemplo de cómo diseñar con la biblioteca de CSS-in- JS . En este archivo, diseñaremos rápidamente nuestro javascript usando emoción primero al importarlo y luego comenzará a diseñar.

/** @jsx jsx */
import React from 'react';
import { jsx, css } from '@emotion/react';
import styled from '@emotion/styled';
  
  
const Wrapper = css`
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 40px;
 color: #444;
 border: 1px solid #4800f4;
`;
  
const Title = styled.h1`
 color: #0d1a26;
 font-weight: 400;
`;
  
const Button = styled('button')`
 padding: 8px 15px;
 border: none;
 border-radius: 5px;
 background-color: #4800f4;
 color: #fff;
 font-size: 14px;
 cursor: pointer;
  
 &:hover {
 transition: .5s;  
 padding: 10px 20px;
 }
`;
  
const App = () => {
return(
 <div css={Wrapper}>
 <Title>Hello world!</Title>
 <Button>This is a button</Button>
</div>
)
};

Paso 3: Ejecute el siguiente código en la terminal

npm start
or
yarn start

La emoción tiene una sintaxis similar a los componentes con estilo.

Nota: Emotion no se ejecutará si no incluye este comentario en la parte superior de la línea del archivo:

/** @jsx jsx */

Producción:

4. Aphrodite: es otro CSS-in-JS que tiene más de 5.200 estrellas en Github. Aphrodite es un CSS-in-JS independiente del marco con soporte para renderizado del lado del servidor, prefijo del navegador y generación mínima de CSS. Esta gran biblioteca funciona con o sin reaccionar. Los pasos sobre cómo trabajar con afrodita están abajo

Paso 1: Instale la biblioteca requerida usando el siguiente comando en su terminal:

// with npm
npm install aphrodite

Paso 2: ahora que la instalación está completa, escriba el siguiente código en el archivo App.js. Aquí hay un ejemplo de cómo diseñar con CSS-in-Js library aphrodite . En este archivo, diseñaremos rápidamente nuestro javascript usando afrodita primero al importarlo y luego comenzará a diseñar.

import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';
   
const styles = StyleSheet.create({
  container: {
  width: '70%',
  padding: '20px',
  border: '1px solid #000',
},
red: {
  backgroundColor: 'red'
},
   
blue: {
  backgroundColor: 'yellow'
},
   
hover: {
  background:'rebeccapurple',
    ':hover': {
      backgroundColor: 'hotpink'
    }
  },
   
  small: {
    ':hover': {
      backgroundColor: 'royalBlue',
    },
  }
});
   
class App extends Component {
  render() {
    return (
      <div>
        <p className={css(styles.red)}>
          This paragraph is purple.
        </p>
   
        <p className={css(styles.hover)}>
          This paragraph is indigo and 
          turns purple on hover.
        </p>
   
        <p className={css(styles.small)}>
          This turns blue when the browser 
          is less than 600px width.
        </p>
   
        <p className={css(styles.red, styles.blue)}>
          This is yellow.
        </p>
   
        <p className={css(styles.blue, styles.small)}>
          This paragraph is white, turns blue 
          when the browser is less than 600px width.
        </p>
      </div>
    }
  }
}

Paso 3: Ejecute el siguiente código en la terminal

npm start
or
yarn start

Producción: