Советы, хитрости и приёмы вёрстки CSS и HTML

Иконка CSS Edit 2

Это иконка CSS Edit 2, хотя в статье не будет ни слова о CSS Edit 2 :)

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

Оправдательный дисклеймер: статья написана на правах Капитана Очевидности — я не претендую на оригинальность, большую часть этих приёмов и советов можно встретить в различных статьях и книгах.

Для начала, пара провокационных советов:

1. Пришло время прекратить поддержку Internet Explorer 6

Возможно, меня закидают камнями, но, сколько можно? Этому браузеру 9… Да, девять лет! Сейчас им пользуется около пяти процентов пользователей рунета, Microsoft делает всё возможное для уменьшения этой цифры. К сожалению, предлагая скачать не намного более современную 8-ю версию своего браузера.
Нет, я не ратую за отказ в доступе к сайтам с устаревших браузеров. Лучшим решением представляется уведомление пользователя, например: «ваш браузер устарел и не поддерживается — функциональность данного сайта может быть ограничена» и ниже привести список рекомендуемых современных браузеров. Так уже сделали на YouTube, Google Docs (к концу 2010 года планируют прекратить поддержку в Google Mail и Calendar) и на многих других популярных сайтах и порталах. Я думаю, это очень хороший повод для того чтобы начать делать так же. А время, которое было бы потрачено на поддержку IE6, лучше потратить на разработку новой полезной функциональности.

2. CSS3

Большинство расценивает CSS3 только как возможность сделать закруглённые уголки и добавить тень. Но, на самом деле, возможностей гораздо больше: загружаемые шрифты, outline, транформации, flexible box layout, многоколоночная вёрстка, текстуры для контуров, медиа-апросы и многие-многие другие чрезвычайно полезные штуки.

Хотя CSS3 ещё в разработке, большинство современных браузеров уже поддерживают основные возможности, зачастую с префиксами (например: -moz-border-radius и -webkit-border-radius для Firefox и Safari/Chrome соотвественно).
Не стоит забывать, что по статистике большая часть пользователей до сих пор пользуется браузерами, не поддерживающими CSS3 (все версии Internet Explorer). Но начинать применять CSS3 стоит уже сейчас.

3. Сброс CSS (CSS Reset)

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

Как оказалось, я и раньше использовал сброс CSS, но он был очень простой и только для отступов:

* {
	margin: 0;
	padding: 0;
}

Сейчас используемый мной метод гораздо сложнее и объёмнее, его можно увидеть в моей вики на странице CSS Code Style. Да, это самый известный CSS Reset, предложенный известным экспертом по CSS Эриком Мэйером.

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

4. Способ так называемой «очистки потока»

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

.clearfix {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 2; }

Устаревшие способы «очистки»:
Стиль overflow: hidden; для контейнера (для IE потребуется добавить height: 1%;). C overflow надо быть поосторожнее, так как он скроет все элементы не поместившиеся в блок, для которого он задан.
Самый старый, и не очень красивый способ — в конце внешнего контейнера добавляется <div style="clear: both;"></div> или <br clear="all" />

5. Когда нужно прилепить «подвал» к нижней части страницы

HTML будет такой:

<html>
	<body>
		<div id="content">
		<div id="footer-clear"></div>
		</div>
		<div id="footer"></div>
	</body>
</html>

Стили, для «подвала» высотой в 40 пикселей:

html, body {
	height: 100%;
}
#content {
	min-height: 100%;
}
#footer {
	height: 40px; margin-top: -40px; position: relative;
}
#footer-clear {
	height: 40px; clear: both;
}

6. Выравнивание блока по горизонтали

Для того чтобы выровнять блок с заданной шириной по центру, нужно задать параметр auto для левого и правого отступа:

/* Content */
#content {
	width: 900px;
	margin: 0 auto;
}

7. Блок, выровненный по центру страницы

Пример для блока размерами 400×300 пикселей (параметры margin-left и margin-top должны быть равны отрицательной половине ширины и высоты соответственно).

#content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 300px;
	margin-left: -200px;
	margin-top: -150px;
}

8. Картинка, меняющая размер в зависимости от ширины блока

img {
	max-width: 100%;
}

Картинка будет автоматически пропорционально уменьшаться, если внешний блок будет меньше размера самой картинки. Но только тогда, когда не указаны размеры картинки у тега <img> с помощью атрибутов width и height.

