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

No hay una gran cantidad de «Mejores Prácticas» todavía. Aquellos de nosotros que estamos usando en línea-estilos, para Reaccionar componentes, están todavía muy experimentando.

Hay una serie de enfoques que varían enormemente: Reaccionar en línea de estilo lib tabla de comparación

Todo o nada?

A lo que nos referimos como «estilo» en realidad incluye un par de conceptos:

• Diseño — cómo un elemento/componente se ve en la relación con los demás
• Apariencia — las características de un elemento o componente
• El comportamiento y el estado — cómo un elemento/componente se ve en un estado determinado

De inicio con el estado estilos

Reaccionar ya está gestionando el estado de sus componentes, esto hace que los estilos de estado y comportamiento un ajuste natural para la coubicación con su componente de lógica.

Lugar de la construcción de componentes para el procesamiento con condicional del estado-clases, considerar la adición de estado-estilos 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 : {}} />

Nota que estamos usando una clase de estilo apariencia pero no el uso de cualquier .is- el prefijo de la clase para estado y comportamiento.

Podemos utilizar Object.assign (ES6) o _.extend (subrayado/lodash) para agregar el soporte para varios estados:

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

De personalización y la posibilidad de reutilización

Ahora que estamos utilizando Object.assign se vuelve muy simple para hacer que nuestro componente reutilizable con diferentes estilos. Si queremos reemplazar los estilos por defecto, podemos hacerlo en la llamada-sitio con los apoyos, así: <TodoItem dueStyle={ fontWeight: "bold" } />. Implementado como este:

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

Diseño

Personalmente, no veo razón de peso para en línea de diseño de los estilos. Hay una gran cantidad de CSS diseño de sistemas de allí. Yo sólo había uno.

Que dijo, no agregue diseño de estilos directamente a su componente. Envuelva sus componentes con el diseño de componentes. He aquí 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 diseño de apoyo, a menudo trato de diseño de los componentes a ser 100% width y height.

Apariencia

Esta es la zona más conflictiva de la «línea de estilo de» el debate. En última instancia, es el componente de su diseño y la comodidad de su equipo con JavaScript.

Una cosa es cierta, entonces usted necesitará la ayuda de una biblioteca. En el navegador de los estados (:hover, :focus), y los medios de comunicación-las consultas son dolorosas en raw Reaccionar.

Me gusta Radio porque la sintaxis para aquellos de difícil partes está diseñado para el modelo de SASS.

Código de organización

A menudo verás un estilo de objeto fuera del módulo. Para una tarea de la lista de componentes, podría ser algo como esto:

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

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

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

funciones de captador de

La adición de un montón de estilo de la lógica a la plantilla puede ser un poco desordenado (como se ve arriba). Me gusta crear funciones de captador para calcular los 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>
  }
});

Más viendo

He hablado de todo esto en más detalle en Reaccionar Europa a principios de este año: Estilos en línea y cuando es mejor que ‘sólo el uso de CSS.

Estoy feliz de ayudar a hacer nuevos descubrimientos a lo largo del camino 🙂 me Golpeó -> @chantastic

El atributo style en Reaccionar espera que el valor de un objeto, es decir, valor de la Clave par.

style = {} tendrá otro objeto en su interior, como {float:'right'} para hacer que funcione.

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

Espero que esto resuelve el problema

Puedo usar estilos en línea ampliamente dentro de mi Reaccionan los componentes. Me parece mucho más clara para colocate estilos dentro de los componentes porque siempre está claro lo que los estilos de la componente funciona y lo que no tienen. Además de tener toda la potencia de Javascript en mano realmente simplifica más complejo de estilo necesidades.

Yo no estaba muy convencida al principio, pero después de probar en varios meses, estoy plenamente convertidos y estoy en el proceso de conversión de toda mi CSS en línea o de otro JS-impulsado css métodos.

Esta presentación por Facebook empleado y Reaccionar colaborador «vjeux» es realmente útil como bien https://speakerdeck.com/vjeux/react-css-in-js

El propósito principal de el atributo de estilo es dinámico, basado estado estilos. Por ejemplo, usted podría tener un estilo de ancho en una barra de progreso basado en algún estado, o la posición o la visibilidad basada en algo más.

Estilos en JS imponer la limitación de que la aplicación no puede proporcionar la costumbre de estilo para un componente reutilizable. Esto es perfectamente aceptable en las situaciones ya mencionadas, pero no al cambio de las características visibles, sobre todo el color.

James K Nelson en su carta «¿Por qué Usted no Debería Estilo de Reaccionar Con Componentes de JavaScript». afirma que no hay realmente necesidad de utilizar estilos en línea con sus desventajas. Su declaración es que, aburrida de css con less/secs es la mejor solución. La parte de su thesises en favor de la css:

• extensible externamente
• leverable (estilos en línea overleap todo)
• diseñador-friendly

