css - estilos - Mejores prácticas de estilo en línea React.js

estilos en react native

Question

Soy consciente de que puede especificar estilos dentro de las clases React, de esta manera:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: ''white'',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

¿Debería apuntar a hacer todo el estilo de esta manera y no tener ningún estilo especificado en mi archivo CSS?

¿O debería evitar los estilos en línea por completo?

Parece extraño y desordenado hacer un poco de ambos: dos lugares tendrían que verificarse al ajustar el estilo.

Answer 1

¡También puedes usar StrCSS, crea nombres de clase aislados y mucho más! Se vería un código de ejemplo. ¡Puede (opcional) instalar la extensión VSCode desde Visual Studio Marketplace para obtener soporte de resaltado de sintaxis!

fuente: strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I''m green!
      Unless you''re on iOS..."}
    </div>;
  }
}

Answer 2

Algún tiempo requerimos diseñar un elemento de un componente, pero si tenemos que mostrar solo ese componente o el estilo es menor, en lugar de usar la clase CSS, buscamos el estilo en línea en react js. el estilo en línea de reactjs es igual al estilo en línea de HTML, solo los nombres de las propiedades son un poco diferentes

Escriba su estilo en cualquier etiqueta usando style = {{prop: "value"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Answer 3

Aquí está el estilo booleano basado en la sintaxis JSX :

style={{display: this.state.isShowing ? "inherit" : "none"}}

Answer 4

Dependiendo de su configuración, el estilo en línea puede ofrecerle una recarga en caliente. La página web se vuelve a representar inmediatamente cada vez que cambia el estilo. Esto me ayuda a desarrollar componentes más rápido. Dicho esto, estoy seguro de que puede configurar un entorno de recarga en caliente para CSS + SCSS.

Answer 5

El atributo de estilo en React espera que el valor sea un objeto, es decir, un par de valores clave.

style = {} tendrá otro objeto dentro como {float:''right''} para que funcione.

<span style={{float:''right''}}>{''Download Audit''}</span>

Espero que esto resuelva el problema

Answer 6

El estilo en JSX es muy similar al estilo en HTML.

Caso HTML:

div style = "color de fondo: rojo; color: blanco"

Caso JSX:

div style = {{backgroundColor: ''red'', color: ''white''}}

Answer 7

El problema con los estilos en línea es que las Políticas de seguridad de contenido (CSP) se están volviendo más comunes, lo que no lo permite. Por lo tanto, recomiendo evitar los estilos en línea por completo.

Actualización: para explicar más, CSP son encabezados HTTP enviados por el servidor que restringen qué contenido puede aparecer en la página. Es simplemente una mitigación adicional que se puede aplicar a un servidor para evitar que un atacante haga algo malo si el desarrollador codifica mal el sitio.

El propósito de la mayoría de estas restricciones es detener los ataques XSS (cross-site scripting). XSS es donde un atacante descubre una manera de incluir su propio javascript en su página (por ejemplo, si hago que mi nombre de usuario bob<SCRIPT>alert("hello")</SCRIPT> y luego publique un comentario, y usted visita el página, no debería mostrar una alerta). Los desarrolladores deben negar la posibilidad de que un usuario agregue contenido como este al sitio, pero en caso de que cometieran un error, CSP bloquea la carga de la página si encuentra algún script> etiquetas.

Los CSP son solo un nivel adicional de protección para que los desarrolladores se aseguren de que si cometieron un error, un atacante no puede causar problemas a los visitantes de ese sitio.

De modo que todo es XSS, pero ¿qué sucede si el atacante no puede incluir etiquetas <script> pero puede incluir etiquetas <style> o incluir un parámetro style= en una etiqueta? Entonces él podría cambiar el aspecto del sitio de tal manera que lo engañen para que haga clic en el botón incorrecto o algún otro problema. Esto es mucho menos preocupante, pero aún así es algo que debe evitarse, y CSP lo hace por usted.

Un buen recurso para probar un sitio para CSP es https://securityheaders.io/

Puede leer más sobre CSP en: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Answer 8

El propósito principal del atributo de estilo es para estilos dinámicos basados ​​en estado. Por ejemplo, podría tener un estilo de ancho en una barra de progreso basado en algún estado, o la posición o visibilidad basada en otra cosa.

Los estilos en JS imponen la limitación de que la aplicación no puede proporcionar un estilo personalizado para un componente reutilizable. Esto es perfectamente aceptable en las situaciones mencionadas anteriormente, pero no cuando cambia las características visibles, especialmente el color.

Answer 9

En comparación con la escritura de sus estilos en un archivo CSS, el atributo de estilo de React tiene las siguientes ventajas :

1. La capacidad de utilizar las herramientas javascript como lenguaje de programación permite controlar el estilo de sus elementos. Esto incluye incrustar variables, usar condiciones y pasar estilos a un componente secundario.
2. Un enfoque "componente". No más separación de código HTML, JS y CSS escrito para el componente. El código del componente se consolida y se escribe en un solo lugar.

Sin embargo, el atributo de estilo de React viene con algunos inconvenientes : no puedes

1. No se pueden usar consultas de medios
2. No se pueden usar pseudo-selectores,
3. menos eficiente en comparación con las clases de CSS.

Usando CSS en JS, puede obtener todas las ventajas de una etiqueta de estilo, sin esos inconvenientes . A partir de hoy, hay algunos css populares y bien soportados en las bibliotecas js, que incluyen: Emotion, Styled-Components y Radium. Esas bibliotecas son como CSS lo que React es para HTML. Le permiten escribir su CSS y controlar su CSS en su código JS.

comparemos cómo se verá nuestro código para diseñar un elemento simple. Vamos a diseñar un div "hello world" para que se vea grande en el escritorio y más pequeño en el móvil.

Usando el atributo de estilo

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

Dado que la consulta de medios no es posible en una etiqueta de estilo, tendremos que agregar un className al elemento y agregar una regla css.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Usando la etiqueta 10 css de Emotion

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion también admite cadenas de plantillas, así como componentes con estilo. Entonces, si lo prefiere, puede escribir:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

Detrás de las campanas "Css en JS" utiliza clases css. La emoción específicamente se creó teniendo en cuenta el rendimiento y utiliza el almacenamiento en caché. En comparación con los atributos de estilo React, Css en JS proporcionará un mejor rendimiento.

Mejores prácticas

Aquí hay algunas mejores prácticas que recomiendo:

1. Si desea diseñar sus elementos en línea, o en su JS, use una biblioteca css-in-js, no use un atributo de estilo.

¿Debería apuntar a hacer todo el estilo de esta manera y no tener ningún estilo especificado en mi archivo CSS?

2. Si usa una solución css-in-js no hay necesidad de escribir estilos en archivos Css. Escribir su CSS en JS es superior, ya que puede utilizar todas las herramientas que proporciona un lenguaje de programación como JS.

¿Debo evitar los estilos en línea por completo?

3. Estructurar su código de estilo en JS es bastante similar a estructurar su código en general. Por ejemplo:
   • reconocer estilos que se repiten y escribirlos en un solo lugar. Hay dos formas de hacer esto en Emotion:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• El patrón de codificación de reacción es de componentes encapsulados: HTML y JS que controlan un componente se escriben en un archivo. Ahí es donde pertenece su código CSS / estilo para diseñar ese componente.

• Cuando sea necesario, agregue un accesorio de estilo a su componente. De esta forma, puede reutilizar el código y el estilo escritos en un componente secundario, y personalizarlo según sus necesidades específicas según el componente principal.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

Answer 10

James K Nelson, en su carta "Por qué no debe aplicar estilo a los componentes de reacción con JavaScript", afirma que en realidad no es necesario utilizar estilos en línea con sus desventajas. Su afirmación es que el viejo y aburrido CSS con menos / scss es la mejor solución. La parte de sus tesis a favor de css:

• extensible externamente
• nivelable (los estilos en línea sobrepasan todo)
• amigable con el diseñador

Answer 11

Lo que hago es dar a cada uno de mis componentes reutilizables un nombre de elemento personalizado único y luego crear un archivo CSS para ese componente, específicamente, con todas las opciones de estilo para ese componente (y solo para ese componente).

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

Y en el archivo ''custom-component.css'', cada entrada comenzará con la etiqueta de componente personalizado:

custom-component { 
   display: block; /* have it work as a div */
   color: ''white''; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

Eso significa que no pierde la noción crítica de separación de la preocupación. Ver vs estilo. Si comparte su componente, es más fácil que otros le asignen un tema para que coincida con el resto de su página web.

Answer 12

Para algunos componentes, es más fácil usar estilos en línea. Además, me resulta más fácil y conciso (ya que estoy usando Javascript y no CSS) para animar estilos de componentes.

Para componentes independientes, utilizo el ''Operador de propagación'' o el ''...''. Para mí, es claro, hermoso y funciona en un espacio reducido. Aquí hay una pequeña animación de carga que hice para mostrar sus beneficios:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    ''display'': ''flex'',
    ''flexDirection'': ''row'',
    ''justifyContent'': ''center'',
    ''alignItems'': ''center'',
    ''flexWrap'': ''wrap'',
    ''width'': 21,
    ''height'': 21,
    ''borderRadius'': ''50%''
  },
  block: {
    ''width'': 7,
    ''height'': 7,
    ''borderRadius'': ''50%'',
  }
}
this.state = {
  colors: [
    { backgroundColor: ''red''},
    { backgroundColor: ''blue''},
    { backgroundColor: ''yellow''},
    { backgroundColor: ''green''},
    { backgroundColor: ''white''},
    { backgroundColor: ''white''},
    { backgroundColor: ''white''},
    { backgroundColor: ''white''},
    { backgroundColor: ''white''},
  ],
  opacity: {
    ''opacity'': 0
  }
}

Luego, en componentWillMount (), configuro un intervalo así ...

this.interval = setInterval(() => {
  let colors = this.state.colors;
  let opacity = this.state.opacity;

  if(this.props.reverse) {
    let color = colors[colors.length-1];
    colors.pop();
    colors.unshift(color)
  } else {
    let color = colors[0];
    colors.shift();
    colors.push(color);
  }

  opacity[''opacity''] < 1 ? opacity[''opacity'']+=0.06 : null;

  this.setState({colors, opacity});
}, this.speed);

Answer 13

Por lo general, tengo un archivo scss asociado a cada componente React. Pero, no veo la razón por la cual no encapsularía el componente con lógica y lo miraría. Quiero decir, tienes algo similar con los componentes web.

Answer 14

Puede usar estilos en línea, pero tendrá algunas limitaciones si los usa en todos sus estilos, algunas limitaciones conocidas son que no puede usar pseudo-selectores CSS y consultas de medios allí.

Puedes usar Radium para resolver esto, pero aún así, creo que si el proyecto crece, se volverá engorroso.

Recomendaría usar github.com/css-modules/css-modules .

Al usar los módulos CSS , tendrá la libertad de escribir CSS en un archivo CSS y no tendrá que preocuparse por los conflictos de nombres, los módulos CSS se ocuparán de ello.

Una ventaja de este método es que le brinda funcionalidad de estilo al componente específico. Esto creará un código mucho más fácil de mantener y una arquitectura de proyecto legible para que el próximo desarrollador trabaje en su proyecto.

Answer 15

Realmente depende de qué tan grande sea su aplicación, si quiere usar paquetes como webpack y agrupar CSS y JS en la compilación y cómo quiere administrar el flujo de su aplicación. Al final del día, depende de tu situación, ¡puedes tomar una decisión!

Mi preferencia por organizar archivos en grandes proyectos es separar los archivos CSS y JS , podría ser más fácil compartir, más fácil para las personas de la interfaz de usuario simplemente pasar por los archivos CSS, ¡también una organización de archivos mucho más ordenada para toda la aplicación!

Siempre piense de esta manera, asegúrese de que en la fase de desarrollo todo esté donde debe estar, con un nombre adecuado y que sea fácil para otros desarrolladores encontrar cosas ...

Personalmente los mezclo depende de mi necesidad, por ejemplo ... Intente usar CSS externo, pero si es necesario, React también aceptará el estilo, debe pasarlo como un objeto con valor clave, algo como esto a continuación:

import React from ''react'';

const App = props => {
  return (
    <div className="app" style={{background: ''red'', color: ''white''}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Answer 16

Todavía no hay muchas "Mejores prácticas". Aquellos de nosotros que estamos usando estilos en línea, para componentes React, todavía estamos experimentando mucho.

Hay varios enfoques que varían enormemente: Reaccione la tabla de comparación de lib en línea

¿Todo o nada?

Lo que llamamos "estilo" en realidad incluye algunos conceptos:

• Diseño: cómo se ve un elemento / componente en relación con otros
• Apariencia: las características de un elemento / componente
• Comportamiento y estado: cómo se ve un elemento / componente en un estado dado

Comience con estilos de estado

React ya está administrando el estado de sus componentes, esto hace que los estilos de estado y comportamiento sean un ajuste natural para la colocación con la lógica de sus componentes.

En lugar de crear componentes para renderizar con clases de estado condicionales, considere agregar estilos de estado directamente:

// Typical component with state-classes
<li 
 className={classnames({ ''todo-list__item'': true, ''is-complete'': item.complete })} />


// Using inline-styles for state
<li className=''todo-list__item''
 style={(item.complete) ? styles.complete : {}} />

Tenga en cuenta que estamos usando una clase para .is- apariencia, pero ya no usamos ninguna clase con prefijo .is- para el estado y el comportamiento .

Podemos usar Object.assign (ES6) o _.extend (subrayado / lodash) para agregar soporte para múltiples estados:

// Supporting multiple-states with inline-styles
<li ''todo-list__item''
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

Personalización y reutilización

Ahora que estamos usando Object.assign se vuelve muy simple hacer que nuestro componente sea reutilizable con diferentes estilos. Si queremos anular los estilos predeterminados, podemos hacerlo en el sitio de la llamada con accesorios, así: <TodoItem dueStyle={ fontWeight: "bold" } /> . Implementado así:

<li ''todo-list__item''
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

Diseño

Personalmente, no veo una razón convincente para los estilos de diseño en línea. Hay una serie de excelentes sistemas de diseño CSS por ahí. Solo usaría uno.

Dicho esto, no agregue estilos de diseño directamente a su componente. Envuelva sus componentes con componentes de diseño. Aquí hay un ejemplo.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

Para el soporte de diseño, a menudo trato de diseñar componentes para que sean 100% width y height .

Apariencia

Esta es el área más polémica del debate del "estilo en línea". En última instancia, depende del componente que diseñe y la comodidad de su equipo con JavaScript.

Una cosa es segura, necesitará la ayuda de una biblioteca. Los estados del navegador ( :hover :focus ) y las consultas de medios son dolorosos en Raw React.

Me gusta Radium porque la sintaxis de esas partes duras está diseñada para modelar la de SASS.

Organización del código

A menudo verá un objeto de estilo fuera del módulo. Para un componente de lista de tareas, podría verse así:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

funciones getter

Agregar un montón de lógica de estilo a su plantilla puede ser un poco complicado (como se ve arriba). Me gusta crear funciones getter para calcular estilos:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

Mirando más

Discutí todo esto con más detalle en React Europe a principios de este año: Estilos en línea y cuándo es mejor ''simplemente usar CSS'' .

Estoy feliz de ayudarlo mientras hace nuevos descubrimientos en el camino :) Dame un golpe -> @chantastic

Answer 17

Uso estilos en línea ampliamente dentro de mis componentes React. Me resulta mucho más claro colocar estilos dentro de los componentes porque siempre está claro qué estilos tiene y no tiene el componente. Además, tener todo el poder de Javascript a mano realmente simplifica las necesidades de diseño más complejas.

Al principio no estaba convencido, pero después de incursionar en ello durante varios meses, estoy completamente convertido y estoy en proceso de convertir todo mi CSS a métodos CSS en línea u otros métodos CSS.

Esta presentación del empleado de Facebook y colaborador de React "vjeux" también es realmente útil: https://speakerdeck.com/vjeux/react-css-in-js