CSS! Важно: что это такое и когда его использовать

Опубликовано: 2020-06-27

Одним из наиболее полезных и спорных элементов CSS является свойство ! Important. Каждый дизайнер в какой-то момент столкнется с тегом в коде CSS. Настоящий вопрос и дилемма, которые возникают, когда это происходит: «Правильно ли оно использовалось?» Поскольку CSS ! Important - это мощный инструмент, разработчики и дизайнеры должны знать о передовых методах его использования. CSS! Important может привести к разного рода спагетти-кодам, и это никому не подходит.

Что важен в CSS?

Свойство ! Important в CSS указывает, что любое правило, к которому оно прикреплено, имеет приоритет над другими правилами. Это главный приоритет для элемента и селектора, с которым он используется, и поэтому он позволяет разработчикам и дизайнерам иметь особый контроль над стилями для отдельных частей сайта. В большинстве случаев это означает переопределение стиля по умолчанию для сайта, содержащегося в styles.css или custom.css .

Каждый экземпляр! Important применяется только к определенной строке, в которой он появляется . Таким образом, вы можете использовать свойство в некоторых, но не во всех частях фрагмента. Код CSS для ! Important выглядит так:

.example-class {
	color:#fff!important;
}

Первое, о чем следует помнить с помощью ! Important, - это двоякое:

  1. перед словом " важное" всегда должен стоять восклицательный знак (!)
  2. точка с запятой всегда должна стоять в конце строки после объявления! important

! important можно даже использовать на постраничной или модульной основе (в случае построителей страниц, таких как Divi), если вы хотите - хотя именно так вы попадаете в спагетти-код того, что переопределяет какой элемент на на какой странице и в каком порядке?

Каждый дизайнер в какой-то момент столкнется с важным тегом CSS и должен будет принять решение. Стоит ли отменять стиль сайта по умолчанию?

Иногда ответ - твердое «да». В других случаях это жесткий и быстрый ответ «нет». Давайте рассмотрим некоторые передовые практики с CSS, которые важно знать, когда он, вероятно, ничего не сломает ни сейчас, ни в будущем.

Когда использовать CSS Важно

Основное (и наиболее широко распространенное) использование ! Important - это когда вы хотите, чтобы класс, который взаимодействует с основным селектором, имел другой стиль. Возможно, вы хотите, чтобы заголовок и метаинформация в ваших блогах отличались шрифтом и цветом от остальной части вашего сайта. Стиль по умолчанию для этих элементов наследуется от селекторов h1 и p в ваших файлах CSS. Все, что вы установили для сайта по умолчанию, будет отображаться либо в ваших файлах .css, либо в настройщике тем WordPress.

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

Вы можете изменить отдельные элементы, которые хотите (заголовок сообщения в блоге и метаинформация), с помощью классов. заголовок записи и .post-meta. И поскольку вы хотите, чтобы они по-прежнему наследовали некоторые стили от родительских h1 и p , вы будете использовать h1.entry-title и p.post-meta для их конкретного вызова.

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

Наличие этих фрагментов в одной и той же таблице стилей приведет к тому, что верхний код будет действовать во всех случаях, кроме случаев, когда отображаются заголовки сообщений и мета сообщений. Свойство CSS important переопределяет значение по умолчанию и позволяет вам полностью контролировать его.

Такая индивидуальная настройка - основное использование ! Important . Но не единственный.

Используйте CSS, важный для защиты классов, идентификаторов и элементов

Вы также можете использовать ! Important для обеспечения перспективности различных элементов вашей страницы, которые при дальнейшем развитии сайта могут быть изменены самым неожиданным образом. Вы можете, например, разработать особый стиль для ящиков подписки, подписок по электронной почте или встраивания YouTube. Каждый из них может наследовать разные стили из ваших таблиц стилей в разных местах. Использование тега ! Important может помочь вам сознательно изменить стиль ваших форм или кнопок.

Просто назовите элемент с классом или идентификатором, а затем поставьте ! Important в каждой строке.

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

Вуаля! Соответствие требованиям завтрашнего дня благодаря регулярным изменениям в таблицах стилей.

Использование встроенных стилей

Это один из тех вариантов использования, которые могут придумать, а могут и не придумать многие люди. Раньше это было очень распространено, но стало меньше, поскольку мы отказались от ручного кодирования наших сообщений и страниц. Однако, если вы когда-нибудь копались в HTML-коде блока Гутенберга или в текстовом представлении классического редактора WordPress, вы абсолютно точно можете использовать ! Important со встроенными стилями CSS.

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

Это важно по нескольким причинам. Во-первых, вы можете контролировать любую строку кода на своей странице, используя style = "x: y! Important;" а во-вторых, вы можете переопределить любой CSS, уже примененный к этой странице. Даже если это значение имеет ! Important. Например:

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

Даже если есть встроенный стиль HTML с использованием <style> </style>, который использует ! Important в том же селекторе, встроенный CSS, нацеленный на конкретный абзац, будет тем, который будет отображаться.

Остерегайтесь штабелирования важных тегов

Давайте возьмем эти последние несколько примеров и сделаем небольшое предостережение. Эти виды использования подходят в малых дозах. Вы можете использовать их разовые ситуации, и, вероятно, ни у кого не возникнет проблем с этим. Потому что вы специально использовали ! Important для стилизации отдельного элемента. Для чего он предназначен .

Однако, если вы начнете использовать ! Important как костыль, как способ избежать частого редактирования таблиц стилей или как быстрое решение нескольких проблем на одном сайте, это начало спагетти-кода. Специально для будущих разработчиков, которых нет. Хотя вам может быть сложно определить порядок рендеринга ! Important, будущий разработчик может счесть это невозможным.

В конечном итоге происходит то, что на сайте так много сложенных ! Important, которые взаимодействуют с несколькими таблицами стилей, страницами и модулями, что обычный CSS редко отображает. А иногда даже что-то помеченное ! Important не отображается. Или, что еще хуже, каждое последующее изменение должно быть помечено ! Важно только для того, чтобы оно появилось, если вы не хотите разрушить стиль сайта и создать его снова.

Заключение

CSS important - это, честно говоря, один из самых мощных инструментов в наборе дизайнеров. Вы можете легко настроить любой элемент на своем сайте, не беспокоясь о том, что это повлияет на подчиненных или коллег. Но если вы будете злоупотреблять им, эффекты могут превратиться в кошмар страниц и элементов, пытающихся переопределить друг друга, и то, что когда-то было важным, стало по умолчанию, но его нельзя установить по умолчанию. Поэтому старайтесь использовать ! Important экономно, чтобы, когда вам действительно нужно что-то выделяться или соответствовать требованиям завтрашнего дня, вы делали это правильно.

Как вы относитесь к использованию CSS! Important в ваших проектах?

Статья Лучшее изображение Ван Вэй / shutterstock.com