Импорт таблицы стилей в компонент против метода SMACSS

Question

В моем приложении React вместо использования styled-component или CSS-in-JS или импорта определенного файла SCSS в компонент, Я использовал метод SMACSS, где единственная импортируемая таблица стилей - index.scss, которая импортирует все SCSS. файлы внутри каталога styles.

Первоначально я сделал метод импорта каждого файла SCSS, но я передумал, поняв, что моя файловая структура была грязной и переключился на менее современный способ.

Я просто интересно, есть ли разница между импортом каждой таблицы стилей и импортом только одной с точки зрения производительности и скорость приложения.

Answer 1

Я не думаю, что это сильно повлияет на производительность, но вам лучше создать хорошую структуру кода, которая всегда рекомендуется. Рекомендуется всегда создавать одну папку scss, а затем указывать в файлах main.scss ссылки на такие папки.

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

Тогда вы также можете использовать эту единственную ссылку main.scss или index.scss в app.js или index.js