Lo que yo hago es darle a cada uno de mis componentes reutilizables una costumbre única nombre del elemento y, a continuación, crear un archivo css para ese componente, específicamente, con todas las opciones de estilo para que el componente (y sólo 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 ‘personalizado-componente.css’, cada entrada se iniciará con la costumbre-componente de la etiqueta:

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

Que significa que usted no pierda la crítica de la noción de separación de preocupación. Vista vs estilo. Si usted comparte su componente, es más fácil para los demás el tema es para que coincida con el resto de su página web.

Estilo en JSX es muy similar a la de estilo en HTML.

HTML Caso:

div style=»background-color: rojo; color: blanco»

JSX Caso:

div style={{ backgroundColor: ‘rojo’, color: blanco’ }}

Es realmente depende de cómo gran de la aplicación, si quieres usar preparadores como webpack y paquete de CSS y JS juntos en la construcción y cómo quieres gestionar tu flujo de aplicación! Al final del día, depende de su situación, usted puede tomar la decisión!

Mi preferencia para la organización de archivos en los grandes proyectos que se van a separar CSS y JS archivos, podría ser más fácil de compartir, más fácil para la interfaz de usuario a la gente a ir a través de los archivos CSS, también es mucho más prolijo archivo de la organización para toda la aplicación!

Siempre pensar de esta manera, asegúrese de que en la fase de desarrollo de todo están donde deberían estar, llamado correctamente y ser fácil para los desarrolladores para encontrar las cosas…

Yo personalmente la combinación de ellos depende de mi necesidad, por ejemplo…
Trate de usar css externo, pero si es necesario Reaccionar aceptará estilo, usted tiene que pasar como un objeto con el valor de la 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í es el booleano, basado en un estilo JSX sintaxis:

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

Generalmente tengo secs archivo asociado a cada Reaccionar componente. Pero, no veo razón por la que no comprenden el componente con la lógica y la mirada en ella. Quiero decir, usted tiene algo similar con componentes web.

Dependiendo de su configuración en línea del peinado puede ofrecer Caliente de recarga. La página web es inmediatamente vuelve a presentar cada vez los cambios de estilo. Esto me ayuda a desarrollar los componentes más rápido. Habiendo dicho eso, estoy seguro de que usted puede configurar una bañera de recarga de medio ambiente para CSS + SECS.

Puede utilizar estilos en línea, pero usted tendrá algunas limitaciones si se utiliza en todos sus estilos, algunas de las limitaciones son que usted no puede usar CSS pseudo selectores y consultas de medios de comunicación allí.

Puede utilizar Radio para resolver esto, pero aún así, siento que tiene el proyecto crece su va a conseguir engorroso.

Me gustaría recomendar el uso de Módulos CSS.

utilizando Módulos CSS usted tiene la libertad de escribir CSS en el archivo CSS y no tiene que preocuparse acerca de la nomenclatura de los enfrentamientos, será atendido por Módulos CSS.

Una ventaja de este método es que se le da funcionalidad de estilo a un componente específico. Esto creará mucho más fácil de mantener el código de la lectura del proyecto de arquitectura para la próxima desarrollador para trabajar en su proyecto.

Para algunos de los componentes, es más fácil utilizar estilos en línea. También, me resulta más fácil y más concisa (como yo lo estoy usando Javascript y CSS no) para animar estilos de componentes.

Para stand-alone componentes, yo uso el «margen Operador’ o ‘…’. Para mí, está claro, hermoso, y trabaja en un espacio reducido. Aquí es un poco de la carga de la animación que hice para mostrar 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
}
}

EDICIÓN DE NOVIEMBRE DE 2019

De trabajo en la industria (Una compañía Fortune 500), NO estoy autorizado para hacer cualquier inline estilo. En nuestro equipo, hemos decidido que de estilo en línea son ilegibles y no sostenible. Y, después de haber visto de primera mano cómo los estilos en línea hacer en apoyo de una solicitud completamente intolerable, yo tendría que estar de acuerdo. Estoy completamente de desalentar a los estilos en línea.

El problema con los estilos en línea es el Contenido de las Políticas de Seguridad (CSP) se están volviendo más comunes, que no te lo permitan. Por lo tanto, recomiendo evitar los estilos en línea completamente.

Actualización:
Para explicar aún más, CSP son encabezados HTTP enviado por el servidor que restringir el contenido que puede aparecer en la página. Es simplemente una más de mitigación que pueden ser aplicadas a un servidor para detener a un atacante de hacer algo travieso si el desarrollador de código en el sitio mal.

El propósito de la mayoría de estas restricciones es dejar de XSS (cross-site scripting) ataques. XSS es donde un atacante descubre una manera de incluir su propio javascript en su página (por ejemplo, si yo pongo mi nombre de usuario bob<SCRIPT>alert("hello")</SCRIPT> y, a continuación, publicar un comentario, y que visita la página, no debería mostrar una alerta). Los desarrolladores deben negar la capacidad de tener un usuario para agregar contenido como este en el sitio, pero sólo en el caso de cometer un error, CSP bloques de la carga de la página si se encuentra cualquier script> etiquetas.

