資訊專欄INFORMATION COLUMN
摘要：如何說服你的團隊網站不必在所有瀏覽器中看起來都一樣我相信最大的障礙是有一個對常見的誤解，認為廣泛采用就是網站在所有瀏覽器中看起來都一樣。
如何說服你的團隊采用CSS Grid
原文地址
作者：CSSInRealLife@創作時間：2019-03-09
翻譯&校驗：freedom
你是不是想使用CSS Grid布局但又難以說服你的團隊其他成員（你的同事或者你的領導）？ 最近有人問我，有什么建議可以說服對CSS Grid持有懷疑態度的團隊在他們的工作流中采用CSS Grid。 雖然我自己在這方面沒有遇到任何重大障礙， 但我經常聽到一個這樣的故事。 你已經準備好潛入并使用最新的現代布局技術，卻只有更高的權利才能推動。
盡管有點令人沮喪，但是存在即是合理。讓我們打破它吧！
作為旁注，這些想法來自我在網絡代理商的經驗。 我并不是要聲稱要分享每個人的經驗，而其他環境可能需要采用不同的方法。 但是我認為這里有一些普遍而且有效的建議。
他們為什么需要說服力？瀏覽器支持
**
不采用Grid的最常見原因是瀏覽器支持。 雖然Grid在全球范圍內擁有大約85％的瀏覽器支持，但其他15％的瀏覽器已經停止支持。 這些用戶中有很大一部分是在IE上，從IE10開始，它實際上支持CSS Grid的舊語法。 （我將留下你是否想在某天想支持舊語法的問題，但如果你想沿著這條路走下去，這里有一篇好文章。）這些用戶需要的布局至少是可用。 這讓我想到了第二個問題......
時間成本
**
如果并非所有瀏覽器都支持CSS屬性，則需要提供合理的回退。 在多帶帶使用單個屬性的情況下（例如混合模式），編寫額外的一行或兩行可能相當簡單，使用戶能夠以有用（或者次優）的方式體驗你的內容。 這是漸進式增強。
使用像Grid這樣的一個完整規范，如果你將其作為主要布局策略，它將不僅影響一個或兩個元素，而且影響整個網頁。 所以這是一個略有不同的故事。 你需要確保提供合理的回退，無論你使用哪種策略來支持舊版瀏覽器。 我不會否認有時這需要一點時間。
如果你團隊的其他成員還不熟悉Grid，那么在讓每個人都熟悉新的布局策略時，還需要考慮時間因素。 需要讓大家離開現有項目一天左右投資這項培訓，他們可能會感到緊張。
可維護性
**
有些團隊可能會擔心，當團隊中的其他人拿起你的項目進行工作時，他們會發現維護起來比較困難，因為你使用的是不熟悉的CSS，而不是X框架。 與此相關，使用Grid構建布局有很多不同的方法。 例如，如果一個人使用網格線命名而另一個人使用grid-template-areas命名，則可能會產生相當不一致的代碼庫，并且可能會讓需要重新接手該項目的人感到頭痛。
所有這些原因歸結為時間和金錢的成本。 我們需要做的是讓你的團隊相信Grid可以為兩者提供幫助。
Grid可以解決什么問題？現在讓我們看一下使用Grid如何幫助解決上述問題，甚至解決更多的其他問題：
復雜布局可以節省大量的時間
**
Grid極大地簡化了以前布局需要大量hack和polyfill)的過程。 如果你需要使用較舊的布局方法破解復雜設計，那么你將浪費寶貴的時間。 當然，你還需要為舊版瀏覽器提供可用的后備方案，但通常不需要花費大量時間。
如果你的團隊使用較舊的布局技術編寫自己的網格框架，那么這一切也需要很多時間和精力。
擁抱創造力
**
如果設計師、開發人員和團隊想要突破界限并構建真正富有創意的現代布局，從人群中中脫穎而出并擁抱網頁設計思維的新時代，那么Grid就是其中不可或缺的一部分。 Grid使我們能夠構建以前用CSS無法實現的布局。
性能更好
**
許多項目為了實現網格系統導入了大型，笨重的CSS框架。即使是最小的類也可能最終添加了許多額外的類，這些都會增加CSS文件的重量。 對于與“標準”列和行不同的復雜布局，你可能需要求助Javascript庫。 在我看來，我們幾乎肯定在2019年已經不需要借助額外的JS來處理布局（除了極少數例外）。 CSS Grid可以用很少的代碼處理許多復雜的情況。
還有一些跡象表明，使用flexbox創建網格設計的性能較差 - 盡管我無法在相同級別的細節上找到更多資源。
更方便維護
**
因為Grid只是原生CSS，所以它不會有被破壞的風險，或者你必須在一年的時間內重構項目的風險。 它本質上是穩定的。 瀏覽器支持只會變得更強大。 相反，依賴框架或者庫會破壞項目。 他們需要維護。 你可能必須在一兩年內重新訪問一個項目，但卻發現它使用的是不再主動維護的舊網格框架，或者你使用的版本已過時而你無法找到文檔。 眾所周知的像Bootstrap這樣的框架可能不太可能出現這個問題，但它們會帶來性能權衡。
同樣，投資你的團隊學習網格是對未來的安全投資。 它不是一個在幾年內就會過時的框架，它的CSS基礎仍然存在。 這些技能將在未來許多年內發揮作用。
如何說服你的團隊？網站不必在所有瀏覽器中看起來都一樣
**
我相信最大的障礙是有一個對Grid常見的誤解，認為廣泛采用Grid就是網站在所有瀏覽器中看起來都一樣。 不幸的是，通常領導認為就是這種情況，或者無法與客戶溝通清楚。 沒有人希望你的客戶在運行IE9的古老吱吱作響的機器上打開你漂亮，閃亮的新網站，并立刻大吃一驚，它不能辜負設計。
這意味著你需要將案例提前進行漸進式增強，并確保在更高級別進行通信。 讓領導和設計師了解舊瀏覽器的局限性，以及實現設計在所有瀏覽器看起來相同所需要的成本。 這不應該是一個一個項目需要考慮的，而是整個組織的策略。
我知道改變整個組織的思維方式聽起來很難，而且不太可能在一夜之間發生。 我看到的一個想法是設計師實際設計一個簡化版的網站，作為完全支持版本的后退版本呈現給客戶端，就像它們呈現移動和平板電腦版本的設計一樣。 通過這種方式，客戶端意識到某些瀏覽器將獲得更簡單的布局，并且沒有什么大驚喜。 此外，設計師實際上可以以一種看起來很好的方式設計它，而不是依賴于開發人員的解釋。 雖然不可避免地會涉及更多的設計時間，但在開發方面可以節省很多。 我希望看到這種方法變得更加普遍。
現在試試吧！你不必全力投入Grid - 它不一定是一種全有或全無的方法。 引入Grid的最佳方法之一是從較小的UI模塊開始。 這樣你就有機會在視覺上展示它的好處，并希望學好它 - 或者至少激起你團隊里其他成員的好奇心。 通過展示而不是直接說出來的方式通常更好。
使用網格與現有布局系統并沒有什么不妥，而且人們對此感到滿意。 這給了你學習下一部分的時間......
制定策略
**
正如我之前提到的，有很多方法可以使用Grid構建布局。 你需要考慮你和你的團隊將如何實施制定的策略，以確保一致性，確保維護不會成為問題。 你可能會認為，一旦每個人都學會了基礎知識，那么他們可以使用他們喜歡的任何方法來完成工作，或者你可能決定僅僅使用行號進行放置并避免grid-template-areas，例如，為了避免混淆。 你可能決定為最常見的布局需求創建一些實用的程序類，或者你可能決定將網格代碼與組件緊密耦合。
你還需要考慮瀏覽器支持策略。 你應該使用@supports并將所有Grid代碼包裝在其中，還是僅限于嚴格要求的地方？ 你做個研究并提供一個計劃。 你的策略可能會隨著時間的推移而發生變化，但你需要證明自己已經考慮過這個問題，以便為你的團隊提供最順暢的過渡策略。
提出方案
**
嘗試并抓住機會向你的團隊或領導提交你的方案。 如果你能讓別人覺得他們也是討論方案的一份子，他們就更有可能加入。 此外，可能還有一些你沒有想過的陷阱，他們可以指出，你們可以一起克服。
在組織內推動變革通常很難。 你最好的選擇是突出好東西，確保你考慮任何缺點，試著搶先發現并解決問題。 最后，你會得到一些盟友！ 一起促進變革會容易得多！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114630.html
摘要：引言一帶一路正在積極推動中國的國際化進程，前端網站也面臨著前所未有的國際化挑戰。本周精讀的文章是，通過一種新的技術，實現國際化布局。討論地址是精讀國際化布局如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。 1 引言 一帶一路 正在積極推動中國的國際化進程，前端網站也面臨著前所未有的國際化挑戰。那么怎么才能積極響應 一帶一路 戰略，推動網站的國際化工作呢？可以先從國際化布...
摘要：引言一帶一路正在積極推動中國的國際化進程，前端網站也面臨著前所未有的國際化挑戰。本周精讀的文章是，通過一種新的技術，實現國際化布局。討論地址是精讀國際化布局如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。 1 引言 一帶一路 正在積極推動中國的國際化進程，前端網站也面臨著前所未有的國際化挑戰。那么怎么才能積極響應 一帶一路 戰略，推動網站的國際化工作呢？可以先從國際化布...
摘要：簡歷的存在只有一個目的幫你約到面試。即使你通過其他方式獲得了面試，當你入職的時候，還是要有這么一份紙質簡歷的，所以不要想著偷懶。在該系統上線后，前端性能從提升到，服務器由臺減少到臺通過量化的數字來增強可信度。 簡歷的本質 原文地址在寫簡歷之前，我們必須清楚的了解一件事情，那就是簡歷是什么？它不是人生履歷，不是項目清單，也不是技能大放送。簡歷的存在只有一個目的 —— 幫你約到面試。只要能...
閱讀 4185·2021-11-22 13:52
閱讀 2511·2021-11-22 13:52
閱讀 3686·2021-11-19 09:59
閱讀 1189·2021-11-17 09:33
閱讀 2448·2019-08-30 10:53
閱讀 1228·2019-08-29 17:28
閱讀 1312·2019-08-29 17:03
閱讀 3102·2019-08-26 11:31
