Советы и приёмы CSS

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

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

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

1. Пора прекратить поддержку IE6

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

2. CSS3

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

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

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

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

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

1. * {
2. margin: 0;
3. padding: 0;
4. }

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

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

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

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

1. Совершенно новый способ:

   1. .clearfix {
   2. visibility: hidden;
   3. display: block;
   4. font-size: 0;
   5. content: " ";
   6. clear: both;
   7. height: 0;
   8. }
   9. * html .clearfix { zoom: 1; }
   10. *:first-child+html .clearfix { zoom: 2; }

2. Стиль overflow: hidden; для контейнера (для IE потребуется добавить height: 1%;). C overflow надо быть поосторожнее, так как он скроет все элементы не поместившиеся в блок, для которого он задан.

3. Самый старый, но не очень красивый способ — в конце внешнего контейнера добавляется <div style="clear: both;"></div> или <br clear="all" />

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

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

1. <html>
2. <body>
3. <div id="content">
4. <div id="footer-clear"></div>
5. </div>
6. <div id="footer"></div>
7. </body>
8. </html>

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

1. html, body {
2. height: 100%;
3. }
4. #content {
5. min-height: 100%;
6. }
7. #footer {
8. height: 40px; margin-top: -40px; position: relative;
9. }
10. #footer-clear {
11. height: 40px; clear: both;
12. }

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

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

1. /* Content */
2. #content {
3. width: 900px;
4. margin: 0 auto;
5. }

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

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

1. #content {
2. position: absolute;
3. top: 50%;
4. width: 400px;
5. height: 300px;
6. margin-left: -200px;
7. margin-top: -150px;
8. }

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

1. img {
2. max-width: 100%;
3. }

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

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

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

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

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

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

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

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

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

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

1. 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. Не задавайте уже унаследованные свойства

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

1. body {
2. color: #000;
3. }
4. p {
5. font-weight: normal;
6. color: #000;
7. }

Здесь свойство 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. Поиск ошибок

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

1. * {
2. outline: solid 100%;
3. }

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

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

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

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

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

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

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

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

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

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

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

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

1. #content {
2. }
3. .entry {
4. }

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

1. /* Content */
2. #content {
3. }
4. #content .entry {
5. }

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

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

1. span.active {}
2. em.active {}

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

1. div#content {}
2. div#aside {}

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

1. #content {}
2. #aside {}

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

1. ul li {}
2. ul li.active {}

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

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

1. ul .active a {}

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

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

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

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

1. .widget a {}

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

1. .widget-news {}
2. .widget-links {}

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

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

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

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

1. h1 { font-size: 2.4em; }
2. h2 { font-size: 1.8em; }
3. h3 { font-size: 1.4em; }

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

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

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

1. /* Content */
2. #about h3 {
3. color: #b00;
4. }
5. #news h3 {
6. color: #0b0;
7. }

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 и постоянно допиливалась и дополнялась. Очень надеюсь, что хоть кому-нибудь статья будет полезна. А также принимаю поправки и дополнения.