9. Замена текста картинкой

h1 {
	text-indent: -9999px;
	width: 200px;
	height: 40px;
	background: url('logo.png') no-repeat;
}

Мне не очень нравится этот способ из-за text-indent: -9999px, но он работает.

10. При ограничении максимальной ширины макета удобно задавать max-width в единицах em

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

11. Старайтесь меньше использовать флаг !important

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

12. Указывайте несколько шрифтов

Я, например, работаю на платформе Mac и у меня нет многих шрифтов, которые предустановлены в Windows, как и наоборот (тоже самое и с Linux и прочими операционными системами). Поэтому рекомендуется задавать несколько похожих шрифтов, которые присутствуют в разных системах:

font-family: 'Lucida Grande', 'Segoe UI', Tahoma, Arial, sans-serif;

В конце указано ключевое слово sans-serif, что означает «шрифт без засечек». Бывают ещё serif (с засечками) и monospace (моноширинный). Шрифты по-умолчанию настраиваются в браузере.
В интернетах есть таблицы «похожести» шрифтов для разных операционных систем.

13. Сокращённые цвета

При задании шестнадцатеричного цвета можно использовать сокращённую запись: например, вместо #000000 записать #000, или вместо #aabbcc#abc.
Я часто использую следующие цвета:

  • Чёрный: #000
  • Белый: #fff
  • Тёмно-красный (для ошибок): #b00
  • Cерый оттенки я всегда указываю в трёх цифрах, подбирая на глаз, Есть и любимые: #666 и #bebebe. :)

14. Всегда задавайте стиль для посещённых ссылок

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

При указании стиля для разных состояний ссылки нужно помнить о правильном порядке задания правил: :link :visited :hover :active (есть даже специальная фраза для запоминания: LoVe HAte).

15. Не задавайте уже унаследованные свойства

У каждого элемента есть свойства унаследованные или заданные по-умолчанию. Нет никакого смысла их указывать повторно.
Например:

body {
	color: #000;
}
p {
	font-weight: normal;
	color: #000;
}

Здесь свойство font-weight у элемента p по-умолчанию равно normal, а цвет текста color был уже задан глобально для body, и наследуется для всех вложенных элементов.

16. Используйте CSS-спрайты

CSS-спрайт — это картинка состоящая из несколько картинок, которые с помощью background-position можно присвоить различным элементам.
Использование спрайтов уменьшает количество запросов и увеличивает скорость загрузки страниц. Спрайты — это очень полезная штука, достойная отдельной статьи. Писать я её не буду, так как по запросу в гугле «CSS спрайты» выводится очень много подробных статей.

17. Старайтесь использовать относительные размеры шрифтов в em и %

Сейчас я всегда использую следующий способ задания размера для шрифтов: body { font-size: .65%; }
У остальных элементов размер задаю или процентами или em-ами. При этом, font-size: 130% будет равен 13 пикселям, .7em — соответственно, 7 пикселям.
То же применимо и к отступами, если не требуется попиксельного совпадения макета и вёрстки. Тогда при увеличении масштаба страницы отступы будут увеличиваться вместе со шрифтами.

18. Не стоит писать в стилях единицы измерения для нулевых значений

Единицы измерения для значения длины обязательны, кроме двух случаев: line-height и нуля. Ну с нулём всё понятно — нуль он и есть нуль, нет никакого смысла писать после него единицу измерения. А для line-height любое число без знака будет восприниматься как множитель от размера шрифта. Например, значение 1.5 установит полуторный межстрочный интервал.

19. Пробуйте выключать картинки, CSS и JavaScript

Обратите внимание как смотрится сайт и все ли ссылки работают с выключенными скриптами, нет ли белого текста на белом фоне из-за отключенных картинок.

20. Поиск ошибок

Элементарное средство поиска ошибок:

* {
	outline: solid 100%;
}

Также я часто задаю либо бордеры, либо фоновый цвет для блока, с которым у меня какие-либо проблемы.
Настоятельно рекомендую разобраться с расширенями браузеров (FireBug в Firefox, Inspector в Safari/Chrome, Dragonfly в Opera) — очень упрощают написание кода и поиск ошибок.

21. Старайтесь красиво форматировать и комментировать код.

