Один из лучших способов узнать, как кодировать веб-сайты, - это посмотреть исходные коды других сайтов. Эта практика заключается в том, как много веб-профессионалов научились своему ремеслу, особенно в те дни, когда было так много вариантов для курсов веб-дизайна, книг и онлайн-учебных сайтов.
Если вы попробуете эту практику и посмотрите на каскадные таблицы стилей сайта (CSS), одна вещь, которую вы можете увидеть в этом коде, - это строка, которая говорит! Important. Что это значит и, что не менее важно, как вы правильно используете это объявление в своих таблицах стилей?
Каскад CSS
Прежде всего, важно понять, что каскадные таблицы стилей действительно каскад , то есть они помещаются в определенном порядке. В общем, это означает, что стили применяются в том порядке, в котором они читаются браузером. Первый стиль применяется, а затем второй и так далее.
В результате, если стиль появляется в верхней части таблицы стилей, а затем изменяется ниже в документе, второй экземпляр этого стиля - тот, который применяется в последующих экземплярах, а не первый. В принципе, если два стиля говорят одно и то же (что означает, что они имеют одинаковый уровень специфичности), будет использоваться последний из них.
Например, давайте представим, что следующие стили содержались в таблице стилей. Текст абзаца будет отображаться черным цветом, даже если применяемое свойство первого стиля является красным. Это связано с тем, что «черное» значение указано вторым. Поскольку CSS читается сверху вниз, окончательный стиль «черный», и поэтому выигрывает один.
p {цвет: красный; }p {цвет: черный; }
Как! Важно Изменения приоритета
Теперь, когда вы понимаете, как эти почти идентичные правила обрабатываются CSS, мы можем посмотреть, как важная директива!
Важная директива влияет на то, как каскады CSS, соблюдая правила, которые вы считаете наиболее важными и должны применяться. Правило, которое имеет важную директиву, всегда применяется независимо от того, где это правило появляется в документе CSS.
Чтобы текст абзаца всегда был красным, из приведенного выше примера вы будете использовать:
p {color: red! important; }p {цвет: черный; }
Теперь весь текст будет отображаться красным цветом, даже если «черное» значение указано вторым. Важная директива! Переопределяет обычные правила каскада и придает этому стилю очень высокую специфичность.
Если вам абсолютно необходимо, чтобы абзацы выглядели красными, этот стиль будет делать это, но это не значит, что это хорошая практика. Давайте посмотрим, когда вы захотите использовать! Важно, и когда это не подходит.
Когда использовать!
Важная директива! Очень полезна, когда вы тестируете и отлаживаете веб-сайт. Если вы не знаете, почему стиль не применяется, и думаю, что это может быть проблемой специфики, вы можете добавить важное объявление в свой стиль, чтобы узнать, исправляет ли он это.
Если добавление! Важно действительно исправляет проблему стиля, вы только что определили, что это проблема специфики. Однако вы не хотите оставлять этот важный код на месте, он был помещен только для целей тестирования.
Поскольку тестирование выполняется, вы должны удалить эту директиву и настроить свой селектор, чтобы достичь той специфики, которая необходима для того, чтобы ваш стиль работал. важно не пробиваться на ваши производственные площадки, отчасти из-за того, как он меняет нормальный каскад.
Если вы слишком сильно опираетесь на важную декларацию! Для достижения желаемых стилей, у вас в конце концов будет таблица стилей, замученная важными стилями. Вы в корне измените способ обработки CSS этой страницы. Это ленивая практика, которая не хороша с точки зрения долгосрочного управления.
Используйте! Важно для тестирования или, в некоторых случаях, когда вы абсолютно должны переопределять встроенный стиль, который является частью рамки темы или шаблона. Даже в таких случаях используйте этот подход как можно более экономно и вместо этого старайтесь писать чистые таблицы стилей, которые понимают каскад.
Таблицы стилей пользователя
Существует одна заключительная записка о важной директиве, которая необходима для понимания. Эта директива также была введена в действие, чтобы помочь пользователям веб-страниц справляться с таблицами стилей, которые затрудняют их использование или чтение страниц.
Как правило, если пользователь определяет таблицу стилей для просмотра веб-страниц, эта таблица стилей отменяется таблицей стилей автора веб-страницы. Если пользователь отмечает стиль как важный, этот стиль перекрывает страницу стилей автора страницы, даже если автор отмечает правило как важное.
Это полезно для пользователей, которым необходимо задавать стили определенным образом. Например, кому-то может потребоваться увеличить размер шрифта по умолчанию на всех используемых им веб-страницах. Используя свою важную директиву экономно на страницах, которые вы создаете, вы учитываете любые особые потребности, которые могут возникнуть у ваших пользователей.
