Comment dois-je utiliser du css dans reactJS?

Je suis nouveau sur reactJS avec ES6 et avoir beaucoup lu sur le CSS et le problème à résoudre est le mondial style.css et au lieu d'utiliser

styles/index.js

var styles = {
  transparentBg: {
    background: 'transparent'
  }
};

Beaucoup diront que vous devriez revenir en arrière et écrire CSS (je ne sais pas ce qui réagit nom est pour le CSS, le code ci-dessus) dans chaque classe au lieu d'un fichier distinct, si vous n'avez pas des centaines de classes CSS. Cela fait bizarre. Est-il vrai?

De nombreux frameworks CSS, Bootstrap populaire est encore dans les "anciens" de CSS. Est-il question? Savoir que l'application fonctionne toujours, mais il doit y avoir une raison qui réagissent choisi de faire de cette façon. Puis-je faire quelque chose?

Quelle est la meilleure pratique lors de l'utilisation de CSS et des frameworks CSS avec ReactJS?

Cette question est trop large, d'opinion ou nécessite un débat, et est donc hors sujet pour Stack Overflow. Si vous avez un spécifique, responsables de programmation de problème, veuillez fournir les détails.

OriginalL'auteur Anders | 2016-05-10

  1. 17

    C'est subjectif, mais à mon avis, il est plus pratique d'utiliser les CSS via Des Modules CSS et PostCSS.

    Par exemple, vous pouvez avoir un fichier CSS comme ceci:

    .btn {
  border: 1px solid black;
  border-radius: 2px;
}

.icon {
  background: url(...);
}

    Qui est utilisé Réagir composant via css-loader?les modules=true comme suit:

    import React from 'react';
import s from './Button.css';

function Button() {
  return (
    <button className={s.btn}><i className={s.icon} />Click Me</button>
  );
}

export default Button;

    Avec la magie de des Modules CSS ce composant sera rendue à la suite des balises HTML dans debug (développement) mode:

    <button class="Button_btn_d41d8"><i class="Button_icon_7b91e"></i>Click Me</button>

    Où chaque CSS classname est composé de <ComponentName>-<ClassName>-<Hash>, de manière efficace d'éviter les conflits entre les noms de classe CSS avec le même nom dans plusieurs composants. Et dans la version (de production) de l'environnement, de la même composante sera rendu:

    <button class="d41d"><i class="7b91"></i>Click Me</button>

    Où chaque nom de classe est à seulement 4-5 caractères chaîne de hachage.

    C'est la façon dont il fonctionne dans Réagir Starter Kit (disclaimer: je suis l'auteur)

    OriginalL'auteur Konstantin Tarkus

  2. 2

    Il n'y a pas de "bonne" façon d'écrire le CSS à Réagir. Je vais vous donner quelques options et vous leur donner un essai et choisir ce qui est le mieux pour vous.

    CSS pour Réagir:

    Aphrodite et Radium

    Ou vous pouvez continuer à l'utiliser .fichiers css:
    Sass, Less, Stylet et PostCSS.

    Est-il quelque chose de négatif (par exemple la performance) à l'aide de vieux .les fichiers css?
    J'aime utiliser inline style de tout garder dans un fichier, et aussi je peux utiliser la dynamique JS valeurs, mais non. Il n'y a pas des problèmes de performances à l'aide de la commune .fichier css.

    OriginalL'auteur KadoBOT

  3. 1

    Est beaucoup subjectif, mais je vous suggère de maintenir l'utilisation de la classique .css peut-être avec quelques préprocesseur. Je sais qu'il a envie de suivre la promesse d'avoir certains composants entièrement portable et qui incluent tous sa logique et son style, mais je pense que le plus propre approche consiste à utiliser les css pour ce qui a été créé.

    Le code de base restent plus lisible, et vous trouverez toujours plus de soutien et de ressources pour les classiques des flux de travail.

    OriginalL'auteur ciaoben