# 如何說服你的團隊采用CSS Grid

bluesky 發(fā)布于2019-08-30 10:53 / 2434人閱讀

摘要：如何說服你的團隊網(wǎng)站不必在所有瀏覽器中看起來都一樣我相信最大的障礙是有一個對常見的誤解，認(rèn)為廣泛采用就是網(wǎng)站在所有瀏覽器中看起來都一樣。

如何說服你的團隊采用CSS Grid

原文地址

作者：CSSInRealLife@創(chuàng)作時間：2019-03-09
翻譯&校驗：freedom

你是不是想使用CSS Grid布局但又難以說服你的團隊其他成員（你的同事或者你的領(lǐng)導(dǎo)）？最近有人問我，有什么建議可以說服對CSS Grid持有懷疑態(tài)度的團隊在他們的工作流中采用CSS Grid。雖然我自己在這方面沒有遇到任何重大障礙，但我經(jīng)常聽到一個這樣的故事。你已經(jīng)準(zhǔn)備好潛入并使用最新的現(xiàn)代布局技術(shù)，卻只有更高的權(quán)利才能推動。

盡管有點令人沮喪，但是存在即是合理。讓我們打破它吧！

作為旁注，這些想法來自我在網(wǎng)絡(luò)代理商的經(jīng)驗。我并不是要聲稱要分享每個人的經(jīng)驗，而其他環(huán)境可能需要采用不同的方法。但是我認(rèn)為這里有一些普遍而且有效的建議。

他們?yōu)槭裁葱枰f服力？

瀏覽器支持
**
不采用Grid的最常見原因是瀏覽器支持。雖然Grid在全球范圍內(nèi)擁有大約85％的瀏覽器支持，但其他15％的瀏覽器已經(jīng)停止支持。這些用戶中有很大一部分是在IE上，從IE10開始，它實際上支持CSS Grid的舊語法。（我將留下你是否想在某天想支持舊語法的問題，但如果你想沿著這條路走下去，這里有一篇好文章。）這些用戶需要的布局至少是可用。這讓我想到了第二個問題......

時間成本
**
如果并非所有瀏覽器都支持CSS屬性，則需要提供合理的回退。在多帶帶使用單個屬性的情況下（例如混合模式），編寫額外的一行或兩行可能相當(dāng)簡單，使用戶能夠以有用（或者次優(yōu)）的方式體驗?zāi)愕膬?nèi)容。這是漸進(jìn)式增強。

使用像Grid這樣的一個完整規(guī)范，如果你將其作為主要布局策略，它將不僅影響一個或兩個元素，而且影響整個網(wǎng)頁。所以這是一個略有不同的故事。你需要確保提供合理的回退，無論你使用哪種策略來支持舊版瀏覽器。我不會否認(rèn)有時這需要一點時間。

如果你團隊的其他成員還不熟悉Grid，那么在讓每個人都熟悉新的布局策略時，還需要考慮時間因素。需要讓大家離開現(xiàn)有項目一天左右投資這項培訓(xùn)，他們可能會感到緊張。

可維護(hù)性
**
有些團隊可能會擔(dān)心，當(dāng)團隊中的其他人拿起你的項目進(jìn)行工作時，他們會發(fā)現(xiàn)維護(hù)起來比較困難，因為你使用的是不熟悉的CSS，而不是X框架。與此相關(guān)，使用Grid構(gòu)建布局有很多不同的方法。例如，如果一個人使用網(wǎng)格線命名而另一個人使用grid-template-areas命名，則可能會產(chǎn)生相當(dāng)不一致的代碼庫，并且可能會讓需要重新接手該項目的人感到頭痛。

所有這些原因歸結(jié)為時間和金錢的成本。我們需要做的是讓你的團隊相信Grid可以為兩者提供幫助。

Grid可以解決什么問題？

現(xiàn)在讓我們看一下使用Grid如何幫助解決上述問題，甚至解決更多的其他問題：

復(fù)雜布局可以節(jié)省大量的時間
**
Grid極大地簡化了以前布局需要大量hack和polyfill)的過程。如果你需要使用較舊的布局方法破解復(fù)雜設(shè)計，那么你將浪費寶貴的時間。當(dāng)然，你還需要為舊版瀏覽器提供可用的后備方案，但通常不需要花費大量時間。

如果你的團隊使用較舊的布局技術(shù)編寫自己的網(wǎng)格框架，那么這一切也需要很多時間和精力。

擁抱創(chuàng)造力
**
如果設(shè)計師、開發(fā)人員和團隊想要突破界限并構(gòu)建真正富有創(chuàng)意的現(xiàn)代布局，從人群中中脫穎而出并擁抱網(wǎng)頁設(shè)計思維的新時代，那么Grid就是其中不可或缺的一部分。 Grid使我們能夠構(gòu)建以前用CSS無法實現(xiàn)的布局。

性能更好
**
許多項目為了實現(xiàn)網(wǎng)格系統(tǒng)導(dǎo)入了大型，笨重的CSS框架。即使是最小的類也可能最終添加了許多額外的類，這些都會增加CSS文件的重量。對于與“標(biāo)準(zhǔn)”列和行不同的復(fù)雜布局，你可能需要求助Javascript庫。在我看來，我們幾乎肯定在2019年已經(jīng)不需要借助額外的JS來處理布局（除了極少數(shù)例外）。 CSS Grid可以用很少的代碼處理許多復(fù)雜的情況。