CSP son sólo un nivel adicional de protección para los desarrolladores para asegurarse de si se cometió un error, que un atacante no puede causar problemas para los visitantes de ese sitio.

Para que todos se XSS, pero ¿y si el atacante no puede incluir <script> las etiquetas, pero puede incluir <style> etiquetas o incluir un style= parámetro en una etiqueta? Entonces él podría ser capaz de cambiar la apariencia del sitio de tal manera que estás engañado a hacer clic en el botón equivocado, o algún otro problema. Esto es mucho menos de una preocupación, pero aún así algo a evitar, y CSP hace por ti.

Un buen recurso para las pruebas de un sitio para el CSP es https://securityheaders.io/

Usted puede leer más acerca de CSP en: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Comparar a escribir sus estilos en un archivo css, Reaccionar el atributo de estilo tiene las siguientes ventajas:

1. La capacidad para utilizar las herramientas de javascript como un lenguaje de programación proporciona para controlar el estilo de sus elementos. Esto incluye la incrustación de las variables, condiciones de uso, y de paso estilos a un niño de componentes.
2. Un «la» enfoque. No más separación de de HTML, JS y CSS en el código escrito para el componente. Código del componente que está consolidado, y escrito en un solo lugar.

Sin embargo, la Reaccionar el atributo de estilo viene con un par de inconvenientes – usted no puede

1. No se puede utilizar consultas de medios de comunicación
2. No se puede utilizar el pseudo selectores,
3. menos eficiente en comparación con las clases CSS.

El uso de CSS en JS, usted puede conseguir todas las ventajas de un estilo de etiqueta, sin los inconvenientes. A partir de hoy hay un par de bien popular css compatibles en js-bibliotecas, incluyendo: la Emoción, Estilo de los Componentes, y el Radio. Las bibliotecas son para css tipo de lo Reaccionar es HTML. Ellos le permiten escribir el código CSS y el control de la CSS en el código JS.

vamos a comparar cómo nuestro código buscará estilo de un elemento simple. Vamos a estilo de un «hola mundo» div lo que demuestra la gran escritorio, y más pequeños en el móvil.

Utilizando el atributo style

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

Desde la consulta de medios de comunicación no es posible en un estilo de etiqueta, vamos a añadir un nombre de clase para el elemento y añadir una regla css.

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

Con la Emoción del 10 css etiqueta

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

Emoción también soporta cadenas de plantillas, así como el estilo de los componentes. Así que si usted 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 capuchas «Css JS» los usos de clases css. La emoción fue, específicamente, construir con el rendimiento en mente, y utiliza el almacenamiento en caché. En comparación a Reaccionar los atributos de estilo Css JS proporcionará un mejor rendimiento.

Mejores Prácticas

Aquí están algunas de las mejores prácticas recomiendo:

1. Si usted desea que el estilo de sus elementos en línea, o en su JS, usar un css-en-js de la biblioteca, no utilice un atributo de estilo.

Debería ser el objetivo de hacer todo el estilo de esta manera, y no tienen los estilos en todos los especificados en mi archivo CSS?

1. Si utiliza un css-en-js solución no es necesario escribir los estilos en los archivos Css. Escribiendo tu css en JS es superior como usted puede utilizar todas las herramientas de un lenguaje de programación como JS proporciona.

debo evitar estilos en línea completamente?

1. La estructuración de su código de estilo en JS es bastante similar a la estructuración de su código en general. Por ejemplo:
   • reconocer los estilos que se repiten, y escribirlas en un solo lugar. Hay dos maneras de hacer esto en la Emoción:

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

• Reaccionar patrón de codificación es de encapsulado de componentes – HTML y JS que controla un componente está escrito en un archivo. Que es donde tu css/código de estilo a estilo componente que pertenece.

• Cuando sea necesario, agregar un estilo a la proposición de su componente. De esta manera usted puede reutilizar el código y estilo escrito en un componente hijo, y personalizarlo a sus necesidades específicas por el componente de los padres.

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

Puede utilizar StrCSS así, se crea aislado nombres de clases y mucho más! Ejemplo de código se vería. Usted puede (opcional) instale el VSCode extensión de Visual Studio de Mercado para el resaltado de sintaxis apoyo!

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

Algún tiempo que requerimos para el estilo de algunos de los elementos de un componente, pero si tenemos que mostrar que el componente único ni el estilo es lo de menos, a continuación, en lugar de utilizar la clase CSS vamos a por los de estilo en línea en reaccionar js. reactjs de estilo en línea es el mismo que el HTML de estilo en línea sólo los nombres de propiedad son un poco diferentes

Escribir su estilo en cualquier etiqueta con estilo={{prop:»valor»}}

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;