После обновления страницы исчезают css стили

Question

Есть html страница с разметкой и файл css

В html создаем блок div, в него помещаем div с классом one_ava

Переходим в css, задаем блоку one_ava высоту, ширину и границу 1px solid black, сохраняем (livereload)

В браузере ожидаемо отображается верстка, видна граница блока а также высота и ширина, все ок.

Нажимаем в браузере F5, стили слетают.

Переходим в редактор, ничего не меняем, просто нажимаем Сохранить (livereload)

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

Ситуация повторятся.

Хочу добавить, что сайту не молодой, многостраничный и нигода небыло проблем, работает корректно и на localhost и на сервере, есть куча стилей, которые работают, и отображаются, но в последнее время, слетают все новые добавляемые css стили.

Единственное что помогло, прописывать css свойства в самом html файле через style="", так работает.. но сами понимаете, это не выход

Не могу понять в чем может быть дело. Прикрепляю вам YouTube-ссылку на демонстрацию проблемы.

UPD1:

У меня с деревом файлов довольно строго, в стилях всегда порядок, главный файл выглядит следующим образом:

@import url("main_styles.css");
@import url("header_and_logo.css");
@import url("crm.css");
@import url("donate.css");
@import url("footer.css");
@import url("green_forms.css");
@import url("404.css");
@import url("popup_loginform.css");
@import url("posts.css");
@import url("error_report_btn.css");
@import url("post_and_comments.css");
@import url("purchase.css");
@import url("fin-report.css");
@import url("user_page.css");
@import url("ee.css");
@import url("expenses.css");
@import url("welcome_page.css");
@import url("search.css");
@import url("settings.css");
@import url("conversations.css");
@import url("dialog.css");
@import url("fa_diagram.css");
@import url("forum.css");
@import url("fa.css");
@import url("empty.css");



/* ВСЕГДА ПОСЛЕДНЕЕ. */
@import url("new_media.css");

UPD2

Решение проблемы самое не очевидное!

После того, как я перепробовал все, что только можно было сделать со стилями, в главном css файле я отключил всё! И знаете, что я увидел когда обновил страницу? Верстку со стилями!!

Браузер! Мазафака браузер!! Я чистил кеш, затирал куки, обновлял страницу, но в "отладке кода" все стили продолжали быть подключенными! Перешел из firefox в chrome - все заработало!

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

Answer 1

Посмотрите в сторону приоритетов по умолчанию в каскадных стилях.

Приоритеты стилей

Каскадность CSS – это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS. Правила могут исходить из различных источников: из внешней и внутренней таблицы стилей, от механизма наследования, от родительских элементов, от классов и ID, от селектора тега, от атрибута style и т. д. Поскольку в этих случаях часто происходит конфликт стилей, была создана система приоритетов: в конечном итоге применяется тот стиль, который исходит от источника с более высоким приоритетом.

Возможно у вас есть более высокий приоритет на загрузке, а после вы меняете стили.

Answer 2

У меня с этим довольно строго, в стилях всегда порядок, главный файл выглядит следующим образом:

@import url("main_styles.css");
@import url("header_and_logo.css");
@import url("crm.css");
@import url("donate.css");
@import url("footer.css");
@import url("green_forms.css");
@import url("404.css");
@import url("popup_loginform.css");
@import url("posts.css");
@import url("error_report_btn.css");
@import url("post_and_comments.css");
@import url("purchase.css");
@import url("fin-report.css");
@import url("user_page.css");
@import url("ee.css");
@import url("expenses.css");
@import url("welcome_page.css");
@import url("search.css");
@import url("settings.css");
@import url("conversations.css");
@import url("dialog.css");
@import url("fa_diagram.css");
@import url("forum.css");
@import url("fa.css");
@import url("empty.css");



/* ВСЕГДА ПОСЛЕДНЕЕ. */
@import url("new_media.css");

Никогда не было проблем с отображением.

Я пробовал поочередно отключать все вызываемые файлы, проверял на конфликтующие !important'ы, но это не помогло..

БЛОГ НА HUSL

После обновления страницы исчезают css стили

Ответы (2 шт):