Warum ich elm-css lieber nicht verwende

..., CSS-Module, CSS-in-JS und Rückenwind, wenn ich nicht dazu gezwungen bin.

Ich habe eine ganze Weile darüber nachgedacht, konnte es aber erst klar formulieren, als ich Josh W. Comeaus Vortrag „How to Teach CSS“ gesehen habe.

Nehmen wir das Problem, mit dem Josh seinen Vortrag beginnt. Wir haben ein Bild in einem Container und es stellt sich heraus, dass sich unter dem Bild eine seltsame Lücke befindet.

Eine interessante Sache ist, dass das Problem auch dann weiterhin besteht, wenn wir es mit JSX oder elm-html schreiben. Es handelt sich also grundsätzlich um ein HTML/CSS-Problem.

Wir können das Problem mit der ersten Lösung beheben, die Josh gefunden hat, insbesondere indem wir line-height: 0 für das Abschnittselement verwenden. Und es ist einfach, diese Lösung in entsprechende Lösungen in elm-css, CSS-Modulen, CSS-in-JS und Tailwind zu übersetzen.

Für z.B. mit 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 [ ... ] [] ]

Für z.B. mit Rückenwind:

<Abschnitt>



<p>Super, Problem gelöst. Fahren Sie mit dem nächsten fort. Aber warte. Wie Josh zu Recht betont: Wenn man das Problem genau versteht, erkennt man, dass dies nicht der beste Weg ist, es zu beheben. Und das führte mich zu einer wichtigen Erkenntnis.</p>

<h2>
  
  
  Wichtige Erkenntnisse
</h2>

<p>All diese Abstraktionen, ELM-CSS, CSS-Module, CSS-in-JS, Tailwind usw., die versuchen, CSS zu abstrahieren, scheitern daran, weil <strong>sie das mentale Modell NICHT ändern</strong> Sie müssen über Styling-Probleme nachdenken. Sie machen die Verwendung von CSS auf jeden Fall bequemer, aber wenn Styling-Probleme auftreten, wird die Person, die nicht genau versteht, wie CSS funktioniert, Schwierigkeiten haben, eine Lösung zu finden.</p>

<p>Gehen Sie einen Schritt zurück und denken Sie darüber nach. Sie schreiben in diesen Technologien, denken aber in CSS. Du musst. Diese Technologien bieten keinen Wert, wenn es darum geht, grundlegende Styling-Probleme zu lösen. Wie entscheiden Sie überhaupt, wann eine Styling-Lösung besser ist als eine andere? Sie müssen die Philosophie des Webs, die Philosophie von HTML und die Philosophie von CSS verstehen. Es ist nicht alles technisch. Es gibt eine Art und Weise, Dinge zu tun, und einen Grund dafür.</p>

<p>Denken Sie so darüber nach. Angenommen, ein Entwickler tritt Ihrem Team bei, der kein CSS versteht, aber ein Elm-Experte ist, wissen Sie, besser als Richard Feldman. Sie geben ihnen eine Elm-Ansicht, die mit elm-css gestaltet ist und das Bild in einem Containerproblem enthält. Kann ihnen das Denken in Typen helfen, eine gute Lösung für das Problem zu finden? Die line-height: 0-Lösung, die wir oben in elm-css geschrieben haben, besteht die Typprüfung. elm-css hat uns nicht zu einer besseren Lösung geführt, da es typsicher ist. Nein, das Nachdenken über Layoutmodi geht dem Problem auf den Grund und führt schließlich zu einer besseren Lösung. Der einzige Weg dorthin bestand darin, in CSS zu denken, nicht in Elm. Im Grunde handelt es sich um ein CSS-Problem.</p>

<p>So sehr wir CSS auch ablehnen würden, wir müssen es noch lernen. Aber was ist mit elm-ui?</p><h2>
  
  
  Ulme-ui
</h2>

