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

Soy consciente de que puede especificar estilos dentro de las clases React, como este:

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 estilos especificados 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.

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 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 diseñar la apariencia, pero ya no usamos ninguna .is-clase prefijada para 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 lo estamos usando Object.assignse vuelve muy simple hacer que nuestro componente sea reutilizable con diferentes estilos. Si queremos anular los estilos por defecto, podemos hacerlo en la llamada in situ con los apoyos, 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 ser 100% widthy 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. Estados del navegador ( :hover,:focus ) y las consultas de medios son dolorosos en React sin procesar.

Me gusta el radio 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 'usar CSS' .

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

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 {float:'right'}para que funcione.

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

Espero que esto resuelva el problema

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

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.

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

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'}}

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.

Realmente depende de qué tan grande sea su aplicación, si desea 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 CSS y JS archivos , podría ser más fácil de 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;

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

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

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.

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.

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 radio para resolver esto, pero aún así, creo que si el proyecto crece, se volverá engorroso.

Recomendaría usar módulos CSS .

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.

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
  }
}

EDITAR NOVIEMBRE 2019

Al trabajar en la industria (una compañía Fortune 500), NO se me permite hacer ningún estilo en línea. En nuestro equipo, hemos decidido que el estilo en línea no se puede leer y no se puede mantener. Y, después de haber visto de primera mano cómo los estilos en línea hacen que soportar una aplicación sea completamente intolerable, tendría que estar de acuerdo. Desaliento completamente los estilos en línea.

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, los CSP son encabezados HTTP enviados por el servidor que restringen el contenido que 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 mi nombre de usuario bob<SCRIPT>alert("hello")</SCRIPT>y luego publico un comentario, y usted visita la 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 alguna script>etiqueta.

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 ¿y si el atacante no puede incluir <script>etiquetas pero puede incluir <style>etiquetas o incluir unstyle= parámetro en una etiqueta? Entonces él podría cambiar el aspecto del sitio de tal manera que te engañen para que hagas 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/

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.

Al usar 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 estilos especificados 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>
)

¡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>;
  }
}

En algún momento necesitamos diseñar un elemento de un componente, pero si tenemos que mostrar solo ese componente o si el estilo es tan pequeño, 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 que 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;

Actualización 2020: la mejor práctica es usar una biblioteca que ya haya hecho el trabajo duro por usted y no mate a su equipo cuando realiza el cambio como se señala en la respuesta originalmente aceptada en este video (aún es relevante). También solo para tener una idea de las tendencias, este es un gráfico muy útil . Después de hacer mi propia investigación sobre esto, elegí utilizar Emotion para mis nuevos proyectos y ha demostrado ser muy flexible y escalable.

Dado que la respuesta más votada de 2015 recomendó Radium, que ahora está relegado al modo de mantenimiento . Por lo tanto, parece razonable agregar una lista de alternativas. La publicación que discontinúa Radium sugiere algunas bibliotecas. Cada uno de los sitios vinculados tiene ejemplos disponibles, por lo que me abstendré de copiar y pegar el código aquí.

• La emoción que está "inspirada en" componentes de estilo entre otros, usa estilos en js y puede ser independiente del marco, pero definitivamente promueve su biblioteca React. La emoción se ha mantenido actualizada a partir de esta publicación.
• los componentes con estilo son comparables y ofrecen muchas de las mismas características que Emotion. También se mantiene activamente. Tanto Emotion como los componentes con estilo tienen una sintaxis similar. Está construido específicamente para trabajar con componentes React.
• JSS Otra opción más para estilos en js que es independiente del marco aunque tiene varios paquetes de marco, React-JSS entre ellos.

De todos modos, nunca se recomienda css en línea. Utilizamos componentes con estilo en nuestro proyecto que se basa en JSS. Protege la anulación de CSS al agregar nombres de clase dinámicos en los componentes. También puede agregar valores CSS basados ​​en los accesorios pasados.