Многие верстальщики не ставят пробелы после двоеточий и запятых в CSS.
Смотрится немного кашеобразно:

background:#301b18;
line-height:1.5;
font:.8125em 'Helvetica Neue',Helvetica,Arial,sans-serif;
color:#fff;

Так, пожалуй, намного лучше:

background: #301b18;
line-height: 1.5;
font: .8125em 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;

Насчёт комментариев… Кто-то предпочитает самодокументируемый код, кто-то половину времени тратит на написание комментариев. Не стоит комментировать каждую строчку, достаточно выделить основные блоки.

Мой Code Style для HTML и CSS можно глянуть в вики: Code Style.

22. Чувствительность к регистру

Применимо только к случаю, когда CSS используется вместе с XHTML — имена элементов и селекторы становятся чувствительны к регистру. Я всегда использую в селекторах нижний регистр и вам рекомендую. ;)

23. Отступы для вложенных элементов в коде CSS

Неоднократно встречал такие отступы:

#content {
}
	.entry {
	}

Может кому-то будет удобно, я же предпочитаю классическое форматирование:

/* Content */
#content {
}
#content .entry {
}

24. Указывайте типы элементов только когда это явно нужно

Например, для указания разных стилей для элементов с одинковым классом:

span.active {}
em.active {}

А вот в данном случае вместо:

div#content {}
div#aside {}

Лучше писать:

#content {}
#aside {}

Есть случаи, когда тип элемента лучше оставить для наглядности и лучшей читаемости (особенно, если над проектом работаете не вы один):

ul li {}
ul li.active {}

Вторая строчка показывает то, что класс active должен задаваться именно для li, а не какого-либо другого элемента.

А вот для ссылки я уже напишу:

ul .active a {}

Тут я задаю стили для ссылки, которая находится в активном элементе, неважно в каком именно.

Для ID вообще нет смысла писать тег, так как этот элемент должен быть уникален на странице.

25. Несколько классов для элемента

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

.widget a {}

Затем задаю стили для специфических виджетов:

.widget-news {}
.widget-links {}

Я мог бы не писать приставку «widget-«, но так выглядит гораздо нагляднее.
А затем в HTML пишу:

<div class="widget widget-news"></div>

26. Иногда можно (и даже нужно) отступать от Code Style в пользу наглядности

Например, когда надо задать размер шрифта у нескольких элементов подряд, можно написать стиль в одну строчку:

h1 { font-size: 2.4em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }

Читается гораздо лучше.

27. Указывайте ID или CSS у тега body

Это очень удобно в том случае, когда нужно задать специфические стили для определённой страницы. В данном случае на странице About заголовок будет красный, а на News — зелёный:

/* Content */
#about h3 {
color: #b00;
}
#news h3 {
color: #0b0;
}

28. Объединяйте свойства

Вместо двух свойств

margin-left: 3px; margin-top: 6px;

можно написать:

margin: 5px 0 0 5px;

Свойства идут в порядке top right bottom left (для лучшего запоминания советуют слово TRouBLe).
Если задано два значения, то свойства объединяются: top-bottom и right-left.
Если три, то объединяются только правый и левый: top, right-left и bottom.

Тоже самое будет работать для padding и border-width.

Краткие записи существуют и для других свойств:

border-width: 1px;
border-style: solid;
border-color: #000;

В краткой записи будет выглядеть так:

border: 1px solid #000;

Для background (в порядке: color image repeat attachment position):

background: #333 url(bg.png) no-repeat fixed 0 0;

Для font (style variant weight size/line-height family):

border: italic small-caps bold 1em/1.1 'Lucida Grande', 'Segoe UI', Tahoma, Arial sans-serif;

Для list-style (type position image):

list-style: square inside url('li.png');

29. Разработайте свой, так называемый Тулбокс

Тулбокс — набор часто используемых стилей. Для примера, тулбокс от CSS-tricks. У каждого он свой. :)

30. Используйте условные комментарии (Conditional Comments) вместо хаков

Если есть потребность написать какой-нибудь код для IE определённой версии, то лучше использовать Conditional Comments вместо хаков. Я уже писал статью о хаках и условных комментариях.

31. Стоит делать код проще

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

32. Редактор

