Избегайте! Важно в новом файле css

Мне нужно изменить существующий веб-сайт, чтобы он стал отзывчивым. У меня нет возможности полностью начать снизу, поэтому я создал дополнительный CSS-файл с некоторыми @media -queries, чтобы изменить стиль в зависимости от ширины браузера. Я импортирую этот CSS-файл через @import в исходный CSS-файл.Избегайте! Важно в новом файле css

Однако до сих пор я должен написать !important после каждого нового стиля, иначе исходный файл будет просто отменен и будет применен оригинальный стиль.

Я думал о размещении исходного файла между @media (min-width: 1200px) { ... }, но это будет применяться ко всему и поэтому не отображает ничего на устройствах < 1200px.

Как мне подойти к этому? Должен ли я продолжать использовать !important, чтобы отменить исходный файл, или есть другой, возможно, лучший подход?

источник

2014-10-17 Rvervuurt

Порядок в CSS включает в себя вопросы. Можете ли вы поместить новый файл CSS после исходного файла? –

Вместо этого вы пробовали спецификацию? – j08691

@BrianHoover прав - если ваши медиа-запросы используют одни и те же селекторы, но загружаются позже, они будут «выигрывать». –

Если вы его хорошо каскадируете, ваш отзывчивый файл может преуспеть без !important. Импортируйте свой дополнительный css-файл после оригинала и убедитесь, что селектора являются такими или более конкретными

источник

2014-10-17 13:30:46

Я импортировал его с помощью '@ import' (просто добавил это к вопросу), и они должны полностью стоять в верхней части CSS-файла. Но, как я понимаю, было бы лучше просто связать его с файлом '.phtml', а не в CSS? – Rvervuurt

Конечно, я могу просто импортировать исходный файл в отзывчивом, а не наоборот. Будет ли это хорошим решением? – Rvervuurt

, если они действительно должны быть сверху, вы можете сделать все свои селекторы более конкретными, например, поставить 'body' перед каждым селектором. –

Если вы можете вообще этого избежать, не используйте !important.

Один из способов избежать этого (если можно) - сделать ваш css более конкретным, чем оригинальный. Например, если исходный CSS имеет:

.some-class {color:#ff0000;}

, то вы можете изменить его с помощью:

#main .some-class{color:#0000ff;}

Второй пример более специфичен, чем первый, и поэтому берет на себя от первой.

Однако, если у оригинала есть !important, тогда вам, вероятно, потребуется использовать один из своих, чтобы переопределить его.

источник

2014-10-17 13:33:57 KnightHawk

Избегайте! Важно в новом файле css

ответ

Смежные вопросы