<p>elm-ui verändert Ihr mentales Modell, da Sie bei der Verwendung nie in HTML und CSS denken müssen. Das ist neu. Das ist beeindruckend. Keine der anderen Technologien, die ich erwähnt habe, schafft das auch nur annähernd. Melde mich an, ich bin verkauft. Allerdings passt es nicht ins Web. Es widerspricht dem Strich des Internets.</p>

<p>Die beiden Hauptprobleme, die ich mit elm-ui habe, haben mit Starrheit und Divitis zu tun. Es kommt darauf an, die Philosophie des Bereichs, in dem Sie arbeiten, zu verstehen und zu verstehen, was von dieser Community als Ganzes erreicht werden soll. Für z.B. elm-ui wäre wahrscheinlich großartig für native Desktop-Anwendungen. Aber im Web werden Flüssigkeit und Zugänglichkeit zu hoch geschätzt.</p>

<p>Können Sie sich in diesem Kontext vorstellen, dass diese Schaltfläche eine schreckliche Art ist, eine Schaltfläche für das Web zu implementieren? Bitte versuchen Sie zu verstehen, was ich sage. Es ist kein technologisches Problem, sondern ein philosophisches. Diese Schaltfläche ist unflexibel und unzugänglich.</p>

<h2>
  
  
  Warum ziehe ich es also vor, elm-css et al. nicht zu verwenden?
</h2>

<p>Einfach. Sie bieten Ihnen mehr Abstraktion für sehr wenig Gewinn. Ich habe mir vor langer Zeit die Zeit genommen, CSS zu lernen. Ich bin kein Experte, komme aber mit BEM und ein paar Utility-Kursen zurecht.</p>

<p>Hier ist die Sache. Ich kann jede dieser anderen Technologien sofort erlernen, wenn ein Projekt sie erfordert, weil ich weiß, wie man in CSS denkt. Diese anderen Technologien helfen Ihnen lediglich dabei, CSS auf eine andere Art und Weise zu schreiben. Ja, ich weiß, dass die Probleme, die sie lösen, echte Probleme sind, aber insbesondere in den letzten Jahren gibt es sehr gute alternative reine CSS-Lösungen.</p>

<p>CSS führt nirgendwo hin. Wenn Sie vorhaben, über einen längeren Zeitraum Websites und Webanwendungen zu erstellen, ist es eine großartige Investition, sich die Zeit zu nehmen, sich gründlich mit CSS zu befassen.</p>

<h2>
  
  
  Abschluss
</h2>

<p>elm-css, CSS-Module, CSS-in-JS, Tailwind usw. sind wunderbare Technologien. Leider entbinden sie Sie nicht von der Notwendigkeit, CSS zu erlernen und gründlich zu verstehen. Wenn Sie sich bereits mit CSS auskennen, sollten Sie auf jeden Fall diese Technologien verwenden, da sie manchmal praktisch sein können, insbesondere Tailwind, das die Erstellung von Prototypen für Benutzeroberflächen vereinfacht. Wenn Sie jedoch Schwierigkeiten mit der Verwendung von CSS haben und es insgeheim nicht mögen, denken Sie einfach daran, dass Sie Ihre Stile möglicherweise zusammen mit Ihrem Code schreiben und Spezifität vermeiden, aber CSS wird Ihnen trotzdem im Kopf herumschwirren. Allerdings wäre Ihr mentales CSS-Modell so schwach, dass jedes grundlegende Stilproblem, auf das Sie stoßen, Sie nur noch mehr hassen würde. Lassen Sie sich nicht in dieser Spirale verstricken. Lernen Sie stattdessen CSS.</p>

<h2>
  
  
  Abonnieren Sie meinen Newsletter
</h2>

<p>Wenn Sie daran interessiert sind, Ihre Fähigkeiten bei Elm zu verbessern, dann lade ich Sie ein, meinen Newsletter „Elm with Dwayne“ zu abonnieren. Um mehr darüber zu erfahren, lesen Sie bitte diese Ankündigung.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonWarum ich elm-css lieber nicht verwende. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!