Что такое CSS Reset?

Перевод статьи:  What is a CSS Reset?
Автор:  Joss Crowcroft.

CSS Reset — это небольшой, зачастую сжатый (минимизированный) набор CSS правил, в результате применения которых сбрасываются стили всех HTML элементов до соответствующих изначальных значений.

Если вы все еще не знаете, то имейте в виду, что любой браузер имеет собственные каскадные таблицы стилей, которые он использует для представления не предусматривающих стилевое оформление сайтов в более удобочитаемом виде. Так, к примеру, вы возможно заметили, что большинство браузеров по умолчанию для отображения имеющихся на странице ссылок используют синий цвет, а для тех, которые были активированы ранее — фиолетовый. Для таблиц изначально установлены определенные границы, отступы и поля, а для элементов заголовков (h1, h2, h3 и т.д.) собственные типы и размеры шрифтов. К тому же в каждом браузере предусмотрены определенные значения отступов практически для всех элементов. Вы, вероятно, обратили внимание и на то, что стандартная кнопка подтверждения во всех браузерах выглядит по-разному.

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

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

Простейший пример сайта до и после использования CSS Reset.

Ниже представлен первый когда-либо созданный веб-сайт в двух вариантах — один в своем обычном виде, когда браузер применяет собственные каскадные таблицы стилей, используемые по умолчанию и второй, после их сброса с помощью CSS Reset:

Результат действия файла CSSreset.css

Это, конечно же, максимально упрощенный пример, в котором нет элементов списков, изображений или таблиц, но он все же позволяет понять смысл действия файла CSS Reset.

Для чего предназначен CSS Reset?

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

Спорные вопросы.

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

/* CSS Reset */
#element { margin:0; padding:0; font-size:100%; line-height:1; }


/* #element rules: */
#element { margin:5px 0 10px; font-size:13px; line-height:1.5; }

В большинстве случаев они правы, поскольку использование этого приема приводит к повторному выполнению кода и увеличению времени обработки документа, в то время как одного правила было бы вполне достаточно. Поэтому многие разработчики и дизайнеры придерживаются мнения, что применение CSS Reset нарушает один из основных принципов CSS кодирования — 'DRY' (Don’t Repeat Yourself — Не повторяйтесь).

Тем не менее, у этой технологии немало преимуществ, которые сводят к нулю все ее недостатки. Не последнее место среди них занимает тот факт, что использование CSS Reset позволяет упорядочить процесс разработки, сделав его логическим и последовательным. То есть вам нужно скопировать и включить в документ сам файл CSS Reset, затем при необходимости подключить свои собственные базовые стили (*Автор имеет в виду, что вы можете создать собственный файл предварительных стилевых настроек.) и отталкиваясь от этого заниматься стилизацией вашего документа. По крайней мере, вы теперь уж точно будете знать, что никакие имеющиеся в каком-либо браузере стилевые предустановки никоим образом не повлияют на внешний вид вашего документа.

Другая проблема затрагивает свойство каскадности «каскадыных таблиц стилей». Если используемый CSS Reset файл разработан неправильно, то может оказаться, что создаваемые вами в последующем CSS правила не будут работать, поскольку код, который по сути должен был просто сбросить стили браузера на базовый уровень, будет переопределять ваши собственные стили. Зачастую эта проблема имеет место при использовании Universal Selector Reset, но при выборе грамотно сконструированного кода, такого как HTML5 Doctor CSS Reset подобные ситуации, как правило, не возникают.

Надеюсь, что данная статья пролила свет на вопрос «Что такое CSS Reset?» для многих из вас. Предлагаю ознакомиться с одной из своих следующих статей — «Какой вариант CSS Reset лучше использовать?», которая является продолжением изложенного выше материала (*перевод этой статьи будет предоставлен вашему вниманию ближайшее время).

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *