html中函数的意义,理解函数式 CSS
發(fā)現(xiàn)和討論函數(shù)式 CSS 的優(yōu)點(diǎn)
函數(shù)式 CSS 的概念似乎是我這輩子聽(tīng)過(guò)的最瘋狂的東西了。“我怎么會(huì)用這種玩意？CSS 已經(jīng)十分出色了。”我這樣跟我自己說(shuō)。
如果你從來(lái)沒(méi)有聽(tīng)說(shuō)過(guò)，函數(shù)式 CSS (或者說(shuō)原子 CSS/通用類/不可變的 CSS —— 我可以一直說(shuō)下去。這里沒(méi)有一個(gè)好的名字)是一種不去在我的 CSS 中編寫(xiě)龐大臃腫的組件，而去寫(xiě)能被組裝到 HTML 中大型組件的小型的，單一屬性，不可變的類的概念。
你的 CSS 可能看起來(lái)像這樣：
.p1 { padding: 0.5rem; }
.flex { display: flex }
.red { color: red; }
然后在你的 HTML 中被組裝起來(lái)：
Hi, I'm a flexbox div with 1 unit of padding and red text!
簡(jiǎn)直是瘋了，對(duì)吧？
我熱愛(ài)編寫(xiě)真的靈活，強(qiáng)大的 CSS 類。我主張它因?yàn)椤伴_(kāi)發(fā)者開(kāi)銷的降低”。我的目標(biāo)曾是一個(gè)開(kāi)發(fā)者可以給一個(gè)元素加一個(gè)單獨(dú)類然后它會(huì)為他們自動(dòng)地做好所有事情。基本上跟函數(shù)式 CSS 完全相反。
然后我拜讀了 Adam Morse 的史詩(shī)巨作，CSS 和可擴(kuò)展性。Adam 帶你經(jīng)歷了一段非常豐富的旅行，所以我推薦流出 20 分鐘時(shí)間來(lái)跟隨他的思考閱讀，但如果我必須總結(jié)一下，那就是下面的這段：
在[大型]模型中，你將永遠(yuǎn)不會(huì)停止編寫(xiě) css。重構(gòu) css 是困難而且耗費(fèi)時(shí)間的。刪除不必要的 css 是困難而且耗費(fèi)時(shí)間的。而且往往不止于不——這不是人們都熱衷去做的。所以發(fā)生了什么？人們開(kāi)始寫(xiě)越來(lái)越多的 css。
🤔
好吧，Adam。我認(rèn)輸了。你是對(duì)的。開(kāi)始一個(gè)新項(xiàng)目以及編寫(xiě)所有這些美麗的架構(gòu)良好的 CSS 組件很有趣，但事實(shí)在于，我不會(huì)永遠(yuǎn)都呆在這個(gè)狀態(tài)中，并且在大型模型中，團(tuán)隊(duì)將永遠(yuǎn)不會(huì)停止編寫(xiě) CSS。
如果你曾經(jīng)走進(jìn)過(guò)一個(gè)真正有優(yōu)秀架構(gòu)的 CSS 代碼庫(kù)的話請(qǐng)舉起你的手。
我也沒(méi)有。
通常來(lái)說(shuō)這并不是因?yàn)榇a庫(kù)開(kāi)了一個(gè)壞頭。是因?yàn)樽鳛?CSS 的作者，我們被教導(dǎo)為了解決問(wèn)題要拋出更多代碼。
就像 Adam，我已經(jīng)碰觸到了我職業(yè)生涯中的這個(gè)點(diǎn)：
我對(duì)于我能使用 css 做什么已經(jīng)不太感興趣。我對(duì)于我能幫助團(tuán)隊(duì)里的人們使用 css 來(lái)做什么更感興趣。
Basscss 和 Adam 自己的 Tachyons 是實(shí)驗(yàn)的一個(gè)優(yōu)秀的起點(diǎn)。我在嘗試過(guò)之后被說(shuō)服了，而且我有機(jī)會(huì)通過(guò)使用這個(gè)編寫(xiě) CSS 的方法來(lái)為一個(gè)新的客戶項(xiàng)目開(kāi)球。
三個(gè)月里把函數(shù)式方法應(yīng)用在 CSS 架構(gòu)中之后，我已經(jīng)上癮了。我曾經(jīng)使用老整體方法的時(shí)代，它變成了不斷地在不同文件里跳來(lái)跳去的乏味挑戰(zhàn)。我想我已經(jīng)信服了，但是我仍然嘗試去合理化當(dāng)我的函數(shù)式代碼庫(kù)增長(zhǎng)和發(fā)展時(shí)的可擴(kuò)展性問(wèn)題。
我希望能收到任何關(guān)于我考慮到或是沒(méi)考慮的問(wèn)題的反饋。
益處
速度
我的天啊，我能夠快速工作了。我過(guò)去常常說(shuō)我不能“在代碼中設(shè)計(jì)”并且更喜歡在像 Sketch 這樣的工具中開(kāi)始任何白板設(shè)計(jì)。我開(kāi)玩笑說(shuō)這感覺(jué)起來(lái)就像我大腦中的兩個(gè)不同方面，只是不會(huì)相互協(xié)調(diào)。
在使用函數(shù)式 CSS 的過(guò)程中我意識(shí)到是情境的切換扼殺了我的創(chuàng)造力。 I'd have a great design idea,我會(huì)有美妙的設(shè)計(jì)念頭，但是緊接著我不得不切換到我的 CSS 文件中然后從草稿開(kāi)始構(gòu)建一個(gè)組件 —— 命名，思考盒子模型的影響，DOM 結(jié)構(gòu)，最佳架構(gòu)實(shí)踐等等。這就像我的創(chuàng)造力以一百英里每小時(shí)的速度撞到墻上。
相反，我瀏覽 DOM，編寫(xiě) HTML 而且輕而易舉地快速賦予每一個(gè)元素樣式。使用 Basscss 加上一些自定義 CSS 類用于我的主題色，我可以在一個(gè)小時(shí)內(nèi)構(gòu)建一個(gè)經(jīng)得起時(shí)間考驗(yàn)的項(xiàng)目主頁(yè)。
僅此感覺(jué)就足夠讓我使用這種方法。這十分令人上癮，我都不知道我是否能夠回去了。 Jon Gold 是對(duì)的：
"最好的 CSS 就是盡可能少的 CSS。"
— gold (@jongold) April 22, 2016
從設(shè)計(jì)的觀點(diǎn)來(lái)說(shuō)，函數(shù)式 CSS 把你從在設(shè)計(jì)的時(shí)候不得不作代碼抉擇中解放出來(lái)。抉擇已經(jīng)做出，而你只需要簡(jiǎn)單地混合和匹配來(lái)以你在 Sketch 中使用形狀、顏色和間距的相同方式實(shí)現(xiàn)你想要的樣式。
可轉(zhuǎn)移性
在這些天里我工作的大多數(shù)項(xiàng)目上，我們的設(shè)計(jì)和開(kāi)發(fā)團(tuán)隊(duì)已經(jīng)選定了設(shè)計(jì)提供 HTML/CSS 原型和開(kāi)發(fā)團(tuán)隊(duì)把它移植到真實(shí)環(huán)境中的想法。
這些項(xiàng)目的效率收益是巨大的。
一個(gè)代碼原型給了我們的設(shè)計(jì)師實(shí)踐來(lái)使用戶界面更完美而不會(huì)因?yàn)椴坏貌粚W(xué)習(xí)在高級(jí) JS 框架例如 React 或者 Angular 中工作而頭疼。
我們?cè)谶@個(gè)方法中發(fā)現(xiàn)的問(wèn)題是 HTML 需求上的一點(diǎn)不同：類似于需求一個(gè)會(huì)包裹在一個(gè)標(biāo)簽中的組件或者指令會(huì)快速破壞掉你的 CSS 級(jí)聯(lián)。
在過(guò)去，這意味著維護(hù)一個(gè)重載的應(yīng)用程序特定的集合，會(huì)隨著時(shí)間的推移出現(xiàn)越來(lái)越多的 bug (以及壞的 CSS 會(huì)被編寫(xiě)出來(lái))。
相反，細(xì)微的調(diào)整，例如 margin，能通過(guò)在你的 HTML 一個(gè)單獨(dú)的類變化來(lái)實(shí)現(xiàn)。 It allows you to fix bugs without writing any additional CSS.這允許你不用編寫(xiě)任何額外 CSS 來(lái)修正 bug。我甚至不能告訴你這種感覺(jué)是多么的美妙。寫(xiě)更多的代碼來(lái)修正 bug 是一種錯(cuò)誤地修復(fù)你的 CSS 的方法。
停止做出(毫無(wú)意義的)選擇
Basscss 提供了一套標(biāo)準(zhǔn)的間距和大小的通用工具。消除選擇實(shí)際上就是解放。通過(guò)只提供 8px, 16px, 24px 等的間距，你只要選擇大/中/小就可以跟它一起搖擺了。
我過(guò)去以為這會(huì)帶走我所有的創(chuàng)造力，但是它只是使我作為設(shè)計(jì)師的生活更加愉快。我能夠?qū)Ｗ⒂谡_的問(wèn)題上。
壞處
在進(jìn)入關(guān)于函數(shù)式 CSS 問(wèn)題之前，我想要變得清晰 —— 這一點(diǎn)上，這些都是問(wèn)題而不是批評(píng)。我確信那些比我聰明的多的人們已經(jīng)找出了這些問(wèn)題的解決方案(或者理由)。
我很想聽(tīng)聽(tīng)其他人是如何解決這些問(wèn)題的。
失去級(jí)聯(lián)
將組裝我們樣式代碼的責(zé)任轉(zhuǎn)移到 HTML 上意味著我們失去了所有級(jí)聯(lián)的好處。當(dāng)你第一次創(chuàng)建一個(gè)組件的時(shí)候這是絕妙的，但是為現(xiàn)存的系統(tǒng)更新樣式就會(huì)變成搜索和替代以及其他快捷鍵的一團(tuán)糟。
一個(gè)更新在一個(gè)文件一些相近樣式的簡(jiǎn)單方法是使用多個(gè)光標(biāo)在 Sublime Text 和 Atom 中，選擇一個(gè)字符串然后敲擊 ?-D (在 Mac 上) 會(huì)選擇這個(gè)字符串的下一個(gè)實(shí)例。
但是這假定了你以相同的順序放置通用類來(lái)創(chuàng)建多個(gè)相同的“組件”，尤其是在跨越多個(gè)頁(yè)面做搜索和替代的時(shí)候。否則，沒(méi)有一個(gè)簡(jiǎn)單的方法來(lái)跨越你的整個(gè)頁(yè)面搜索以尋找類似組件實(shí)現(xiàn)的位置。
這可能是我關(guān)于在大型應(yīng)用中應(yīng)用函數(shù)式 CSS 的唯一的最大顧慮。想像一下一個(gè)標(biāo)準(zhǔn)的“盒子”組件由 7-10 個(gè)通用類組成。如果你想要改變所有盒子的字體大小，你需要跨越你的應(yīng)用來(lái)尋找所有實(shí)例而且手動(dòng)地去更新他們每一個(gè)的樣式。
這給錯(cuò)誤留下了很大的空間。
組件的可重用性
使用了函數(shù)式 CSS，創(chuàng)建“組件”就是簡(jiǎn)單地把一堆類放在一起搗碎。重用組件要求你在不同的地方再次使用相同的類。
再次強(qiáng)調(diào)：給錯(cuò)誤留下了很大的空間。
這里長(zhǎng)期的解決方案可能是實(shí)現(xiàn)一個(gè)模式庫(kù)來(lái)編檔組件以及提供簡(jiǎn)單的代碼片段復(fù)制和粘貼。更勝一籌的是，通過(guò)文檔，你輕易的提供了需要時(shí)的“選項(xiàng)”，通過(guò)描述可以混合和匹配的類的準(zhǔn)確類型來(lái)實(shí)現(xiàn)組件的變化。例如，可能一個(gè)卡片可能有不同的頂部顏色，可以輕易地通過(guò)使用 bg-color 類切換。
結(jié)合之前有關(guān)失去級(jí)聯(lián)，長(zhǎng)期可重用性和更新的能力的問(wèn)題就是我在使用函數(shù)式 CSS 工作時(shí)遇到的主要挑戰(zhàn)。
如果你使用組件工作，一個(gè)可能的修復(fù)方法會(huì)使給每一個(gè)組件添加一個(gè)命名類。這會(huì)是描述性的因此你實(shí)際上不會(huì)應(yīng)用任何 CSS 在這個(gè)類上，但是這會(huì)用于貫穿你的代碼庫(kù)來(lái)尋找一個(gè)特定組件的實(shí)例。
.box-component 類沒(méi)有賦予任何樣式，它僅僅是一個(gè)搜索關(guān)鍵字用于尋找盒子組件用到的地方。
通用類易于實(shí)現(xiàn)，但是應(yīng)該盡早考慮其長(zhǎng)期可用性，可重用性以及在大型團(tuán)隊(duì)中更新的能力。
響應(yīng)式
如果你的設(shè)計(jì)在斷點(diǎn)處改變了太多的話，你的類字符串將會(huì)變得十分復(fù)雜。在早期，做一些像是 class="m2 md-m0" 這樣的事情使中間斷點(diǎn)之下有兩個(gè)單位的 margin 和使中間斷點(diǎn)之上margin 為 0 是非常好的。
但是在我的測(cè)試項(xiàng)目里有一個(gè)情況就是在移動(dòng)端上把我的導(dǎo)航欄改變樣式變成一個(gè)滑動(dòng)菜單，然而它在桌面端是一個(gè)標(biāo)準(zhǔn)的水平列表。這很快就失去控制了：
這僅僅是開(kāi)端，更多的類會(huì)在以后出現(xiàn)用于定義顏色。當(dāng)你的設(shè)計(jì)在斷點(diǎn)之間有很大的變化，實(shí)現(xiàn)類可能是一個(gè)挑戰(zhàn)(而你的類的順序是另外一個(gè)問(wèn)題 —— 我們之后會(huì)討論一下)。
為了解決它，我們需要在早期建立一套有關(guān)如何處理響應(yīng)式的標(biāo)準(zhǔn) —— 例如命名約定，斷點(diǎn)，以及標(biāo)準(zhǔn)化最小或者最大寬度。
管理狀態(tài)
我在自己身上發(fā)現(xiàn)的一個(gè)普遍狀況是默認(rèn)情況下隱藏一個(gè)組件，然后點(diǎn)擊了某個(gè)地方之后把它展示出來(lái)。我可能會(huì)寫(xiě)一個(gè)像這樣的龐大 CSS 類：
.nav { display: none; }
.nav.is-open { display: block; }
在這里 JavaScript 會(huì)切換 .is-open 來(lái)展示我的導(dǎo)航欄。相反，我的 JavaScript 現(xiàn)在會(huì)切換一個(gè)通用類 .block 或者類似的類：
.block 被 JavaScript 切換來(lái)展示這個(gè)元素。這樣可讀性也不太糟糕。
為了示范，這個(gè)小組件并沒(méi)有太復(fù)雜。 然而即使在這個(gè)例子中，你也必須保證 .block 覆蓋 .hide 或者將 .hide 完全刪除(記得把它切換回來(lái))。在更復(fù)雜的組件里，位置和樣式也會(huì)發(fā)生變化，這導(dǎo)致有大量通過(guò) JavaScript 來(lái)切換的東西需要記住。
這不影響大局，但在 CSS 中制定你的組件以及只要切換一個(gè)單獨(dú)的類來(lái)處理所有樣式一定要更加簡(jiǎn)單。
標(biāo)準(zhǔn)的類順序
任何多于一個(gè)開(kāi)發(fā)者的項(xiàng)目都不得不設(shè)置一些關(guān)于類放置順序的標(biāo)準(zhǔn)。否則你在類的列表中尋找被應(yīng)用的類時(shí)會(huì)感覺(jué)十分費(fèi)勁。我個(gè)人推薦 包含模式。但在源順序之上，你的團(tuán)隊(duì)?wèi)?yīng)該決定所有的斷點(diǎn)是否應(yīng)該放在一起：
把斷點(diǎn)放在一起
或?qū)傩员旧?#xff1a;
把屬性放在一起
我還沒(méi)找到哪一個(gè)更好，所以我很好奇其他的團(tuán)隊(duì)是如何處理的。
文檔
在我的 CSS 里，我會(huì)常常編檔奇怪的屬性和為什么我把東西放在一個(gè)特定的地方。例如：
— Marcelo Somers (@marcelosomers) June 1, 2016
我能編檔為什么一個(gè)一個(gè)不可變的類存在于我的 CSS 里，但是把為什么我給一個(gè)特定的 HTML 元素添加這個(gè)類放到我的 HTML 標(biāo)記中顯得有些奇怪。
結(jié)論
總的來(lái)說(shuō)，我在使用 CSS 的函數(shù)式方法時(shí)還是很開(kāi)心的。這是那些一旦你看見(jiàn)了你就再也忘不掉的東西之一，而且每一次當(dāng)我大腦的不想改變部分嘗試去寫(xiě)一個(gè)龐大的 CSS 類時(shí)，我發(fā)信我自己在構(gòu)架 CSS 方面變得優(yōu)柔寡斷和不感興趣。
我發(fā)現(xiàn)我自己想要結(jié)束編寫(xiě) CSS。我想要在項(xiàng)目的早期寫(xiě)下一些類，然后通過(guò)把他們像樂(lè)高一樣組裝起來(lái)得到想要的設(shè)計(jì)效果。在項(xiàng)目的晚期才不得不去做代碼抉擇總是感覺(jué)不到位 —— 就像我在浪費(fèi)我的時(shí)間用于寫(xiě) CSS 而不是實(shí)際地去解決真正的可用性問(wèn)題。
我希望得到采用了這個(gè)方法的你的反饋。如果你有興趣學(xué)習(xí)更多有關(guān)函數(shù)式 CSS 的東西，我強(qiáng)烈推薦 Adam Morse，Jon Gold，和 Brent Jackson，他們是真正在推動(dòng)著函數(shù)式 CSS 前進(jìn)的人。
總結(jié)
以上是生活随笔為你收集整理的html中函数的意义,理解函数式 CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 大麦克斯坦克歼击车
- 下一篇： gulp html 模块化,使用Gulp