Файловая структура БЭМ замедляет css?

Question

[Дмитрий Самойлов]

Здравствуйте, я использую классификацию БЭМ, но обычно пишу css код в одном файле, так как сайты маленькие, но сейчас я делал большой сайт и для удобства использовал файловую структуру БЭМ. Структура помогла ориентироваться быстро, но потом я заметил, что css файл замедлился из за огромного количества import в файлах (не уверен, но думаю в этом проблема), скорость сайта упала до 60+ на пк, потом я решил для проверки перенести весь код в один файл и скорость увеличилась до 99 на page speed. Стоит ли вообще пользоваться подобной структурой, если она замедляет сайт?

Comments

[Сергей delphinpro]

Зачем же использовать импорты в css?
Используйте пре/постпроцессор, собирайте стили в единый бандл, как это все делают.
Не хотите препроцессор — хотя бы просто склеивайте файлы.
И все будет норм.

[Дмитрий Самойлов]

Сергей delphinpro, понял, делать scss файлы, которые потом будут в 1 css добавлятться, правильно?

[Сергей delphinpro]

Дмитрий Самойлов, правильно понимаете. современные сайты имеют довольно большое количество стилей, и писать их все в одном файле — устаревший и неудобный подход. но на выходе требуется их объединять и сжимать для реального использования на сайте.

Answer 1

[Flying]

Никто не использует исходную структуру файлов напрямую.

Посмотрите на любые сборщики frontend assets, в первую очередь на webpack. Их задача - взять все исходные файлы и сформировать asset bundles, оптимальные для загрузки на реальный сайт.

Т.е. другими словами - у вас в исходниках может быть любая структура, которая позволяет вам писать поддерживаемый код, а дальше в действие должны вступать механизмы, которые из неё готовят реально используемые данные.

Answer 2

[approximate solution]

Структура помогла ориентироваться быстро, но потом я заметил, что css файл замедлился из за огромного количества import в файлах (не уверен, но думаю в этом проблема)

Вам нужно понять цели которые вы преследуете.

Разбивка файлов на мелкие компоненты для удобства написания - это режим разработки.

Далее все маленькие файлы собираются в один большой - происходит процесс минификации, конкатенации кода - это уже идет в продуктовую часть, т.е готовый сайт или приложение.

Очень редко делается так, что бы файлы закидывались кусками(допустим критический css для первого экрана), либо подключение маленького js файла для определенной страницы.

Comments

[Дмитрий Самойлов]

понял, спасибо

[approximate solution]

Дмитрий Самойлов, Обратите внимание на gulp
https://webdesign-master.ru/blog/tools/gulp-4-less...

Answer 3

[Даниил]

Для работы по БЭМу обычно используется препроцессоры, например Sass.
Во-первых, они позволяют не писать префиксы блоков в каждом классе (что и происходит по методологии названия классов БЭМ)
А во-вторых, при обычных импортах CSS, при каждом импорте происходит обращение к серверу, что снижает скорость загрузки (как и было Вами замечено). Импорты препроцессоров же на этапе сборки собирают все Ваши отдельные файлы в один CSS, который Вы и подключаете в документ