全局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存在于使用它的bundle中.

如果导入在您的根组件中,您可能会删除正在使用这些fa fa-bandcamp类的所有组件,但您的导入仍保留在根目录中(因为您忘记了它而不是组件旁边)并且您将捆绑在不合适的CSS中在使用它的块中.

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

我会怎么做:

我认为任何全局的CSS都很糟糕,你应该使用像CSS模块这样的东西.所以我更进一步,创建一个<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.
• 一切都很好,并以模块化方式封装,您的捆绑包尽可能高效.

我不会将这种策略用于像reset.css那样的东西.明显.

TL; DR摘要

根级别 - 潜在的低效代码拆分.难以维护,因为CSS不会与使用它的组件并存.

单个组件级别 - 始终导入的痛苦.脆弱,因为如果忘记导入全局CSS,最终可能会使用块中不存在的类.

"文本"组件 - 太棒了.只要确保每个人都fa通过这个组件使用这些类,一切都很好.模块化.易于维护.强大的.