distCom
@distCom
Начинающий программист

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

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

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

Т.е. другими словами - у вас в исходниках может быть любая структура, которая позволяет вам писать поддерживаемый код, а дальше в действие должны вступать механизмы, которые из неё готовят реально используемые данные.
Ответ написан
Комментировать
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Структура помогла ориентироваться быстро, но потом я заметил, что css файл замедлился из за огромного количества import в файлах (не уверен, но думаю в этом проблема)

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы