Une introduction de 5 minutes aux composants stylés

CSS est bizarre. Vous pouvez apprendre les bases en 15 minutes. Mais cela peut prendre des années avant que vous trouviez un bon moyen d’organiser vos styles.

Cela est en partie dû aux bizarreries de la langue elle-même. En sortie de boîte, CSS est assez limité, sans variables, boucles ou fonctions. En même temps, il est assez permissif de pouvoir styler des éléments, des classes, des identifiants ou toute combinaison de ceux-ci.

Feuilles de style chaotique

Comme vous l'avez probablement déjà expérimenté, c'est souvent la recette du chaos. Et bien que les pré-processeurs tels que SASS et LESS ajoutent beaucoup de fonctionnalités utiles, ils ne font pas grand-chose pour arrêter l'anarchie CSS.

Ce travail d’organisation a été confié à des méthodologies telles que BEM, qui - bien qu’utile - est tout à fait facultative et ne peut pas être appliquée au niveau de la langue ou de l’outil.

La nouvelle vague de CSS

Quelques années plus tard, une nouvelle vague d’outils basés sur JavaScript tentent de résoudre ces problèmes à la racine, en modifiant la façon dont vous écrivez CSS.

Styled Components est l'une de ces bibliothèques et a rapidement attiré beaucoup d'attention en raison de son mélange d'innovation et de familiarité. Donc, si vous utilisez React (et si vous ne le faites pas, consultez mon plan d’étude JavaScript et mon introduction à React), cela vaut vraiment la peine de jeter un coup d’œil à cette nouvelle alternative CSS.

Je l'ai récemment utilisé pour remodeler mon site personnel. Aujourd'hui, je voulais partager quelques informations apprises au cours du processus.

Composants stylés

La principale chose que vous devez comprendre à propos de Styled Components est que son nom doit être pris littéralement. Vous ne modifiez plus les éléments HTML ni les composants en fonction de leur classe ou de leur élément HTML:

Bonjour tout le monde

h1.title {
  taille de police: 1.5em;
  couleur violet;
}

Au lieu de cela, vous définissez des composants stylés qui possèdent leurs propres styles encapsulés. Ensuite, vous les utilisez librement dans votre base de code:

importer stylisé à partir de 'styled-components';
const Titre = styled.h1`
  taille de police: 1.5em;
  couleur violet;
`;
 Hello World </ Title></pre><p>Cela peut sembler être une différence mineure et, en fait, les deux syntaxes sont très similaires. Mais la différence principale est que les styles font maintenant partie de leurs composants.</p><p>En d’autres termes, nous nous débarrassons des classes CSS en tant qu’étape intermédiaire entre le composant et ses styles.</p><p>Comme le dit Max Stoiber, co-créateur de composants stylés:</p><p>"L'idée de base des composants stylés est d'appliquer les meilleures pratiques en supprimant le mappage entre les styles et les composants."</p><h3>Déchargement de la complexité</h3><p>Cela semblera contre-intuitif au début, car l’intérêt de CSS plutôt que de styler directement les éléments HTML (rappelez-vous la balise <font>?) Est de découpler les styles et les balises en introduisant ce calque de classe intermédiaire.</p><p>Mais ce découplage crée également beaucoup de complexité, et il faut soutenir que, comparé au CSS, un «vrai» langage de programmation tel que JavaScript est beaucoup mieux équipé pour gérer cette complexité.</p><h3>Props Over Classes</h3><p>Conformément à cette philosophie de non-classes, styled-components utilise des accessoires plutôt que des classes pour personnaliser le comportement d'un composant. Donc au lieu de:</p><pre><h1 className = "title primary"> Bonjour tout le monde </ h1> // sera bleu</pre><pre>h1.title {
  taille de police: 1.5em;
  couleur violet;
  
  &.primaire{
    Couleur bleue;
  }
}</pre><p>Vous écrivez:</p><pre>const Titre = styled.h1`
  taille de police: 1.5em;
  couleur: $ {props => props.primary? 'bleu violet'};
`;</pre><pre><Title primary> Hello World </ Title> // sera bleu</pre><p>Comme vous pouvez le constater, les composants stylés vous permettent de nettoyer vos composants React en conservant tous les détails de leur implémentation liés à CSS et HTML.</p><p>Cela dit, CSS styled-components est toujours CSS. Donc, ce genre de choses est aussi totalement valide (bien que légèrement non idiomatique):</p><pre>const Titre = styled.h1`
  taille de police: 1.5em;
  couleur violet;
  
  &.primaire{
    Couleur bleue;
  }
