CSS initial — будьте осторожны с начальными значениями

От автора: в CSS каждое свойство имеет то, что называется начальным значением. Иногда это называется значением по умолчанию, но спецификация использует термин CSS initial, который, я думаю, немного лучше.

Технически, начальное значение любого заданного свойства должно быть объявлено, только если это значение переопределяет ранее определенное значение, которое не является начальным значением. Но начальные значения часто присутствуют, даже если они не нужны.

Например, предположим, у меня есть элемент уровня блока, который я хочу разместить на полную ширины его родителя. Я хочу, чтобы он размещался на собственной «линии», так сказать, в макете, поэтому добавляю следующий CSS:

.element { float: none; width: auto;
}

Круто, правда? Он не будет гибким (таким образом, он перейдет на следующую строку, вместо того, чтобы размещаться горизонтально против других элементов). Кроме того, он не ограничено значением ширины, поэтому ширина автоматически рассчитывается на основе ширины родительского элемента.

Если вы опытный разработчик CSS или даже новичок, вы можете сразу увидеть, что не так с кодом выше. Он не нужен. Это не ошибочный код; это просто необязательно для элемента уровня блока. Каждому элементу уровня блока, не имеющему установленного значения float, автоматически присваивается значение float: none, потому что ни одно из них не является начальным значением для свойства float. То же самое верно для width: auto, поэтому ни одна из этих строк не нужна.

Иногда начальные значения необходимы

Но что, если вы столкнетесь с CSS, наподобие указанного выше, в своем коде или в коде, который вы унаследовали. Здесь может иметь место один из следующих случаев:

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

@media print { .column, aside { float: none; }
}

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

h2 { background-color: #444; color: white; padding: 7px;
} /* ...здесь сотни строк кода... */ aside h2 { background: none; color: #444;
}

Здесь для background задано none, чтобы переопределить цвет фона, ранее установленный для того же элемента. Эти правила стилей не обязательно располагаться одно за другим, чтобы вы могли понять, что происходит. При сканировании CSS вы можете просто увидеть объявление background: none и задаться вопросом, необходимо ли это, поскольку элементы h2 не имеют фона по умолчанию.

(Я должен отметить здесь, что ни одно из этих определений не является начальным значением для свойства background. background — это сокращенное свойство, поэтому оно не имеет ни одного начального значения. Однако none — это начальное значение для свойства background-image. И, как вы, возможно, знаете, обычно, когда вы пишете одно или часть значений в сокращенном объявлении, все остальные сокращенные значения возвращаются к начальным значениям. В приведенном выше случае для свойства background-color будет установлено transparent, поэтому результат будет ожидаемым.)

Использование инструментов для разработчиков браузера для поиска переопределений начальных значений

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

Вот что вы могли бы увидеть в инструментах для разработчиков Chrome, если бы у вас был пример aside h2 из предыдущего раздела:

С помощью инструментов для разработчиков четко видно, что background: none не является необязательным. Все инструменты для разработчика разных браузеров покажут то же самое, и это то, что делает эти инструменты полезными при отслеживании проблем CSS.

Будьте явными в CSS

Вы заметили, что я указал третий вариант того, почему вы можете найти начальные значения, объявленные в таблицах стилей: автор кода явно говорит о том, что происходит в коде (либо намеренно, либо в неведении).

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

Например, при чтении руководств по новым функциям CSS, таким как flexbox, вы можете увидеть код, который выглядит так:

.container { display: flex; flex-wrap: nowrap; flex-direction: row; order: 0; border: solid 1px #444;
} .container div { justify-content: flex-start; align-content: stretch; align-items: flex-start; padding: 10px;
}

В приведенном выше примере я немного все преувеличил, но некоторые онлайн-примеры кода сходны с этим. Если вы новичок в вопросах, связанных с flexbox, то, вероятно, вы не видите проблем в этом коде. Но угадайте, что? Следующий код эквивалентен приведенному выше (предполагая, что к этим элементам не применяется другой CSS):

.container { display: flex; border: solid 1px #444;;
} .container div { padding: 10px;
}

Шесть из семи свойств, связанных с flexbox, которые я включил в предыдущий пример, были удалены, потому что для всех них были установлены начальные значения, поэтому эти строки были излишними.

В этом случае я не возражаю против включения этих дополнительных строк, потому что это может быть наглядным, чтобы увидеть некоторые доступные потенциальные свойства flexbox вместе с несколькими значениями. Таким образом, это тот случай, когда код позволяет лучше его сканировать. В конце концов, хотя в урезанной версии ясно, что элемент .container является гибким контейнером, сразу может быть и не ясно, что вложенные элементы div с отступом 10px являются гибкими элементами.

Указание начальных значений в комментариях

Если мы возьмем более реалистичный пример, в котором используются некоторые пояснения с начальными значениями, я думаю, что нам может быть полезно следующее:

.container { display: flex; flex-wrap: nowrap; /* начальное значение */ border: solid 1px #444;
} .container div { align-content: stretch; /* начальное значение */ align-items: flex-start; /* начальное значение */ padding: 10px;
}

В приведенном выше примере есть только три лишние строки (более реалистично, чем шесть), и каждая из них прокомментирована, чтобы указать, что автор кода знает об этом, но предпочитает, чтобы строки оставались.

И, конечно же, это можно сделать для любого свойства CSS, для которого установлено его начальное значение, включая CSS, который переопределяет предыдущий CSS. Вот еще один пример h2:

h2 { background-color: #444; color: white; padding: 7px;
} /* ...здесь сотни строк кода... */ aside h2 { background: none; /* переопределяем снова на начальное значение */ color: #444;
}

И я полагаю, что в некоторых случаях было бы еще лучше на писать следующее:

aside h2 { background-color: initial; /* переопределяем */ color: #444;
}

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

Заключение

Я не настаиваю на том, что лишние начальные значения являются огромной проблемой в CSS. Пара дополнительных строк не сломает базу кода и не вызовет серьезные проблемы с производительностью.

Я считаю, что основная проблема связана с начальными значениями, для которых не ясно, являются ли они переопределениями или тем, что было включено (или скопировано) из образовательных соображений при использовании функций CSS, которые являются новыми для автора кода.

Поэтому мои рекомендации для объявления начальных значений таковы:

Автор: Louis Lazaris

Источник: https://www.impressivewebs.com/

Редакция: Команда webformyself.