Выбор редактора — довольно-таки важный момент. Не слушайте тех кто рекомендует вам блокнот. :)
Для меня главное в редакторе, это: подсветка синтаксиса, Zen Coding, сниппеты и подсказки по мере набора кода.
Я выбрал Espresso (моя статья про него). Для Mac я также могу порекомендовать Textmate и Coda. Под Windows — e-texteditor (подобие TextMate с поддержкой бандлов оного). А вообще лучше купить Mac. Я серьёзно.
А также Dreamweaver, Eclipse и Aptana, которые присутствуют для обоих платформ. Aptana — пожалуй, лучший редактор из бесплатных.

33. Изучайте чужой код

Именно изучайте, а не бездумно копируйте не предпринимая даже попытки разобраться.
Я лет 5 назад изучил код CSS сайта mozilla.org (и ещё многих других, которых уже не помню) вдоль и поперёк, уж очень он мне казался изяшным и навороченным. Очень многое мне оттуда пригодилось в дальнейшем.

34. Подпишитесь на RSS популярных блогов по веб-разработке

Всегда появляется что-нибудь новенькое. Вот недавно, например, опубликовали новую версию выпадающего меню на списках, без использования javascript, условных комментариев и каких-либо хаков. У блога, что вы сейчас читаете тоже есть RSS. ;)

35. Коллекционируйте шаблоны кода

Собственно, эта статья и есть отличный пример — это часть моей коллекции решений.
Ещё у меня есть укромная папочка, в которой лежат шаблоны для Photoshop с различными сетками и заготовленной структурой папок слоёв. Папка с заготовкой проекта, в котором уже лежит CSS с часто используемыми блоками, пару HTML-страниц с подключенным jQuery, заголовками и стилями, папка для картинок и прочее.
Для этого даже поднял свою вики, в которой для общего доступа открыты две страницы с моим Code Style для HTML и CSS.

36. Изучайте jQuery.

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

37. Используйте семантическую вёрстку

Я уже писал небольшую статейку про семантическую вёрстку.

38. Не стоит слишком гоняться за стандартами

Здесь мнения часто расходятся, я нахожусь на стороне тех кто говорит, что главный валидатор — это браузер. Валидация ради шильдика «Valid XHTML & CSS» — лишняя трата времени, да и валидаторы ошибаются. Стандарты стоит знать и стараться им следовать, но без фанатизма.

39. Почитайте про SEO-оптимизацию

Каждый верстальщик должен знать как оптимизировать сайты. :)

40. Следите за дизайнером

Нарисует ведь — а нам верстать! На самом деле это, конечно, шутка, но доля правды в ней всё-таки есть. :)
Вообще, давайте советы всем кто в них требуется — настоящий профессионал всегда делится своими знаниями с другими. ;)

41. Полезные ссылки

Консорциум Всемирной паутины (W3C) — там делают интернет. Оооочень много полезной информации (правда, на буржуйском). Там же можно найти валидатор.
Таблица совместимости браузеров.
Хабрахабр. Ну если вы ещё не знаете о этом сайте…

Уффф, это было долго — первая редакция подборки этой статьи появилась в декабре 2009 и постоянно допиливалась и дополнялась. ;) Очень надеюсь, что хоть кому-нибудь статья будет полезна. А также принимаю поправки и дополнения.

14

Комментарии 14

  1. Alexey Poimtsev

    В 7м совете (выравнивание блока по центру страницы) не указано left: 50%; — иначе все плывет.

  2. Алекс

    20 пункт не очень понял. Подскажи, как это может облегчать способ поиска ошибок?

  3. Александр

    уфф… дочитал все до конца ;) спасибо большое за статью!

  4. Андрей

    Спасибо, очень полезно!!!
    Можно дополнить: к сожалению сокращение цветов приводит к отсутствию поддержки ie9 свойств css3, в этом плане оно понимает только формат rgba.
    «9. Замена текста картинкой» — на первый взгляд color: rgba(0,0,0, .1) — то-есть прозрачный текст.
    И вопрос по поводу нынешних версий mozilla. Как от него добиться реального screen.width, а то выдаёт только системные настройки(OS).

  5. Дмитрий

    Спасибо за такие полезные статьи, очень помог!

  6. ILGIZ

    ошибка

    Для font (style variant weight size/line-height family):

    border: italic small-caps bold 1em/1.1 ‘Lucida Grande’, ‘Segoe UI’, Tahoma, Arial sans-serif;

Комментарии закрыты.