Как правильно расставить приоритет стилей css?

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

В старом шаблоне очень много разбросанных стилей по разным файлам, bootstrap 3 версии + кто-то влезал и правил его, поэтому делаю всё с чистого листа.

Проблема в том, что на данном этапе (1), мне нужно подружить новые и старые стили вместе (конечно как временное решение).
Сейчас сделал так:
1. основные стили - новые.
2. Если нужно для блока подключить старые стили, то для родительского элемента подключаю класс .old-style, который создаёт приоритет за счёт вложенности стилей. scss:
630dd8de5a856238604502.png
Так вот беда в том, что из-за этого приоритета я теперь никак не могу применить новые стили, например, для кнопки внутри старых стилей:
630ddbdfa1868520675322.png

Как вариант, могу добавлять исключение для отдельного селектора таким образом (для нужного элемента ещё добавляю класс new-style):
630dd9d854dcd595512970.png

Но чтоб это работало, исключение :not Должно быть для каждого селектора в css файле.
Подскажите, можно ли как-то для всех селекторов сразу установить исключение :not(.new-style)? Может средствами sass?
(понимаю, что увеличивается размер css файлов из-за такой глупости, но иначе не знаю как)

Подскажите, как бы вы решали эту проблему, может какой-то другой способ? Спасибо
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Шапку и подвал вынести в отдельный файл стилей. Подключать везде. Задать уникальные селекторы, чтобы не пересекались со старыми.
А дальше лучше редизайнить по одной странице. Переверстал страницу, подключил на ней новые стили.
А иначе будет боль. Да еще и новый код загадите.
Как вариант – редизайнить по-блочно. Переверстал кнопки. Выпили все старые стили для кнопок, и подключил новые. Применяется сразу ко всем страницам.

А то, что вы хотите сделать очень уж костыльно выглядит.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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