HowtoconvinceyourteamtoadoopCSSGrid原地址作者：CSSInRealLife@创建时间：2019-03-09翻译&验证：自由DoyouwanttouseCSSGridlayoutbutHavingtrouble说服您团队的其他成员（您的同事或您的领导）？最近有人问我关于说服对CSSGrid持怀疑态度的团队在他们的工作流程中采用CSSGrid的建议。虽然我自己在这方面没有遇到任何重大障碍，但我经常听到这样的故事。您已准备好投入并使用最新的现代布局技术，只是被更高的力量推动。尽管令人沮丧，但它的存在是有意义的。让我们分解一下！附带说明一下，这些想法来自我在网络代理商方面的经验。我并不是要分享每个人的经验，其他环境可能需要不同的方法。但我认为这里有一些普遍有效的建议。为什么他们需要说服力？浏览器支持**不采用网格的最常见原因是浏览器支持。虽然全球大约85%的浏览器支持Grid，但其他15%的浏览器已停止支持。这些用户中有很大一部分使用IE，IE10实际上支持CSSGrid的旧语法。（我会在某一天决定是否要支持旧语法，但如果您想沿着这条路走下去，这里有一篇好文章。）这些用户需要至少可用的布局。这就引出了我的第二个问题……如果所有浏览器都不支持CSS属性，那么时间成本**需要提供合理的回退。在单独使用单个属性的情况下（例如混合模式），编写额外的一两行代码可以相当简单，使用户能够以有用（或次优）的方式体验您的内容。这是渐进式增强。有了像Grid这样的完整规范，如果你将它作为你的主要布局策略，它会影响的不仅仅是一个或两个元素，而是整个网页。所以这是一个稍微不同的故事。您需要确保提供合理的回退，无论您使用哪种策略来支持旧浏览器。我不否认有时需要一点时间。如果您团队的其他成员还不熟悉Grid，那么在让每个人熟悉新的布局策略时还需要考虑时间因素。他们可能会担心需要让人们离开他们当前的计划一天左右以投资于此培训。可维护性**一些团队可能会担心，当团队中的其他人接手您的项目并进行处理时，他们会发现维护起来更加困难，因为您使用的是不熟悉的CSS，而不是X框架。与此相关的是，有许多不同的方法可以使用Grid构建布局。例如，如果一个人使用gridlines命名，而另一个人使用grid-template-areas，这可能会导致代码库相当不一致，这对于需要重新接管项目的人来说可能会很头疼。所有这些原因都归结为时间和金钱成本。我们需要做的是让您的团队相信Grid可以在这两个方面提供帮助。网格能解决什么问题？现在让我们看看使用Grid如何帮助解决上述问题，甚至更多其他问题：复杂的布局可以节省大量时间**Grid极大地简化了以前需要大量hack和polyfill的布局过程。如果您需要使用旧的布局方法破解复杂的设计，您将浪费宝贵的时间。当然，您还需要为旧浏览器提供回退，但这通常不会花费很多时间。如果您的团队使用旧的布局技术来编写他们自己的网格框架，那么所有这一切也需要花费大量的时间和精力。拥抱创造力**如果设计师、开发人员和团队想要突破界限并构建真正有创意的现代布局，从人群中脱颖而出并拥抱网页设计思维的新时代，那么网格是其中不可或缺的一部分。网格使我们能够构建以前无法使用CSS实现的布局。更好的性能**许多项目为网格系统导入大型、笨重的CSS框架。即使是最小的类最终也会添加很多额外的类，从而增加CSS文件的重量。对于“标准”列和行以外的复杂布局，您可能需要求助于Javascript库。在我看来，我们几乎肯定不需要额外的JS来处理2019年的布局（极少数例外）。CSSGrid可以用很少的代码处理很多复杂的情况。还有一些迹象表明，使用flexbox创建网格设计的性能较低——尽管我找不到更多相同级别的详细信息。更易于维护**因为Grid只是原生CSS，所以没有它损坏的风险，或者您不必在一年内重构您的项目。它本质上是稳定的。浏览器支持只会变得更强大。相反，依赖框架或库可能会破坏项目。他们需要维护。您可能需要在一两年内重新访问一个项目，才发现它使用的是不再积极维护的旧网格框架，或者您使用的是过时的版本并且找不到文档。像Bootstrap这样的知名框架可能不太可能出现这个问题，但它们会带来性能折衷。同样，投资于您的团队学习网格是对未来的安全投资。它不是几年后就会过时的框架，它的CSS基础还在。这些技能将在未来许多年内派上用场。如何说服你的团队？网站不必在所有浏览器中看起来都一样**我认为最大的障碍是人们对Grid有一个普遍的误解，认为Grid的广泛采用是网站在所有浏览器中看起来都一样。不幸的是，领导层常常认为是这种情况，或者未能与客户进行清晰的沟通。没有人希望您的客户在一台运行IE9的破旧机器上打开您漂亮、闪亮的新网站，然后立即被它不符合设计的要求所震惊。这意味着您需要提前提出案例以进行渐进式增强，并确保在更高级别进行沟通。让领导者和设计师了解旧版浏览器的局限性以及使设计在所有浏览器中看起来都一样的成本。这不应该是一个项目一个项目的考虑，而是一个组织范围的战略。我知道改变整个组织的心态听起来很难，而且不太可能在一夜之间发生。我见过的一个想法是让设计师实际设计一个精简版的网站，作为完全支持版本的后备呈现给客户，就像他们展示设计的移动和平板电脑版本一样。通过这种方式，客户端意识到某些浏览器将获得更简单的布局并且不会有太大的惊喜。而且，设计者实际上可以用看起来不错的方式设计它，而不是依赖于开发者的解释。虽然不可避免地会涉及更多的设计时间，但它可以在开发方面节省很多时间。我希望看到这种方法变得更加普遍。现在就试试！您不必全力以赴使用Grid——它不必是全有或全无的方法。引入网格的最佳方法之一是从较小的UI模块开始。这使您有机会直观地展示它的好处并希望学习它-或者至少激起团队其他成员的好奇心。通常表现出来比说出来更好。在现有的布局系统中使用网格没有任何问题，人们对此也很满意。这让您有时间学习下一部分……制定战略**正如我之前提到的，有许多方法可以使用网格构建布局。您需要考虑您和您的团队将如何实施您制定的策略以确保一致性并确保维护不会成为问题。您可能认为，一旦每个人都学会了基础知识，那么他们就可以使用他们喜欢的任何方法来完成工作，或者您可能决定只使用行号进行放置并避免网格模板区域，例如，以避免混淆.您可能决定为最常见的布局需求创建一些实用程序类，或者您可能决定将网格代码与组件紧密耦合。您还需要考虑浏览器支持策略。您应该使用@supports并将所有Grid代码包装在其中，还是仅在严格要求的地方使用？您进行研究并提供计划。您的策略可能会随着时间而改变，但您需要证明您已经考虑过它，以便为您的团队提供最平稳的过渡策略。提出建议**尝试并借此机会向您的团队或领导提出您的建议。如果您能让其他人觉得他们是讨论的一部分，他们就更有可能加入。此外，可能存在您没有想到的陷阱，他们可以指出您可以一起克服。在组织内推动变革通常很困难。最好的办法是突出优点，确保考虑任何缺点，并首先尝试发现并解决问题。最后，你会得到一些盟友！一起推动变革要容易得多！
