Паттерны CSS 29/06/07

Каждый раз, когда мне нужно сверстать новую HTML-страницу (CSS-Layout, xHTML, кроссбраузность) я достаю старые наработки, удачные решения и специально сохраненные ссылки c примерами. Вспоминаю и отыскиваю подобные решения и приспосабливаю к новой задаче. В общем, трачу много времени на повторяющиеся действия. Я решил оформить список лучших решений – паттернов СSS (подобно паттернам ООП), которые помогут с нуля и быстро создать простую и правильную CSS и xHTML разметку. Также я решил включить в этот список несколько рекомендаций что точно не стоит делать – Антипаттернов. Итак.

html и body можно (нужно!?) использовать как собственные контейнеры которые вложены один в другой. Вопрос “а нужно ли?” – Каждый решает сам.
Доводы ЗА. Скорее всего, Вы и без этого напишите следующее:
```
<body>
	<div id="content">Содержимое сайта</div>
<body>
```
Все современные браузеры обрабатывают нормально.
Доводы ПРОТИВ. Даже самые современные средства разработки Adobe Dreamweaver CS3 и Microsoft Expression Web в визуальном редакторе не корректно отображают разрабатываемую страницу.
Если содержимое страницы должно располагаться по центру выставляем главному контейнеру выравнивание по центру и точно указываем ширину:
```
body {
/* или: #content {*/
	margin: 0 auto;
	/* или: 0 auto 0 auto */
	width: 760px;
}
```
Из главного контейнера часто полезно сделать “новый стакан” для вложенных плавающих элементов:
```
body {
/* или: #content {*/
	position:relative;
}
```
Доводы ЗА. Станет удобно абсолютно (“position: absolute”) позиционировать вложенные плавающие элементы, т.к. левый верхний угол контейнера теперь является левым верхним углом “нового стакана”, а не окна браузера.
Доводы ПРОТИВ. Нет смысла делать это, если главный контейнер располагается не по центру. Визуальные редакторы не правильно отображают вложенные абсолютно позиционированные элементы.
Помним: Не существует никакого Универсального Способа Трехколоночной Раскладки. Об это подробно написано в статье Пример верстки CSS Ивана Сагалаева. В КАЖДОМ ОТДЕЛЬНОМ СЛУЧАЕ нужно выбирать решение отталкиваясь от фона, размера колонок, и т. д!
При формировании CSS-раскладки да и вообще при высчитывании размеров блоков и элементов помним (CSS 2.1 Specification, Box model) правила расчета размера элементов следующие:
размер = границы + поля + отступ + ширина/высота или width = border-left + margin-left + padding-left + width + padding-right + margin-right + border-right
или
height = border-top + margin-top + padding-top + height + padding-bottom + margin-bottom + border–bottom.
НЕ ИСПОЛЬЗУЕМ width(height):100% если мы хотим добавлять отступы, поля или рамки!!!
Используем для форматирования меню – списки, а каждый элемент списка делаем плавающим (не используем display: inline; – появляются пробелы обрамляющие элемент):
```
ul#mainMenu{
	list-style:none;
	margin:0;
	padding:0;
}
	ul#mainMenu li {
		float:left;
		margin:0;
		padding:0;
	}
```
Доводы ЗА. Стандартный элегантный способ оформления меню. Большой плюс к оптимизации странице для поисковиков. Возможна реализация сложных - вложенных меню без использования Java Script. Огромное количество примеров.
“Схлопывание” float’ов лечим одним из двух способов:
```
/* Способ 1. (для IE установить width/height) */
#content {
	overflow:hidden;
}

/* Способ 2. */
#content {
	position:absolute;
	/* или */
	float:left;
}
```
Подробности: если элементы содержат вложенные блоки со стилем float: left | right, то они как бы "схлопываются". Вместе с сами блоком соответственно “схлопывается” и его фон, что так не желательно. Более подробно этот вопрос также освещен в статье "Раскладка в CSS: float" Ивана Сагалаева.
Используем один Background у всего сайта или у нескольких колонок сразу. Помним что стилю background-position можно задавать значения как в пикселях, так и в процентах.
Доводы ЗА. Существенно уменьшает сложность резки bg-картинок и упрощает как кодирование так и изменение в будущем.

Удвоение отступов float’ов в IE лечим кахом:

*html #col{
	/*уменьшаем отступ в 2 раза*/
	margin-left:1px;
};

За кадром

Не рассмотренными остались вопросы про “подвал” сайта, связанный с ним вопрос о колонках до конца страницы, хаки для IE, переключение боксовой модели в IE и еще несколько спорных вопросов. Сам я стараюсь меньше использовать “не корректные” способы верстки, да и вам не советую. Проще и надежнее чуть изменить дизайн.