🔧 阿川の電商水電行
CSS看起來很簡單，但當你真正深入研究它時，你會發現並非如此。大多數人認為CSS是一門容易學習的語言，然而，即使是能解決微積分問題的LLMs，也難逃幾行CSS程式碼的「圍攻」。
在本文中，我將分享我對生成式人工智慧難以建立良好佈局的原因以及TailwindCSS如何幫助它們克服這一挑戰的看法。
假設我們按照 Web 最初的設計方式使用 CSS，也就是使用單獨的 CSS 檔案、定義選擇器以及連結的樣式表。在這種情況下，讓我們來討論一下 CSS 的本質。
1. 一切取決於語境。
在 CSS 中，像position: relative這樣的簡單規則就能徹底改變佈局，甚至影響其他所有屬性的行為。因此，同一行程式碼在不同位置的使用方式可能會產生多種不同的效果。
根據設計，不可能僅憑 CSS 檔案的單一部分就準確預測在瀏覽器中會看到什麼。
對於任何佈局屬性，您都需要了解其堆疊上下文、包含區塊、佈局模式、寫入模式、方向等等。
這些隱藏的關係非常複雜，以至於許多開發者甚至沒有意識到它們的存在。我們常常只能透過反覆試驗來「修復」佈局，不斷調整屬性，直到最終解決問題為止。
現在，讓我們讓情況變得更糟！
2. CSS 永遠無法講述整個故事
CSS 檔案只能提供一半的上下文資訊。
你可以閱讀你想要的每一個選擇器和屬性，但是除非你看到 HTML，否則你根本不知道這些樣式是如何與實際元素連結的。
這就像試圖透過閱讀雜亂無章的字幕來理解一部電影。資訊是有的，但完全脫離了上下文。更糟的是，由於 CSS 的層疊特性，即使是你認為自己了解的部分，以後也可能會改變。
3. 寫 CSS 沒有唯一正確的方法
⚠️請仔細閱讀下一段，每個字都很重要。
CSS 是一種不斷發展、聲明式、層疊式的語言，由開放的社群塑造，並由瀏覽器實現，而每個瀏覽器都有自己的優先級，無法承受破壞性變更。它不夠抽象，無法直接表達佈局意圖。
這就是為什麼有很多方法可以讓div元素居中的原因。
除了實現相同結果的方法數不勝數之外，編寫 CSS 本身的方法也同樣多種多樣。你是否聽過BEM 、 SMACSS 、 OOCSS 、原子 CSS等等？如果沒有，那麼你可以把你聽過的方法加到清單中。
由於技術、慣例和方法層出不窮，因此沒有一種通用的方法來跨專案理解 CSS。
每個團隊都有自己的特色，這尤其會加劇LLM的混亂局面。
混亂
現在，將這三個問題結合起來：
-
情境依賴性行為
-
故事缺了一半
-
沒有統一的結構或慣例
CSS 變成了一個充滿依賴關係、覆蓋和不可見上下文的難以預測的謎題。對於一個依賴清晰模式和關係的語言模型來說，「這簡直是一場噩夢」。
但基因人工智慧並沒有那麼糟糕，對吧？
順風被低估的貢獻
在我看來，Tailwind CSS 是人工智慧時代被低估的英雄。
它能化繁為簡，讓機器能以可預測的方式進行樣式設計。原因如下：
-
結構與風格的融合：在一處提供完整的背景資訊。
-
有定論：一套精簡且一致的實用程式意味著無需猜測或自行創設規則。這可能會形成重複的模式。
-
可預測的輸出：每個類別只做一件事，不會產生意想不到的連鎖反應。
這種可預測性正是 Tailwind LLM 適合開發的原因。
所以下次當你請AI幫你建立網頁時，只需說「使用Tailwind」即可。
很有可能，它本來就會那樣做。 😄
感謝閱讀 :)
更新
PS：我並非在推廣 Tailwind，也並非聲稱它比其他方法更好。我只是分享一些關於它為何對 AI 模型如此有效的看法。
原文出處：https://dev.to/asafaeirad/why-css-is-so-hard-for-generative-ais-to-understand-17fo
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
