Tutoriel JavaScript/React : Pourquoi le CSSinJS

Dans cette vidéo je vous propose de découvrir le principe du CSSinJS

Soutenez Grafikart:

Retrouvez Grafikart sur:

[bobo]

Je ne commente quasiment jamais mais je veux juste te remercier pour ton travail . Tu es :
- clair
- concis
- didactique
Tu m'as permis d'avoir un bon niveau en frontend et je t'en suis infiniment reconnaissant!
Tu es d'utilité publique !

[fabianteichmann]

Merci énorme pour tout ton travail qui est d'une excellente qualité !

[lepresk]

Toujours aussi précis et concis dans les explications, merci encore pour ce nouveau tuto

[MrToup]

Super vidéo. On utilise beaucoup CCS in JS au travail et je reconnais tout les points dont tu parles dans la vidéo. Ton explication m'a même ouvert les yeux sur plusieurs choses... Bref, vidéo d'excellente qualité !

[nchanjepaularmel]

bonjour la grande communauté Grafikart
je suis nouveau dans le groupe et je suis débutant en programmation webe et j'apprends le frame wok laravel

[VeGaaS]

Non expert en développement, je me demande s'il est possible de cumulé CSS et CSSinJS en fonction des éléments pour optimiser les performances

[samuelgomez]

Merci pour cette vidéo.
Perso je préfère utiliser les Web Components (scopés par le shadowdom) avec une bonne utilisation des CSS variables pour garder la possibilité de customiser le composant depuis le style global. Comme ça, pas de dépendance JS, surcharge CSS facile, etc ... On pourra peut-être même bientôt partager le style entre les Web components avec adoptedStyleSheets :)

[bouazzakhalifa]

Merci pour ce tuto! et aussi pour le background foncé de tes diapos qui reposent les yeux ;)

[CaptainCoder]

Hm pour régler les problèmes de porter on pourrait utiliser les modules css qui permettent d’isoler les différentes règles css

[choco-code]

La formation sur Api plate-forme vient quand Jonathan ? J'ai hâte de me la procurer même payant

[ia-maxiweb-nc]

Pas très convaincu pour le moment mais très bonne explication

[Balecrock]

Pour tous les problèmes mentionnés il existe des solutions sans effort pour qui à une bonne maitrise du SCSS (notamment les CSS modules qui sont un bon compromis). Par ailleurs les styled-components sont à mon sens adaptés à des gros sites amenés à évoluer ou à être adaptés en react-native. Des petits sites avec de l'animation et tres peu de composants en commun n'ont pas d'intérêt à être codés avec les styled-components même si c'est une bonne technologie. Lorsqu'on fait du CSS complexe styled-components represente un effort important et un perte de temps (notamment les loops SASS en styled-components, les composants imbriqués avec des interactions de styles complexes, le debugging CSS degueulasse dans Chrome debugguer, une facilité de lecture réduite entre CSS et JS, le formatage du code dans l'IDE sur des styles complexes, les homonymes entre composants et styled-components, et si on veut mettre nos styles dans un objet l'interdependance entre les styles est perdue, la facilité de lecture entre HTML/CSS/JS: obligé de lire du JS partout, les performances réduites sur le repaint / reflow du navigateur...).
Pour conclure Styled-components c'est bien pour répondre à des besoins précis mais il faut se méfier de la mode et bien l'utiliser sur un projet où il est utile à mon sens.
Cela dit bonne video !

[pierresopc]

Bon tuto, par contre j'ai souvent votre cadre video sur les slides (sur portable)

[Jimi-bxxf]

Grafikart comment trouver une mission en développement web ?

[Kolacaine]

Merci de l'explication.
Le seul argument fiable pour moi reste l'optimisation sur du code "mort"... le reste, écrire des fonctions JS pour faire des media-querie etc, quand on sait ce que prends en ressource l'écriture du CSS (SCSS) c'est à dire quasi rien comparé a l'écriture du JS, je n'en voit pas trop l'interet hormis le fait de rester dans l'eco-système JS comme tu l'a dit.

Finalement, je reste convaincu que pour moi c'est un affreux retour en arrière, bien que l'argument du CSSinJS reste intéressant dans une structure de composant pour éviter les mélanges de CSS

[Learnbynet]

Un des gros soucie pour moi c'etai de retrouver mes reference CSS !
Le bon vieux system des CSS et plus aucun des problem énumérer.
Tout est connecter au project avec Intelisence et peek tres bien tous React et les dépendance.
Fonctionne aussi avec du .less et les `node_module` si vous avez un bon system, nécessitant la mise en place d'un cache.
PS: moi je prefaire les inJS lorsque ces local seulement, et pour le global j'utilise encore .css, .less.
Donc tres facile a gerer pour moi !

[yadusolparterre]

Excellente vidéo, merci. Par contre ça ne me donne vraiment pas envie de toucher à CSS-in-JS😝

[gabrieltavernier]

Ce que j'ai du mal à comprendre c'est que la cascade c'est la base du CSS, c'est même la première lettre du nom : Cascading. C'est (c'était visiblement) un atout du CSS, bizarrement aujourd'hui ce n'est plus le cas ! Perso je me sers de la cascade dans tous mes projets, si on me retire la cascade j'écris 2 fois plus de code... (c'est compensé par les fonctionnalités JS mais quand même)
Le petit truc cool c'est qu'en effet tout est groupé au même endroit. Le truc moins cool c'est que si tu ne maitrises pas le JS impossible de maintenir le CSS...
Pour moi ça rajoute de la complexité là où la force de CSS c'est sa simplicité :-/

[julienhany]

L'usine à gaz...
On est bien loin du principe KISS

[stephanelegrand]

4 coupures de publicités dans cette vidéo 😱