Catégories
Astuces et Design

Comparaison des méthodes de coiffage en 2020

Sur Smashing, Adebiyi Adedotun Lukman couvre toutes ces méthodes de style. C'est dans le contexte de Next.js, ce qui est assez important car Next.js a des façons spécifiques de travailler avec ces outils, c'est React et, par conséquent, est une architecture basée sur des composants. Mais les méthodes de style évoquées transcendent Next.js et peuvent s'appliquer largement à de nombreux sites Web.

Voici mes points de vue sur toute la table des matières des possibilités de style de nos jours.

  • CSS régulier. Si tu peux, fais. Aucun outillage de construction n'est rafraîchissant. Il vieillira bien. La seule chose que je vraiment manquer sans aucun autre outil est l'imbrication des requêtes multimédias.
  • Toupet. Sass a fait le tour du bloc et est toujours un préprocesseur CSS extrêmement populaire. Sass est intégré à des tonnes d'autres outils, donc choisir Sass ne signifie pas toujours la même chose. Une simple intégration Sass peut être aussi simple qu'un sass --watch src/style.scss dist/style.css script npm. Ensuite, une fois que vous avez accepté le fait que vous avez un processus de construction, vous pouvez commencer à concaténer des fichiers, à réduire, à contourner le cache et à tout ce que vous allez probablement finir par faire de toute façon.
  • Moins et stylet. Je suis surpris qu’ils ne soient pas plus populaires car ils ont toujours été Node et fonctionnent très bien avec la prolifération des processus de construction basés sur Node. Sans oublier que ce sont de jolis préprocesseurs riches en fonctionnalités. Je n'ai rien contre non plus, mais Sass est plus omniprésent, plus développé, et le Sass canonique fonctionne maintenant très bien dans Node-land,
  • PostCSS. Je ne suis pas obligé par PostCSS car je n’aime pas avoir à bricoler les fonctionnalités de traitement que je souhaite. Cela a également le mauvais effet secondaire de rendre le processus d'écriture CSS différent d'un projet à l'autre. De plus, je n'aime pas l'idée de prétraiter les fonctionnalités modernes, dont certaines ne peut pas vraiment être prétraitées (par exemple, les propriétés personnalisées ne peuvent pas être prétraitées). Mais j'ai adoré Autoprefixer quand nous en avions vraiment besoin, basé sur PostCSS.
  • Modules CSS. Si vous travaillez avec des composants dans n'importe quelle technologie, les modules CSS vous donnent la possibilité d'étendre CSS à ce composant, ce qui est une très bonne idée. J'aime cette approche partout où je peux l'obtenir. Votre module CSS peut aussi être Sass, nous pouvons donc y tirer le meilleur parti des deux mondes.
  • CSS-en-JS. Soyons réalistes, cela signifie "CSS-in-React". Si vous écrivez Vue, vous écrivez des styles comme Vue vous aide à le faire. Même chose avec Svelte. Idem avec Angular. React est sans opinion, vous laissant le choix entre des éléments tels que les composants stylisés, styled-jsx, Emotion… il y a beaucoup d'eux. J'ai des projets dans React et j'utilise juste des modules Sass + CSS et je pense que c'est bien, mais beaucoup de gens aiment aussi les approches CSS-inJS. J'ai compris. Vous obtenez le cadrage automatiquement et pouvez faire des choses sophistiquées comme incorporer des accessoires dans les décisions de style. Cela pourrait être génial pour un système de conception.

Si vous voulez entendre d'autres prises chaudes sur ce spectre, les gars de Syntax FM ont récemment sonné dessus.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *