css网格_如何说服您的团队采用CSS网格

您是否想跳入CSS网格布局，但是难以说服团队中的其他成员（无论您的同事还是经理）？ 最近有人问我是否有任何说服怀疑团队将CSS Grid纳入其工作流程的建议。 尽管我本人在这方面没有遇到任何重大障碍，但这是我经常听到的一个故事。 您已经准备好使用最新的现代布局技术，并准备好使用更高功率的制动器。

尽管令人沮丧，但这里有一些合理性。 让我们分解一下。

作为附带说明，这些想法来自我在网络代理机构中的经验。 我并不是要分享每个人的经验，其他环境可能需要不同的方法。 我确实认为这里有一些建议是普遍有效的。

他们为什么需要说服力？

浏览器支持

不采用Grid的最常见原因是浏览器支持。 尽管Grid在全球范围内拥有约85％的浏览器支持 ，但其他15％的浏览器却提供了暂停。 这些用户中有很大一部分都在IE上，而IE自IE10以来实际上就支持CSS Grid的较早语法。 （我将再问您是否要再支持旧语法的问题，但是如果您想走这条路，可以阅读这篇好文章 。）这些用户至少需要一个布局，可用的。 这使我想到了第二个问题...

时间

如果并非所有浏览器都支持CSS属性，则需要提供适当的备用。 在单独使用单个属性的情况下（例如mix-blend-mode ），编写额外的一两行内容使用户仍然可以以一种有用的（如果不是最佳的）方式体验您的内容，这可能是微不足道的。 那是逐步的增强 。

对于像Grid这样的整个规范，如果采用它作为主要的布局策略，它将不仅影响一两个元素，而且会影响整个网页。 所以这是一个稍微不同的故事。 无论您使用哪种策略来支持较旧的浏览器，都需要确保提供适当的后备。 我不会否认有时会花费一些时间。

如果您团队的其他成员还不熟悉Grid，那么在使每个人都掌握新的布局策略时，还有时间因素需要考虑。 他们可能会担心在该培训上投入资金并使所有人在一天左右的时间内离开现有项目。

可维护性

一些团队可能会担心，当团队中的其他人选择要从事的项目时，他们会发现维护起来更加困难，因为您使用的是不熟悉CSS而不是X框架。 随之而来的是，有许多不同的方法可以使用Grid构建布局。 例如，如果一个人使用的是命名网格线，而另一个人使用的是grid-template-areas ，则可能导致代码库非常不一致，并且可能使需要重新处理该项目的人感到头疼。

所有这些原因归结为时间和金钱。 我们需要做的是使您的团队相信Grid可以为您提供帮助。

网格如何提供帮助？

现在，让我们看一下使用网格如何解决上述问题以及更多问题：

节省复杂布局的时间

网格极大地简化了以前需要大量修改和填充的建筑布局过程。 如果您需要使用较旧的布局方法来解决复杂的设计问题，那么您将浪费宝贵的时间。 当然，您还需要为较旧的浏览器提供可用的备用，但这通常不需要花费大量时间。

如果您的团队使用较旧的布局技术编写自己的网格框架，那么这一切都需要时间和精力。

拥抱创造力

如果设计师，开发人员和团队希望突破极限，构建真正的创意，现代布局，使其在人群中脱颖而出，并接受Web设计思维的新时代 ，那么Grid是不可或缺的。 网格使我们能够构建CSS以前无法实现的布局。

更好的性能

许多项目将大型笨拙CSS框架导入到网格系统中。 即使是最小的类，最终也可能添加很多额外的类，这些类都增加了CSS文件的重量。 对于不同于“标准”列和行的复杂布局，您可能需要转向Javascript库。 在我看来，我们几乎肯定不需要为在2019年处理布局而额外交付JS（很少有例外）。 CSS Grid只需很少的代码即可处理许多复杂的情况。

还有迹象表明， 使用flexbox创建Grid设计的性能较差 -尽管我一直无法在完全相同的详细程度上找到更多资源。

