CSS-reset vs разум

Теги: css, html, верстка

В среде верстальщиков стал популярен прием css-reset`а от Эрика Мэйера. При этом сбрасываются все «противоречивые» css-свойства для всех основных html-элементов, после чего верстальщик, в теории, должен самостоятельно назначить эти свойства для всех элементов, и тогда наступит всеобщая кроссбраузерность и гармония, мир, дружба, балалайка.

Как же получается в большинстве реальных случаев? А получается у нас так, что верстальщик опять перестает вдумываться в процесс, а просто фигачит этот reset, потом фигачит макет "чтоб выглядел как на картинке", и сдает его программисту или заказчику(если это фриланс, и работа состоит только в верстке). Чем это плохо?

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

Отсюда мы видем первый подводный камень использования reset`ов: ускорение процесса разработки и экономия трудовых ресурсов - это только видимость. Сбрасывается то все быстро, одним включением файлика. А вот выставляется уже долго, увы!

Второй недостаток - большое количество избыточного кода. Сначала мы css сбрасываем, потом его обратно объявляем. Все это выливается в килобайты, которые идут от сервера к клиенту по http, увеличивая время загрузки страниц.

Третий недостаток - это очень близорукий задел на будущее в случае неопытных верстальщиков. Ведь, сбросив все свойства, и даже выставляя их обратно, никто же не станет объявлять значения для всех html-тегов! Лосю понятно, что настраивать мы будем только те элементами, с которыми мы будем работать. Но проходит некоторое время, в шаблон надо вставить что-то, не объявленное в css... Списки определений, например! А теги <dl>, <dt> и <dd> у нас сброшены до состояния обычного div`а, тоесть с нулевыми внутренними и внешними отступами, нормальным начертанием и размером шрифта. Обратно лезем в css, и объявляем свойства. И эта история может длиться долго, находя себе новые обороты.

Более логичный подход

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

Кроме того, объявляем эти свойства не для всех экземпляров элементов этого типа, а только для экземпляров определенных классов и id, которые мы используем в разметке структуры документа.

При этом просто замечательно, если при именовании классов и id, мы придерживаемся какой-то системы, а не фигачим вместо классов одноразовые элементы, которые, по нашему великому разумению, по идее, в документе встречаться больше не должны(такое я видел, когда элемент <center> использовался в структурной разметке, при этом для него было объявлено достаточно много css-свойств, вплоть до фиксированной ширины, границ и фоновой картинки).

Совершенно ненужно сбрасывать или переназначать свойства элементов, с которыми в данный момент мы работать не собираемся. Надо нам сделать структуру - мы пишем (x)HTML, основанный, скажем, на DIV`ах, при этом всем структурным элементам назначаем id и классы. После - пишем в css свойства для этих классов и id, чтобы получить отображение, соотвествующее макету. При этом незачем обнулять значеня элементов списков, таблиц, заголовков, и всего, до чего дотянутся наши шаловливые ручки. Эти свойства можно индивидуально переназначить для дочерних элементов контентного блока, в котором они у нас будут встречаться. Это гарантирует нас от багов с пересечением пространства имен и перекрытия css-свойств.

FLORIO FASHION: заказ и доставка цветов по всей России.

Team SEO: поисковая оптимизация и комплексная раскрутка сайтов в интернете.

Мебельная фабрика Аммати: кухни в кредит и на заказ.

Статьи схожей тематики:

Динамические списки с помощью JavaScript

FCKeditor и настройка диалогов

CSS Nacked day

Верстка и прогресс

Именование элементов id и class в html

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

RSS сайта

и rss комментариев