還有一些跡象表明，使用flexbox創(chuàng)建網(wǎng)格設(shè)計的性能較差 - 盡管我無法在相同級別的細(xì)節(jié)上找到更多資源。

更方便維護(hù)
**
因為Grid只是原生CSS，所以它不會有被破壞的風(fēng)險，或者你必須在一年的時間內(nèi)重構(gòu)項目的風(fēng)險。它本質(zhì)上是穩(wěn)定的。瀏覽器支持只會變得更強大。相反，依賴框架或者庫會破壞項目。他們需要維護(hù)。你可能必須在一兩年內(nèi)重新訪問一個項目，但卻發(fā)現(xiàn)它使用的是不再主動維護(hù)的舊網(wǎng)格框架，或者你使用的版本已過時而你無法找到文檔。眾所周知的像Bootstrap這樣的框架可能不太可能出現(xiàn)這個問題，但它們會帶來性能權(quán)衡。

同樣，投資你的團隊學(xué)習(xí)網(wǎng)格是對未來的安全投資。它不是一個在幾年內(nèi)就會過時的框架，它的CSS基礎(chǔ)仍然存在。這些技能將在未來許多年內(nèi)發(fā)揮作用。

如何說服你的團隊？

網(wǎng)站不必在所有瀏覽器中看起來都一樣
**
我相信最大的障礙是有一個對Grid常見的誤解，認(rèn)為廣泛采用Grid就是網(wǎng)站在所有瀏覽器中看起來都一樣。不幸的是，通常領(lǐng)導(dǎo)認(rèn)為就是這種情況，或者無法與客戶溝通清楚。沒有人希望你的客戶在運行IE9的古老吱吱作響的機器上打開你漂亮，閃亮的新網(wǎng)站，并立刻大吃一驚，它不能辜負(fù)設(shè)計。

這意味著你需要將案例提前進(jìn)行漸進(jìn)式增強，并確保在更高級別進(jìn)行通信。讓領(lǐng)導(dǎo)和設(shè)計師了解舊瀏覽器的局限性，以及實現(xiàn)設(shè)計在所有瀏覽器看起來相同所需要的成本。這不應(yīng)該是一個一個項目需要考慮的，而是整個組織的策略。

我知道改變整個組織的思維方式聽起來很難，而且不太可能在一夜之間發(fā)生。我看到的一個想法是設(shè)計師實際設(shè)計一個簡化版的網(wǎng)站，作為完全支持版本的后退版本呈現(xiàn)給客戶端，就像它們呈現(xiàn)移動和平板電腦版本的設(shè)計一樣。通過這種方式，客戶端意識到某些瀏覽器將獲得更簡單的布局，并且沒有什么大驚喜。此外，設(shè)計師實際上可以以一種看起來很好的方式設(shè)計它，而不是依賴于開發(fā)人員的解釋。雖然不可避免地會涉及更多的設(shè)計時間，但在開發(fā)方面可以節(jié)省很多。我希望看到這種方法變得更加普遍。

現(xiàn)在試試吧！

你不必全力投入Grid - 它不一定是一種全有或全無的方法。引入Grid的最佳方法之一是從較小的UI模塊開始。這樣你就有機會在視覺上展示它的好處，并希望學(xué)好它 - 或者至少激起你團隊里其他成員的好奇心。通過展示而不是直接說出來的方式通常更好。

使用網(wǎng)格與現(xiàn)有布局系統(tǒng)并沒有什么不妥，而且人們對此感到滿意。這給了你學(xué)習(xí)下一部分的時間......

制定策略
**
正如我之前提到的，有很多方法可以使用Grid構(gòu)建布局。你需要考慮你和你的團隊將如何實施制定的策略，以確保一致性，確保維護(hù)不會成為問題。你可能會認(rèn)為，一旦每個人都學(xué)會了基礎(chǔ)知識，那么他們可以使用他們喜歡的任何方法來完成工作，或者你可能決定僅僅使用行號進(jìn)行放置并避免grid-template-areas，例如，為了避免混淆。你可能決定為最常見的布局需求創(chuàng)建一些實用的程序類，或者你可能決定將網(wǎng)格代碼與組件緊密耦合。

你還需要考慮瀏覽器支持策略。你應(yīng)該使用@supports并將所有Grid代碼包裝在其中，還是僅限于嚴(yán)格要求的地方？你做個研究并提供一個計劃。你的策略可能會隨著時間的推移而發(fā)生變化，但你需要證明自己已經(jīng)考慮過這個問題，以便為你的團隊提供最順暢的過渡策略。

提出方案
**
嘗試并抓住機會向你的團隊或領(lǐng)導(dǎo)提交你的方案。如果你能讓別人覺得他們也是討論方案的一份子，他們就更有可能加入。此外，可能還有一些你沒有想過的陷阱，他們可以指出，你們可以一起克服。

在組織內(nèi)推動變革通常很難。你最好的選擇是突出好東西，確保你考慮任何缺點，試著搶先發(fā)現(xiàn)并解決問題。最后，你會得到一些盟友！一起促進(jìn)變革會容易得多！