更好的可维护性

因为Grid只是本机CSS，所以它没有被破坏的风险，并且您将不得不在一年的时间内重构项目。 本质上是稳定的。 浏览器支持只会越来越强大。 相反，依赖关系确实会破坏项目。 他们需要维护。 您可能不得不在一两年内重新访问一个项目，只是发现它使用的旧网格框架已不再得到积极维护，或者您使用的版本已过时并且找不到文档。 诸如Bootstrap之类的知名框架可能不太可能出现此问题，但它们会在性能之间进行取舍。

同样，投资于您的团队学习Grid是对未来的可靠投资。 它不是一个在几年后就会过时的框架，而是可以保留的基础CSS。 这些技能将在未来很多年中有用。

那么，您如何说服您的团队？

网站不必在所有浏览器中看起来都一样

我认为，广泛采用Grid的最大障碍是普遍的误解，即网站在所有浏览器中的外观都必须相同。 不幸的是，经理可能会认为情况确实如此，或者可能无法与客户进行其他沟通。 没有人希望您的客户在运行IE9的古老的，吱吱作响的机器上打开漂亮而闪亮的新网站，并立即为无法满足设计而感到惊讶。

这意味着您需要提出逐步改进的理由，并帮助确保沟通在更高层次上进行。 使管理人员和设计师意识到较旧的浏览器的局限性，以及使设计在任何地方看起来都相同的成本。 这不应该基于每个项目，而是整个组织的策略。

我知道改变整个组织的心态听起来有多困难，而且不可能在一夜之间发生。 我见过的一个想法是，设计师可以设计出一个具有简化布局的网站版本，以作为完全支持的版本的后备版本向客户展示，就像他们展示设计的移动版和平板版一样。 这样，客户端就知道某些浏览器将获得更简单的布局，也就没有什么大的惊喜了。 另外，设计师实际上可以以一种看起来不错的方式来设计它，而不是依赖于开发人员的解释。 尽管不可避免地会涉及更多的设计时间，但在开发方面可能会节省很多钱。 我希望看到这种方法变得越来越普遍。

试试看

你不必去全押网格-它不一定是一个全有或全无的方法。 引入Grid的最好方法之一是从较小的UI模块开始。 这样，您就有机会直观地展示收益并希望对其他团队成员进行教育，或者至少是激发他们的好奇心。 展现而不是诉说往往更好。

在人们熟悉它的同时，将Grid与现有布局系统一起使用并没有错。 这为您提供了下一部分的时间...

制定策略

如前所述，有许多方法可以在Grid中构建布局。 您需要仔细考虑您和您的团队将如何实施它，以确保一致性和可维护性不会成为问题。 您可能决定一旦每个人都学习了基础知识，便可以使用他们喜欢的任何方法来完成工作，或者您可以决定仅使用行号进行放置，并避免使用例如grid-template-areas以避免混淆。 您可能决定为最常见的布局需求创建一些实用程序类，或者可能决定使网格代码与组件紧密耦合。

您还需要考虑您的浏览器支持策略。 您应该使用@supports并将所有Grid代码包装在其中，还是仅在严格要求的地方包装？ 做您的研究并提出一个计划。 您的方法可能会随着时间的推移而发展，但是您需要证明自己已经考虑过，以便为您的团队提供最平稳的过渡。

提出建议

尝试并设计一个向您的团队和/或经理介绍您的建议的机会。 如果您可以让其他人觉得他们参与了讨论，那么他们更有可能加入讨论。 另外，您可能没有想到其他陷阱，他们可以指出这些陷阱，并且您可以一起克服这些陷阱。

通常很难在组织内推动变革。 最好的选择是突出好材料，确保考虑任何不利因素，并尝试先发制人。 最后，得到一些盟友！ 一起促进变革要容易得多！

翻译自: https://css-irl.info/how-to-convince-your-team-to-adopt-grid/