elm-css を使用したくない理由について

...、CSS モジュール、CSS-in-JS、および制約がない場合は Tailwind を使用します。

私はこれについてかなり長い間考えてきましたが、Josh W. Comeau の講演「CSS の教え方」を見るまで明確に表現できませんでした。

ジョシュが話の始めに出した問題を考えてみましょう。コンテナ内に画像が置かれているのですが、画像の下に奇妙な隙間があることがわかりました。

注目すべき興味深い点は、JSX または elm-html を使用して記述した場合でも問題が解決しないことです。したがって、これは基本的に HTML/CSS の問題です。

Josh が見つけた最初の解決策、特にセクション要素で line-height: 0 を使用すると、この問題を修正できます。また、そのソリューションを elm-css、CSS モジュール、CSS-in-JS、Tailwind の対応するソリューションに簡単に変換できます。

例: 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 [ ... ] [] ]

例:追い風付き:

<p>問題は解決しました。次へ進みます。でも待ってください。 Josh が正しく指摘しているように、問題を深く理解すると、それが問題を解決する最善の方法ではないことがわかります。そしてこれが私に重要な洞察をもたらしました。</p>

<h2>
  
  
  重要な洞察
</h2>

<p>これらすべての抽象化、elm-css、CSS モジュール、CSS-in-JS、Tailwind などは、CSS を抽象化しようとしますが、<strong>メンタル モデルを変更しない</strong>ため、CSS を抽象化できません。スタイリングの問題について推論する必要があります。これらは間違いなく CSS の使用を便利にしますが、スタイルの問題が発生した場合、CSS の仕組みを深く理解していない人は解決策を見つけるのに苦労するでしょう。</p>

<p>一歩下がって考えてみましょう。これらのテクノロジーで記述しますが、思考は CSS で行います。あなたがしなければならない。これらのテクノロジーは、スタイリングの根本的な問題を解決することに関しては何の価値もありません。あるスタイリング ソリューションが別のスタイリング ソリューションよりも優れているとどうやって判断するのでしょうか。 Web の哲学、HTML の哲学、CSS の哲学を理解する必要があります。技術的なことばかりではありません。物事にはやり方と理由があります。</p>

<p>こう考えてみてください。 CSS は理解していないが、Elm については Richard Feldman よりも専門家である開発者がチームに加わったとします。 elm-css を使用してスタイル設定され、コンテナー内に画像が含まれる Elm ビューを提供します。タイプ別に考えることは、問題に対する良い解決策を見つけるのに役立つでしょうか?上記の elm-css で作成した line-height: 0 ソリューションは、型チェッカーに合格します。 elm-css はタイプセーフであるため、より良い解決策にはつながりませんでした。いいえ、問題の根本に到達し、最終的にはより良い解決策につながるレイアウト モードについて考えることです。そこに到達する唯一の方法は、Elm ではなく CSS で考えることでした。これは基本的に CSS の問題です。</p>

<p>CSS を無視したいとは思いますが、それでも学習する必要があります。しかし、elm-ui はどうでしょうか?</p><h2>
  
  
  エルム・ウイ
</h2>

<p>elm-ui を使用すると、HTML や CSS について考える必要がなくなるため、メンタル モデルが変わります。それは斬新ですね。それは印象的ですね。私が言及した他のテクノロジーはどれもこれに近いものはありません。サインしてください、私は売れています。しかし、それはウェブには適合しません。それはウェブの性質に反しています。</p>

<p>elm-ui に関して私が抱えている 2 つの大きな問題は、硬直性と分裂に関係しています。それは、自分が取り組んでいるドメインの哲学と、そのコミュニティ全体が何を達成しようとしているのかを理解することに戻ります。たとえば、 elm-ui はおそらくネイティブ デスクトップ アプリケーションに最適です。しかし、ウェブでは流動性とアクセシビリティが非常に重視されています。</p>

<p>そのような文脈を考えると、このボタンが Web 用のボタンを実装する恐ろしい方法であるとどのように判断するかわかりますか?私の言っていることを理解するように努めてください。それは技術的な問題ではなく、哲学的な問題です。そのボタンは柔軟性が低く、アクセスできません。</p>

<h2>
  
  
  では、なぜ elm-css などを使用したくないのでしょうか?
</h2>

<p>シンプル。これらは、ほとんど利益を得ることなく、より多くの抽象化を提供します。私は昔、時間をかけて CSS を学びました。私は専門家ではありませんが、BEM といくつかのユーティリティ クラスでなんとかなります。</p>

<p>ここからが問題です。 CSS での考え方を知っているので、プロジェクトで必要な場合は、他のテクノロジーをすぐに習得できます。これらの他のテクノロジーは、別の方法で CSS を作成するのに役立つだけです。はい、それらが解決する問題が実際の問題であることは承知していますが、特に近年では、非常に優れた代替の純粋な CSS ソリューションが存在します。</p>

<p>CSS はどこにも行きません。 Web サイトや Web アプリケーションを長期間構築する予定がある場合、時間をかけて CSS を深く理解することは素晴らしい投資です。</p>

<h2>
  
  
  結論
</h2>

<p>elm-css、CSS モジュール、CSS-in-JS、Tailwind などは素晴らしいテクノロジーです。残念ながら、CSS を学習して深く理解する必要がなくなるわけではありません。すでに CSS に精通している場合は、これらのテクノロジーをぜひ使用してください。これらのテクノロジーは便利な場合があります。特に、UI のプロトタイプを簡単に作成できる Tailwind を使用できます。ただし、CSS を使用するのが難しく、ひ​​そかに CSS が嫌いな場合は、コードと同じ場所にスタイルを記述して具体性を避けている可能性がありますが、それでも CSS のことが頭から離れないことを知っておいてください。ただし、CSS のメンタル モデルが非常に弱いため、基本的なスタイルの問題が発生するたびに、CSS がさらに嫌いになるだけです。そのスパイラルに囚われないでください。代わりに、CSS を学習してください。</p>

<h2>
  
  
  ニュースレターを購読する
</h2>

<p>エルムでスキルを向上させることに興味がある場合は、私のニュースレター「エルムとドウェイン」を購読することをお勧めします。詳細については、このお知らせをお読みください。</p>


          

            
        

以上がelm-css を使用したくない理由についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。