你也許不知道，CSS 也有程式設計能力？

原文作者：Jeremy Keith

譯者：UC 國際研發 Jothy

寫在最前：歡迎你來到“UC國際技術”公眾號，我們將為大家提供與客戶端、服務端、演算法、測試、資料、前端等相關的高質量技術文章，不限於原創與翻譯。

如今程式設計界有一種令人擔憂的趨勢——那些 “真正的” 程式設計師對 CSS 嗤之以鼻。 他們指出，這只是一種宣告性語言，而不是一種功能齊全的程式語言。 嘖嘖嘖，它甚至不是一種指令碼語言。

這可能是實話，但這並不意味著 CSS 不強大。 它的強大體現在與傳統語言不同的地方。

以 CSS 選擇器為例。 在最基本的層面上，它們像條件語句一樣工作。 這是一個標準的 if 語句：

條件需要求值為 true 才能執行花括號中的程式碼。 聽起來有點熟？

這是一個非常簡單的對映，但如果條件語句更復雜怎麼辦？

那麼，這就是後代選擇器的作用：

實際上，通過使用子組合器，兄弟組合器和相鄰的兄弟組合器，我們可以得到更具體的資訊：

• condition1 > condition2

• condition1 ~ condition2

• condition2 + condition2

AND 只是布林邏輯的一部分。 還有 OR：

在 CSS 中，我們使用逗號分隔條件：

我們還使用 :not() 偽類來完成布林可能性的集合。如果你新增了數量查詢，通過 :nth-child 及其同類，CSS 看起來更像圖靈完備了。我見過人們使用相鄰的兄弟組合器和 :checked 偽類來構建狀態機。

無論如何，我的觀點是 CSS 選擇器非常強大。然而，我們經常故意選擇性地不使用這種力量。 OOCSS(物件導向的 CSS)，BEM 和 Smacss 存在的理由正是故意限制選擇器的功能，將其侷限於類選擇器。

從表面上看，這似乎是一個奇怪的選擇。畢竟，我們不會故意將自己侷限在程式語言的某個子集中，是吧？

答案是我們會，並且我們已經這樣做了。這就是模板語言的用途。無論是 PHP 的 Smarty 還是 Twig，還是 JavaScript 的 Mustache，Nunjucks 或 Handlebars，它們都是實現了一部分小而美的功能。有些人為自己沒有邏輯而自豪。如果你發現自己試圖做一些模板化語言沒有提供的東西，那麼這是一個好的跡象，你不用試圖在模板中這樣做；它應該在控制器中完成。

因此，模板語言的存在是為了強制簡化並確保複雜性發生在其他地方。這與 BEM 等的故事類似。如果你發現無法在 CSS 中選擇某些內容，則表明你可能需要在 HTML 中新增另一個類名。複雜性僅限於 HTML 標記，以保持 CSS 更直接，模組化和可維護。

但是，我們也不要忘記這也是一個選擇。並不是說 CSS 本身就無法執行復雜的條件。恰恰相反。正是因為 CSS 選擇器（和級聯）非常強大，我們才選擇劃清界限。

英文原文：

https://adactio.com/journal/14574

預告：第13屆D2前端技術論壇將於2019年1月6日在杭州舉辦

好文推薦：

我想學Flutter，但是我不知道應該如何開始？

“UC國際技術”致力於與你共享高質量的技術文章

歡迎關注我們的公眾號、將文章分享給你的好友