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

原文地址

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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