Управление CSS с помощью Aurelia-CLI: каждое представление загружает другой файл CSS для принудительного применения на всем сайте, вызывая конфликты

У меня есть проект с 6 просмотров (HTML). Каждое из этих представлений имеет соответствующую модель представления (.js) и таблицу стилей только для этого представления (.css).

Aurelia-cli делает замечательную работу по бесплатному повторению моего файла и объединению всех файлов.js и.css в пару файлов, чтобы на них можно было ссылаться, уменьшая при этом время загрузки и размер страницы. Поэтому, если у меня есть папка welcome с welcome.html, welcome.js и welcome.css, я могу загрузить CSS для welcome.html следующим образом <require from="./welcome.css"></require> и CSS будет введен в <head></head> теги при загрузке страницы.

Проблема в том, что при переходе к следующему представлению правила CSS из welcome.html / welcome.css все еще находятся в пределах <head> Таким образом, тег веб-страницы все еще применяется. После посещения всех 6 просмотров в моем приложении у меня теперь 6 <style> теги в пределах <head> отметьте все правила всех шести страниц, которые применяются на каждой странице, на которую я захожу, без выгрузки до тех пор, пока страница не будет обновлена. Излишне говорить, что после посещения пары страниц весь сайт становится беспорядочным мусором.

Так что мои вопросы

  1. Почему это особенность
  2. Я пропускаю лучшую практику здесь?
  3. Есть ли способ теперь загрузить CSS для страницы при посещении, выгрузить ее при удалении и загрузить новые страницы CSS на свое место?

Если бы у меня было 10-страничное приложение с глобальной таблицей стилей, начальной загрузкой, анимацией CSS и шрифтом awesome, в конце дня у меня было 14 конфликтующих стилей, постоянно внедряемых в html, в который встраивается остальная часть приложения.

Какие-либо предложения? Спасибо за чтение.

Источник

1 ответ

Столкнувшись с подобными ситуациями, экспериментируя долгие часы, я пришел к простому выводу: мне не нравится этот подход "везде вводить CSS-файлы". Разрешите мне немного поспорить об этом, пожалуйста.:)

В чем выгода?

  • Мы уже создали комбинированную глобальную таблицу стилей с обычными вещами (начальная загрузка, font-awesome и т. Д.). Предположительно, это в главном разделе index.html, Конечно, потому что мы хотели бы иметь хороший экран-заставку, прежде чем приложение загрузится само. Даже в официальном скелетон-навигационном приложении
  • Еще одна причина, чтобы избежать <require> это его асинхронный характер, который дает нам небольшой (или нет) контроль над порядком загрузки CSS. Он идеально подходит для модулей / пользовательских элементов JS, но не для нескольких файлов CSS.
  • И наконец, есть эти другие <require> теги, размещенные в каждом представлении, просто чтобы сделать нашу и без того "простую" ситуацию еще более "простой".

Итак, не проще ли упаковать остальные таблицы стилей приложения в эту уже существующую глобальную таблицу стилей в явном порядке?

Мое предложение

У Aurelia-cli есть замечательная особенность, называемая генераторами. Вы можете расширить его функциональность, как вы хотите. Имея это в виду, вы можете создавать новые задачи для пользовательской предварительной / последующей обработки CSS и вставлять их в процесс сборки.

  • Вы имеете полный контроль над процессом.
  • Будет создан 1 минимизированный файл. Он будет содержать все в ожидаемом порядке загрузки CSS.
  • Размер CSS-файла небольшого приложения составляет ~10-30 КБ, верно? Это не повредит.:)

Пару дней назад я создал небольшой проект, который также решает эту проблему: https://github.com/martonsagi/aurelia-custom-skeleton. Рабочая демоверсия здесь.

  1. В процессе сборки создается base.css из глобальных отделов, и app.css из пользовательских файлов CSS. Это для целей отладки.
  2. Эти два файла объединены в styles.min.css, который развернут и упоминается в index.html,
  3. Если вам нужно создать действительно исполняемое приложение без внешних файлов, у вас все еще есть возможность встроить эту 1 комбинированную таблицу стилей.
Источник
Другие вопросы по тегам