В чем смысл разделения js и css файлов в npm-пакетах с компонентами?

#reactjs #webpack #npm

Разрабатываем npm пакет с компонентами для react, чтобы их переиспользовать в других
проектах и на этапе создания конфигурации для билда возник данный вопрос.

Если посмотреть на аналоги semantic ui, bootstrap, material ui, то можно заметить
разные подходы:

Подход#1:

import "package-name/style.min.css" // или же тегом в 
import { Button } from "package-name";


Подход#2:

import { Button } from "package-name";


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

Есть ли какая то разница между подходами? В чем плюсы минусы каждого из них?

Спасибо
    

Ответы

Ответ 1

Отдельное подключение CSS позволяет заменить файл стилей на другой. К примеру, пользователь
bootstrap может сделать вот так и заменить шрифт на всём сайте:

$font-family-sans-serif: My Cool Font, $font-family-sans-serif;
@import "bootstrap/scss/bootstrap.scss";


Также подключение CSS в head позволяет стилям загрузиться еще до скриптов - что полезно
когда показать контент надо сразу же, а скрипты грузятся долго.

В то же время, второй способ позволяет использовать независимую стилизацию для разных
компонентов, при которой одни компоненты гарантированно не будут перекрывать своими
стилями стили других компонентов. Смотрите технологии Styled Components, Css Modules
и Shadow DOM (Web Components, Shadow Css).