css - 混合 react-bootstrap 和 plain bootstrap 是个坏主意

标签 css bootstrap-4 react-bootstrap

<分区>

我正在从事一个大型团队元素,该元素具有 react-bootstrap 1.0.0 以及 bootstrap 4.3.1 的 css+js。一些开发人员更喜欢使用 react-bootstrap 组件,而另一些开发人员则更喜欢使用引导类样式化元素。所以我们最终得到了两种不同风格的代码:

<ListGroup>
  <ListGroup.Item>
    Cras justo odio
  </ListGroup.Item>

对比

<ul className="list-group">
  <li className="list-group-item">
    Cras justo odio
  </li>

继续这样做可能会遇到什么障碍?

我看到的一个问题可能是将来升级 react-bootstrap 或 bootstrap。由于 react-bootstrap 依赖于 bootstrap,升级其中一个需要同时升级另一个。这意味着同时遵循两种迁移策略。

最佳答案

答案可能因你问的人而异,但我怀疑绝大多数人都同意这是个坏主意。真的没有“只是不一致”这样的事情。应该避免这种情况的很多原因归结为这样一个事实,即某处某处不一致。下面是几个例子:

  • 跨库交互 - 在我看来,最大的原因是 Bootstrap 是一个 DOM 操作 JavaScript 框架,而 React 是一个 JavaScript UI 库。换句话说,Bootstrap 可能会意外修改 React 组件,从而导致意想不到的副作用。想象一下使用 jQuery 来操作您的 React 组件。使用 Bootstrap,这实际上就是您正在做的事情。 React Bootstrap 的构建是为了复制 Bootstrap,JS 实现是从头开始重建的,但重用了核心 BS JS 可以定位的类名。
  • 速度/性能 - 通过包含 Bootstrap 和 React Bootstrap,您拥有两个服务于完全相同目的的依赖项。无论它有多小,您都可以通过删除其中一个字节来节省一些额外的字节。
  • 可维护性 - 如果您的应用程序需要更新,您要么需要找到具有该特定专业知识的人,要么让某人学习该风格。即使您所有的开发人员都熟悉这两种风格,在两种不同的思维方式之间切换也会让人感到困惑。
  • 可预期性 - 您的应用程序的哪些部分使用哪种风格?你怎么知道?开发人员如何知道何时需要切换样式?如果整个应用程序保持一致,那么与其掷硬币决定何时使用什么,对每个人来说都会更容易。
  • 招聘/培训 - 在任何团队中,更不用说大型团队了,人来人往。因此,如果您失去了一名开发人员并需要替换他们,这是一个额外的考虑因素,无论是在招聘过程本身还是(更有可能)培训的一部分。

关于css - 混合 react-bootstrap 和 plain bootstrap 是个坏主意,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57975346/

相关文章:

javascript - 我还是 jsfiddle 错误?

html - 使英雄形象响应

reactjs - React+Redux 与 React-bootstrap > FormControl > 获取值

javascript - 无法在react-bootstrap中调用Carousel函数

javascript - React-bootstrap Accordion 无法正常工作

html - 重力不育系 |物化CSS |我们如何将 Materialize CSS 与 Grav 表单插件一起使用?

javascript - 为什么我的 html 代码没有调用我的 javascript 代码?

html - 使 8 个矩形图像以原始宽高比和流畅的布局填满整个屏幕

css - 手机、平板电脑中的应用程序样式问题

html - body Bootstrap 中显示的未知空间