将样式表导入组件vs SMACSS方法

Question

在我的React应用程序中，我没有使用styled-component或CSS- In -JS，也没有将特定的SCSS文件导入到组件中，而是使用SMACSS方法，其中导入的唯一样式表是index.scss，它导入styles目录中的所有SCSS文件。

最初，我采用了导入每个SCSS文件的方法，但在意识到我的文件结构混乱并切换到不太现代的方式后，我改变了主意。

我只是想知道，在应用程序的性能和速度方面，导入每个样式表和只导入一个样式表是否有区别。

Answer 1

我不认为这会在性能上有太大的不同，但你最好是建立一个良好的代码结构，这总是被推荐的。最好的做法是创建单个文件夹scs，然后在main.scss中提供文件夹中其他文件的引用，就像这样。

@import 'var';
@import 'mixins';
@import 'normalize';
@import 'default';
@import 'global/inputs';
@import 'global/btn';
@import 'components/modal-general';
@import 'components/modal-tabbed';

然后，您还可以在app.js或index.js中使用此单一引用main.scss或index.scss