Pourquoi je préfère ne pas utiliser elm-css

..., Modules CSS, CSS-in-JS et Tailwind quand je ne suis pas obligé de le faire.

J'y réfléchis depuis un bon moment, mais je n'ai pas réussi à l'exprimer clairement jusqu'à ce que je regarde la conférence de Josh W. Comeau "Comment enseigner le CSS".

Prenons le problème avec lequel Josh commence son discours. Nous avons une image dans un conteneur et il s'avère qu'il y a cet étrange espace sous l'image.

Une chose intéressante à remarquer est que le problème persiste même si nous l'écrivons en utilisant JSX ou elm-html. C'est donc fondamentalement un problème HTML/CSS.

On peut résoudre ce problème en utilisant la première solution trouvée par Josh, notamment en utilisant line-height: 0 sur l'élément section. Et il est facile de traduire cette solution en solutions correspondantes dans elm-css, CSS Modules, CSS-in-JS et Tailwind.

Par ex. avec elm-css :

import Css
import Html.Styled as H
import Html.Styled.Attributes as HA

main =
    H.toUnstyled <|
        H.section
            [ HA.css [ Css.lineHeight (Css.px 0) ] ]
            [ H.img [ ... ] [] ]

Par ex. avec Tailwind :

<section>



<p>Super, problème résolu. Passez au suivant. Mais attendez. Comme Josh le souligne à juste titre, lorsque vous comprenez profondément le problème, vous réalisez que ce n'est pas la meilleure façon de le résoudre. Et cela m’a amené à une idée clé.</p>

<h2>
  
  
  Aperçu clé
</h2>

<p>Toutes ces abstractions, elm-css, modules CSS, CSS-in-JS, Tailwind, etc., qui tentent d'abstraire le CSS, n'y parviennent pas parce que <strong>elles ne changent PAS le modèle mental</strong> qui vous devez utiliser pour raisonner sur les problèmes de style. Ils facilitent certainement l'utilisation de CSS, mais lorsque des problèmes de style surviennent, la personne qui ne comprend pas profondément le fonctionnement de CSS aura du mal à trouver une solution.</p>

<p>Prenez du recul et réfléchissez-y. Vous écrivez dans ces technologies mais vous pensez en CSS. Il le faut. Ces technologies n’offrent aucune valeur lorsqu’il s’agit de résoudre des problèmes fondamentaux de style. Comment décidez-vous même quand une solution de style est meilleure qu’une autre. Il faut comprendre la philosophie du web, la philosophie du HTML, la philosophie du CSS. Tout n'est pas technique. Il y a une façon de faire les choses et une raison pour laquelle.</p>

<p>Pensez-y de cette façon. Supposons qu'un développeur rejoigne votre équipe qui ne comprend pas CSS mais soit expert en Elm, vous savez, mieux que Richard Feldman. Vous leur donnez une vue Elm stylisée à l'aide d'elm-css et contenant l'image dans un problème de conteneur. La réflexion par types peut-elle les aider à trouver une bonne solution au problème ? La solution line-height: 0 que nous avons écrite dans elm-css ci-dessus passe le vérificateur de type. elm-css ne nous a pas conduit à une meilleure solution car elle est de type sécurisé. Non, c'est la réflexion sur les modes de mise en page qui va à la racine du problème et conduit finalement à la meilleure solution. La seule façon d’y arriver était de penser en CSS, pas en Elm. C'est fondamentalement un problème CSS.</p>

<p>Même si nous aimerions rejeter le CSS, nous devons encore l'apprendre. Mais qu'en est-il d'elm-ui ?</p><h2>
  
  
  orme-ui
</h2>

<p>elm-ui change votre modèle mental car vous n'avez jamais besoin de penser en termes de HTML et de CSS lorsque vous l'utilisez. C'est nouveau. C'est impressionnant. Aucune des autres technologies que j’ai mentionnées n’arrive à faire cela. Inscrivez-moi, je suis vendu. Cependant, cela ne correspond pas au Web. Cela va à contre-courant du Web.</p>

<p>Les deux problèmes majeurs que j'ai avec elm-ui sont liés à la rigidité et à la division. Cela revient à comprendre la philosophie du domaine dans lequel vous travaillez et ce que tente d'accomplir cette communauté dans son ensemble. Par ex. elm-ui serait probablement idéal pour les applications de bureau natives. Mais, sur le web, la fluidité et l'accessibilité sont trop valorisées.</p>

<p>Dans ce contexte, voyez-vous comment on pourrait juger ce bouton comme une horrible façon d'implémenter un bouton pour le Web ? S'il vous plaît, essayez de comprendre ce que je dis. Ce n’est pas une question technologique, c’est une question philosophique. Ce bouton est rigide et inaccessible.</p>

<h2>
  
  
  Alors pourquoi est-ce que je préfère ne pas utiliser elm-css et al. ?
</h2>

<p>Simple. Ils vous donnent plus d'abstraction pour très peu de gain. J'ai pris le temps d'apprendre le CSS il y a longtemps. Je ne suis pas un expert mais je me débrouille avec BEM et une poignée de classes utilitaires.</p>

<p>Voici le problème. Je peux adopter n'importe laquelle de ces autres technologies en un instant si un projet l'exige car je sais penser en CSS. Ces autres technologies vous aident simplement à écrire du CSS d'une manière différente. Oui, je sais que les problèmes qu'ils résolvent sont de vrais problèmes, mais, surtout ces dernières années, il existe de très bonnes solutions alternatives purement CSS.</p>

<p>CSS ne va nulle part. Si vous envisagez de créer des sites Web et des applications Web pendant une longue période, prendre le temps de comprendre en profondeur CSS est un excellent investissement.</p>

<h2>
  
  
  Conclusion
</h2>

<p>elm-css, CSS Modules, CSS-in-JS, Tailwind, etc. sont de merveilleuses technologies. Malheureusement, ils ne vous dispensent pas de la nécessité d’apprendre et de comprendre en profondeur le CSS. Si vous maîtrisez déjà CSS, n'hésitez pas à utiliser ces technologies, car elles peuvent parfois être pratiques, en particulier Tailwind, qui facilite le prototype des interfaces utilisateur. Mais si vous avez du mal à utiliser CSS et que vous ne l'aimez pas secrètement, sachez simplement que vous écrivez peut-être vos styles avec votre code et évitez les spécificités, mais CSS sera toujours dans votre esprit. Sauf que votre modèle mental de CSS serait si faible que chaque problème de style fondamental que vous rencontreriez ne ferait que vous faire détester encore plus le CSS. Ne restez pas coincé dans cette spirale. Apprenez plutôt CSS.</p>

<h2>
  
  
  Abonnez-vous à ma newsletter
</h2>

<p>Si vous souhaitez améliorer vos compétences avec Elm alors je vous invite à vous abonner à ma newsletter, Elm avec Dwayne. Pour en savoir plus, veuillez lire cette annonce.</p>


          

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!