css - 全局css应该放在每个组件还是根组件(webpack入口文件)？

Question

我想知道如果我有一个经常在我的组件中使用的外部 CSS 文件，我应该在每个组件或根组件中导入这个外部 CSS 吗？

对于每个组件:

import React from 'react'
import '../font.css'

class MyComponent extends React.Component {
  render() {
    return <div className="fa fa-bandcamp"></div>;
  }
}

这是不言自明的:因为我想使用“fa fa-bandcamp”，所以我导入“../font.css”。

这种方法就像编程 JS 或任何其他编程语言一样。如果我们需要依赖项，我们也会将其导入该文件，例如:

import global from 'global'
import util from 'util'

global.foo
global.bar
util.bar
util.bar
// ...

但是，我的同事告诉我，全局css永远不要在每个依赖组件中导入，而应该在根组件或webpack的入口文件中导入，例如:

// in each component
import React from 'react'
// import '../font.css'

class MyComponent extends React.Component {
  render() {
    return <div className="fa fa-bandcamp"></div>;
  }
}

// in entry file (root component)
import React from 'react'
import '../font.css'

class App extends React.Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

每种解决方案的优缺点是什么？我想听听更多的建议，感谢您的帮助。

Answer 1

我会导入你的 font.css文件何时何地使用它(但不完全是你建议的方式，见下文)，而不仅仅是在根组件中。我建议这样做是因为何时以及如果您决定代码拆分，您只希望该 CSS 存在于使用它的包中。

如果导入是在您的根组件中，您可以删除所有使用 fa fa-bandcamp 的组件类，但您的导入保留在根目录中(因为您忘记了它在那里，而不是在您的组件旁边)，并且您将捆绑在甚至不在使用它的 block 中的 CSS 中。

相反，当在组件级别导入时，您也可能会遇到使用这些类而忘记导入 font.css 的情况。因为另一个组件已经导入了全局 CSS。看起来它可以工作，但是如果您进行代码拆分，您可能会发现您的 block 没有正确的字体，因为 CSS 导入位于另一个 block 中。在这种情况下，将其导入根目录就可以解决您的问题!

我会做什么:

我认为任何全局 css 都是不好的，你应该使用类似 CSS modules 的东西.所以我会更进一步，创建一个 <Text/>类似这样的组件:

import React from 'react'
import '../font.css'
export default ({ className, children, tagName: TagName }) => <TagName className={`fa fa-bandcamp ${className}`>{ children }</TagName>;

现在您可以使用 <Text tagName="span">Hey!</Text>安全地安装在所有组件中，因为:

• 您不再需要一直导入 CSS。
• 如果你代码拆分，或者删除所有<Text/>您不会留下一个包，其中包含您忘记的根目录中未使用的 CSS 导入。
• 不可能使用这些类而忘记导入 CSS。
• 一切都很好，并以模块化方式封装，您的 bundle 尽可能高效。

不过，我不会对类似 reset.css 的东西采用这种策略。显然。

TL;DR 总结

根级别 - 潜在的低效代码拆分。更难维护，因为 CSS 不与使用它的组件一起存在。

单个组件级别 - 一直难以导入。脆弱，因为如果忘记导入全局 CSS，您最终可能会使用 block 中不存在的类。

“文本”组件 - 太棒了。只要确保每个人都使用 fa通过这个组件上课，一切都是金色的。模块化的。易于维护。稳健。