`;</pre><pre><Title className = "primary"> Bonjour tout le monde </ Title> // sera bleu</pre><p>C’est l’une des caractéristiques qui rend les composants stylés très faciles à intégrer: en cas de doute, vous pouvez toujours revenir à ce que vous savez!</p><h3>Mises en garde</h3><p>Il est également important de mentionner que styled-composants est encore un projet jeune et que certaines fonctionnalités ne sont pas encore totalement prises en charge. Par exemple, si vous souhaitez attribuer un style à un composant enfant à partir d'un parent, vous devez utiliser des classes CSS pour le moment (au moins jusqu'à ce que styled-components v2 soit disponible).</p><p>Il n’existe pas non plus de moyen «officiel» de pré-afficher votre CSS sur le serveur, bien que cela soit tout à fait possible en injectant les styles manuellement.</p><p>Et comme les composants stylés génèrent leurs propres noms de classe aléatoires, il est difficile d’utiliser les outils de développement de votre navigateur pour déterminer où vos styles sont définis à l’origine.</p><p>Mais ce qui est très encourageant, c’est que l’équipe principale des composants stylisés est consciente de tous ces problèmes et s’efforce de les résoudre un par un. La version 2 arrive bientôt, et je suis vraiment impatiente de la voir!</p><h3>Apprendre encore plus</h3><p>Mon but ici n’est pas d’expliquer en détail le fonctionnement des composants stylés, mais bien de vous donner un petit aperçu afin que vous puissiez décider vous-même si cela vaut la peine de le vérifier.</p><p>Si j’ai réussi à vous rendre curieux, voici quelques endroits où vous pourrez en apprendre davantage sur les composants stylés:</p><ul><li>Max Stoiber a récemment écrit un article sur la raison des composants stylés pour Smashing Magazine.</li><li>Le référentiel de composants stylés a lui-même une documentation complète.</li><li>Cet article de Jamie Dixon décrit quelques avantages du passage aux composants stylés.</li><li>Si vous voulez en savoir plus sur la manière dont la bibliothèque est réellement mise en œuvre, consultez cet article de Max.</li></ul><p>Et si vous voulez aller encore plus loin, vous pouvez également découvrir Glamour, une version différente du CSS new-wave!</p><p>Temps d'auto-promotion: nous recherchons des contributeurs open-source pour aider avec Nova, le moyen le plus simple de créer des applications React & GraphQL complètes, avec des formulaires, le chargement de données et des comptes d'utilisateurs. Nous n’utilisons pas encore de composants stylés, mais vous pourriez être le premier à les implémenter!</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/design/building-a-color-palette-framework-76db07/" title="Construire un cadre de palette de couleurs">Construire un cadre de palette de couleurs</a><a href="/design/design-thinking-a-manual-for-innovation-d0eeae/" title="Design Thinking: Un manuel pour l'innovation">Design Thinking: Un manuel pour l'innovation</a><a href="/design/mind-the-gap-41a878/" title="Attention à l'écart">Attention à l'écart</a><a href="/design/how-we-designed-page-previews-for-wikipedia-and-what-could-be-done-with-them-in-the-future-af861f/" title="Comment nous avons conçu les aperçus de page pour Wikipedia - et ce qu'on pourrait en faire à l'avenir">Comment nous avons conçu les aperçus de page pour Wikipedia - et ce qu'on pourrait en faire à l'avenir</a><a href="/design/introducing-boosts-an-all-new-way-to-show-your-support-in-basecamp-fde145/" title="Présentation de Boosts: une toute nouvelle façon de manifester votre soutien à Basecamp">Présentation de Boosts: une toute nouvelle façon de manifester votre soutien à Basecamp</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="vn flag"></i></a><a href="https://uk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ua flag"></i></a><a href="https://tr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="tr flag"></i></a><a href="https://th.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="th flag"></i></a><a href="https://sv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ch flag"></i></a><a href="https://sr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="rs flag"></i></a><a href="https://sl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="si flag"></i></a><a href="https://sk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sk flag"></i></a><a href="https://ru.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ru flag"></i></a><a href="https://ro.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ro flag"></i></a><a href="https://pt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pt flag"></i></a><a href="https://pl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pl flag"></i></a><a href="https://de.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="de flag"></i></a><a href="https://ar.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sa flag"></i></a><a href="https://bg.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="bg flag"></i></a><a href="https://cs.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="cz flag"></i></a><a href="https://highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="dk flag"></i></a><a href="https://el.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="gr flag"></i></a><a href="https://es.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="es flag"></i></a><a href="https://et.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ee flag"></i></a><a href="https://fi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fi flag"></i></a><a href="https://hi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="in flag"></i></a><a href="https://hr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hr flag"></i></a><a href="https://hu.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hu flag"></i></a><a href="https://id.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="id flag"></i></a><a href="https://it.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="it flag"></i></a><a href="https://ja.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="jp flag"></i></a><a href="https://ko.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="kr flag"></i></a><a href="https://lt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lt flag"></i></a><a href="https://lv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lv flag"></i></a><a href="https://ms.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="my flag"></i></a><a href="https://nl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="nl flag"></i></a><a href="https://no.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="no flag"></i></a><a href="https://uz.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="uz flag"></i></a></div>highresolution-wallpapers.net<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>