原文做者:Jeremy Keithcss
譯者:UC 國際研發 Jothy前端
寫在最前:歡迎你來到「UC國際技術」公衆號,咱們將爲你們提供與客戶端、服務端、算法、測試、數據、前端等相關的高質量技術文章,不限於原創與翻譯。程序員
現在編程界有一種使人擔心的趨勢——那些 「真正的」 程序員對 CSS 嗤之以鼻。 他們指出,這只是一種聲明性語言,而不是一種功能齊全的編程語言。 嘖嘖嘖,它甚至不是一種腳本語言。
算法
這多是實話,但這並不意味着 CSS 不強大。 它的強大致如今與傳統語言不一樣的地方。
編程
以 CSS 選擇器爲例。 在最基本的層面上,它們像條件語句同樣工做。 這是一個標準的 if 語句:
編程語言
條件須要求值爲 true
才能執行花括號中的代碼。 聽起來有點熟?模塊化
這是一個很是簡單的映射,但若是條件語句更復雜怎麼辦?測試
那麼,這就是後代選擇器的做用:翻譯
實際上,經過使用子組合器,兄弟組合器和相鄰的兄弟組合器,咱們能夠獲得更具體的信息:3d
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日在杭州舉辦
好文推薦:
「UC國際技術」致力於與你共享高質量的技術文章
歡迎關注咱們的公衆號、將文章分享給你的好友