為什麼我不喜歡使用 elm-css

...、CSS 模組、CSS-in-JS 和 Tailwind（當我不受限制時）。

我已經思考這個問題很長一段時間了，但一直無法清楚地表達出來，直到我看了 Josh W. Comeau 的演講「How to Teach CSS」。

讓我們以喬希開始演講的問題為例。我們有一個圖像放在容器中，結果發現圖像下方有一個奇怪的間隙。

值得注意的一個有趣的事情是，即使我們使用 JSX 或 elm-html 編寫問題仍然存在。所以這從根本上來說是一個 HTML/CSS 問題。

我們可以使用 Josh 找到的第一個解決方案來修復它，特別是在部分元素上使用 line-height: 0 。而且，很容易將該解決方案轉換為 elm-css、CSS Modules、CSS-in-JS 和 Tailwind 中的對應解決方案。

例如使用 elm-css:

例如順風：

<p>太好了，問題解決了。繼續下一步。但等等。正如喬許正確指出的那樣，當您深入了解問題時，您就會意識到這不是解決問題的最佳方法。這讓我有了一個重要的見解。 </p>

<h2>
  
  
  關鍵見解
</h2>

<p>所有這些抽象概念，elm-css、CSS 模組、CSS-in-JS、Tailwind 等，試圖抽象掉CSS，但都失敗了，因為<strong>它們不會改變思維模型</strong>你必須用來推理造型問題。它們確實讓 CSS 的使用變得很方便，但是當出現樣式問題時，不深入了解 CSS 工作原理的人將很難找到解決方案。 </p>

<p>退後一步想一想。你用這些技術來寫，但你用 CSS 來思考。你必須這樣做。這些技巧在解決基本的樣式問題時沒有任何價值。您如何決定一種造型解決方案何時優於另一種。你必須了解網路的哲學、HTML 的哲學、CSS 的哲學。這並不全是技術性的。做事有方法，也有原因。 </p>

<p>這樣想吧。假設一個開發人員加入您的團隊，他不懂 CSS，但在 Elm 方面是專家，你知道，比 Richard Feldman 更好。您給他們一個 Elm 視圖，該視圖使用 elm-css 進行樣式設置，並且圖像位於容器問題中。類型思考能否幫助他們找到問題的良好解決方案？我們在上面的 elm-css 中編寫的 line-height: 0 解決方案通過了類型檢查器。 elm-css 並沒有為我們帶來更好的解決方案，因為它是類型安全的。不，它正在考慮佈局模式，以找到問題的根源並最終得出更好的解決方案。實現這一目標的唯一方法是用 CSS 思考，而不是用 Elm 思考。這從根本上來說是一個 CSS 問題。 </p>

<p>儘管我們很想放棄 CSS，但我們仍然需要學習它。但是 elm-ui 呢？ </p><h2>
  
  
  elm-ui
</h2>

<p>elm-ui 改變了你的心理模型，因為使用它時你永遠不必考慮 HTML 和 CSS。這很新穎。這令人印象深刻。我提到的其他技術都無法做到這一點。幫我報名吧，我被賣了。然而，它不適合網路。它違背了網路的規律。 </p>

<p>我對 elm-ui 的兩個主要問題與僵化和分歧有關。這又回到了理解你正在工作的領域的哲學以及整個社區試圖實現的目標。例如elm-ui 可能非常適合本機桌面應用程式。但是，在網路上，流動性和可近性太受重視。 </p>

<p>考慮到這種情況，你能看出人們會如何判斷這個按鈕是一種可怕的網路按鈕實現方式嗎？請嘗試理解我在說什麼。這不是技術問題，而是哲學問題。該按鈕不靈活且無法存取。 </p>

<h2>
  
  
  那為什麼我不喜歡使用 elm-css 等呢？
</h2>

<p>簡單。它們為你提供了更多的抽象，但收穫卻很少。我很早之前就花時間學習CSS了。我不是專家，但我可以使用 BEM 和一些實用程式類別。 </p>

<p>事情是這樣的。如果專案需要，我可以立即掌握任何其他技術，因為我知道如何用 CSS 思考。這些其他技術只是幫助您以不同的方式編寫 CSS。是的，我知道他們解決的問題是真正的問題，但是，特別是近年來，有非常好的替代純 CSS 解決方案。 </p>

<p>CSS 不會消失。如果您打算長期建立網站和 Web 應用程序，那麼花時間深入了解 CSS 是一項巨大的投資。 </p>

<h2>
  
  
  結論
</h2>

<p>elm-css、CSS Modules、CSS-in-JS、Tailwind 等都是很棒的技術。不幸的是，它們並不能免除您學習並深入理解 CSS 的需要。如果您已經熟練 CSS，那麼請務必繼續使用這些技術，因為它們有時很方便，尤其是 Tailwind，它可以輕鬆製作 UI 原型。但是，如果您很難使用 CSS 並且暗地裡不喜歡它，只需知道您可能正在將樣式與程式碼放在一起編寫並避免特殊性，但 CSS 仍然會出現在您的腦海中。只是你對 CSS 的心理模型太弱了，以至於你遇到的每個基本樣式問題只會讓你更討厭 CSS。不要陷入那個螺旋。相反，學習 CSS。 </p>

<h2>
  
  
  訂閱我的電子報
</h2>

<p>如果您有興趣提升 Elm 技能，那麼我邀請您訂閱我的電子報 Elm with Dwayne。要了解更多信息，請閱讀此公告。 </p>


          

            
        

以上是為什麼我不喜歡使用 elm-css的詳細內容。更多資訊請關注PHP中文網其他相關文章！