CSS-верстка: советы для новичков для хорошо структурированного кода

Цель этой статьи — помочь начинающим верстальщикам не стать говнокодерами низкоквалифицированными специалистами. Конечно, она не претендует на звание полноценного пособия, но может пресечь некоторые распространенные ошибки. Если вы уже начали тесное знакомство с процессом создания сайтов, то вас наверняка совершенно не пугают такие понятия, как HTML, CSS и JavaScript. А значит, вам отлично понятны первые постулаты «правильного» кода:

• Каскадные стили и скрипты для страницы необходимо писать в отдельных документах. Во-первых, это ускоряет загрузку страницы. Во-вторых, легче один раз исправить код в подключенном CSS-файле, чем вручную изменять все страницы.
• HTML является средством для создания костяка страницы, а каскадные стили — для описания внешнего вида и всяческих «плюшек».
• От слов «Internet Explorer» у вас начинается нервный тик, потому как вы уже представили, как ваш идеальный макет нужно оптимизировать под старые версии браузеров.

Дальше я хочу озвучить советы по правильной структуризации CSS-кода. Разумеется, это не универсальные правила, потому что живой проект полон неожиданностей. А когда нужно дорабатывать чужой проект, то приходится работать с тем, что есть. Но, если вы только учитесь верстать, то лучше начать все делать правильно и стремиться стать профессионалом. Итак, чего нужно избегать при написании кода?

Пункт №0: Сброс стилей Как это ни странно, но я хочу начать с того, что должен уметь делать каждый верстальщик. Речь идет о сбросе стилей. У сброса есть свои противники, есть те, кто советует подключать обнуление стандартных значений стилей отдельным файлом, и те, кто за общий файл CSS. В любом случае, иметь понятие о такой возможности необходимо.

Дело в том, что у каждого браузера есть «свое понимание» того, какими должны быть отступы у абзацев, значения для таблиц, ссылок и так далее. Поэтому верстку начинают со сброса этих значений, чтобы обеспечить кроссбраузерность. Этой задачей задавались многие кодеры, но одним из классических считается resset.css от Эрика Мейера:


При использовании настолько общего сброса вы должны быть осторожны, ведь позже необходимо будет обязательно назначить всем тегам стили. Если вы что-то забудете, то контент-менеджер может столкнуться с некоторыми проблемами (маркированный список не имеет маркеров и другие похожие недоразумения). Кстати, если для восстановления вам понадобится посмотреть стандартные значения, посетите этот сайт. Например, для ul стандартные значения выглядят так:

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

Пункт №1: Отмена ранее установленных стилей Хороший верстальщик не отменяет стили, если это не сброс стандартных стилей. Смысл каскадных стилей в том, чтобы новые стили наследовали предыдущие и дополняли их. Каскадные таблицы стилей по определению должны наследовать предыдущим определениям и дополнять их, а не отменять. Если же вам приходится делать отмену, то, видимо, вы поспешили с присвоением какого-то свойства. Конечно, не забываем о работе с готовым проектом, когда полностью реструктурировать код просто нерационально. Тогда, как говорится, «маємо, що маємо».

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

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

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

Пункт №2: Использование чересчур подробных селекторов Иногда можно наткнуться на такой код:

Необходимости в таком подробном описании совершенно нет. К тому же, это мешает применить описание стиля к другому элементу. Если в вашем коде есть такие уточнения, то следует разобраться, есть ли действительно в этом необходимость. Логичней будет написать так:

Пункт №3: Использование очень широких селекторов Иногда для очень общих тегов применяют слишком подробное описание. Например:

Подобный код может привести как раз к описанной выше ошибке — отмене ранее примененных стилей. Такой селектор практически наверняка может использоваться повторно, а вот подробное описание может быть ненужным. Поэтому намного проще создать новый стиль. Будьте очень осторожны с применением подробных стилей для универсальных элементов или очень обобщенных классов.

Пункт №4: Жестко заданные описания стилей

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

Пункт №5: Осторожное использование !important Инструмент !important позволяет повысить приоритет стиля. Поэтому использовать его нужно только в тех случаях, когда вы уверены, что подобный приоритет вам будет нужен всегда. Например, для выведения ошибки. Если же вы применили !important, чтобы грубо перекрыть свои ошибки, то лучше еще раз пересмотреть код.

Пункт №6: Тонкости использования ID Стоит быть осторожным, прежде чем использовать идентификатор. Потому что один и тот же id можно использовать один раз на странице. Приоритет id намного выше класса, что требует еще большей осторожности при использовании. Классы вы можете объявлять сколько угодно раз или применять множество классов к одному и тому же элементу. Например:

То есть id стоит применять только для специфичных элементов, но лучше всего — для связки с JavaScript.

Пункт №7: Непонятные имена классов Когда пишете код, классу стоит приписывать понятное обозначение, которое бы максимально точно давало определение того, чему он принадлежит. При проектировании большого проекта нужно избегать слишком общих названий классов, например .tel. Допустим, у вас есть телефон горячей линии в шапке документа, а также номера в разделе контактов. Поэтому использование названий — .tel-header и .tel.contacts — добавит конкретики. Таким образом, вы не запутаетесь и точно будете знать, где и зачем используется класс.

Пункт №8: Излишняя точность названия классов Противоположностью предыдущей ошибке можно считать такой класс:

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

Пункт №9: Комментарии Многие начинающие верстальщики недооценивают комментарии, считая их глупой тратой времени. Поверьте, если ваш проект перейдет к другим специалистам, комментарии значительно сэкономят их время при разборе всего кода. Полезная практика — оставлять пометки в HTML файле рядом с закрывающимся div о том, какой элемент был закрыт. Данная процедура ускоряет работу с кодом. Да и, поверьте, вернувшись через полгода к сайту для нововведений, вы сами себя будете благодарить за щепетильные описания.

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


Htmlbook.ru — полезнейший ресурс для новичков в верстке. Здесь вы можете ознакомиться со справочниками и самоучителями по CSS и HTML. На сайте можно также протестировать свои умения, найти информацию о готовых решениях многих, особенно стандартных, проблем. Кроме того, вы сможете опробовать свои умения на типовых макетах. Сайт очень удобный, а на страницах с подробным описанием селекторов и тегов можно увидеть табличку, показывающую, с какой версии есть поддержка кода в том или ином браузере (учитываются даже популярные платформы смартфонов). На форуме часто проходят конкурсы для желающих поэкспериментировать с CSS3, HTML5 или JavaScript.

Css-tricks.com — этот ресурс очень удобен тем, что содержит множество видеоуроков, а в разделе Snippets можно найти различные готовые решения. Минус проекта — его англоязычность (разумеется, это минус для тех, кто не владеет английским языком).

Ruseller.com — русскоязычный проект с большим объемом полезного материала. Многие статьи являются переводом с иностранных ресурсов. На сайте есть уроки по юзабилити, некоторым популярным CMS и многое другое, что может пригодиться не только новичку.

Подобных ресурсов множество, особенно на английском языке — так что, ищите и обучайтесь. Желаю интересных проектов, адекватных заказчиков, «красивого» кода и отсутствия багов!