Приемы работы с CSS

Категория CSS

Приемы работы с CSS

Статья предоставлена коллегами из студии Дивовеб –

Чем больше разработчики используют CSS при создании сайтов, тем более сложными и объемными становятся таблицы стилей. Грамотное планирование работы с css файлами позволит через некоторое время вернуться к стилям, поменять их и не потратить слишком много времени, разбираясь в коде. Часто в более или менее крупной веб-студии начинает один человек, а заканчивает совсем другой. В такой ситуации запутанный и нелогичный код отнимет у вашего коллеги многие часы бессмысленной работы. Чтобы облегчить работу и себе и коллегам, следует использовать определенные техники работы с таблицами стилей:

Порядок расположения стилей в css должен соответствовать разметке

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

Задавайте главные ID и классы в начале файла

Сразу определите основные структурные элементы страницы:

body
{
background: #fff;
color: #000;
font-size: 1ем;
}

#header
{
width: 100%;
font: 80% Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

Комментируйте код

Комментарии в коде файлов объясняют логику создателя файла. Осмысленные комментарии могут состоять из любых данных, которые помогут вам впоследствии разобраться с собственным кодом. Отличный пример комментариев к css – встроенные в Dreamweaver шаблоны. Вставить свои пометки в код можно так:

/* Все что написано здесь игнорируется браузером, это место для комментариев */

Правильно выбирайте тип селектора

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

HTML тэги: body, a, p, h2.
Классы – можно использовать где угодно. Минус в том, что добавляется немного лишнего кода в саму страничку.
ID – работают как классы. Но должны использоваться только для описания одного уникального элемента страницы. Логично присвоить id каждому диву, который формирует структуру разметки.

Иногда можно не присваивать очередной класс какому-то элементу и не захламлять html код веб-страницы. Часто встречается такая ситуация: в структуре страницы есть див с собственным id, в нем, например, навигация, которой также присвоен какой-то класс. И если мы хотим сделать ссылки этой навигации оранжевыми, не следует придумывать еще один класс для ссылок. Вот пример кода:

Чтобы сделать оранжевыми все ссылки внутри тега

Используйте названия, в которых есть смысл

Не называйте ничего в соответствии с позицией, размером и цветом. Представьте, что вы решили сделать маленький черный див белым и не очень маленьким. Диву присвоен логичный id: #small-black. Вы вносите изменения и делаете его огромным белым окном на весь экран. Проходит год и ваш коллега редактирует сайт, ему будет непросто найти стиль, описывающий большое белое окно в длинном css файле. Коллега назовет вас нехорошими словами. Когда вы называете что-то в соответствии с цветом, это логично. Но если цвет изменится, получается полная бессмыслица.

Групповые селекторы экономят место

Вот пример:

strong,a,h1,h2,h3,h4

{
color: #333;
font-weight: bold;
padding: 10px;
}

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

Другие посты, близкие по теме:

]]>

Добавить в закладки

]]>

Теги: CSS

января 2, 2010

Оставьте комментарий: