Веб дизайн
Планирование работы с CSS
Правильная работа с CSS
Чем больше мы полагаемся на CSS при создании сайтов, тем более громоздкими и запутанными становятся таблицы стилей. Важно спланировать и организовать содержание css файлов логично, чтобы через время вернуться к редактированию сайта и не запутаться.
Например, в фирмах, занимающихся созданием сайтов в Петербурге, проект может перейти от одного веб-дизайнера к другому. И если разобраться в своем коде бывает сложно, то переделывать чужой - просто нереально. Чтобы облегчить жизнь себе и коллегам в будущем, можно использовать несколько несложных приемов и сделать css более понятным и логичным. Вот эти приемы:
Вставляйте комментарии
Комментарии в css помогают найти нужную информацию и понять логику стиля. Осмысленные комментарии могут включать информацию о последних апдейтах, о стилях, созданных под IE и обо всем, что поможет вам потом разобраться в логике своего кода.
/* Смело вставляйте сюда свои пометки:)*/
Хороший пример грамотных комментариев - шаблоны в Dreamweaver.
Определяйте основные стили и классы в самом верху css-стиля
Сразу определяйте основные HTML элементы, например:
| Код | |
| 1 2 3 4 5 6 7 8 9 10 | body { background: #fff; font-size: 12px; } h1 { font-size: 1.3em; color: #000; } |
Потом перечислите все классы, которые будут использоваться на всех страницах при создании сайта:
| Код | |
| 1 2 3 4 5 6 7 8 9 | .hide { position: absolute; left: -1000px; } .fl { float: left; } |
Перечисляйте стили в том же порядке, как построена разметка HTML
CSS файлы могут быть длинными и нужно долго прокручивать страницу, чтобы что-то найти. Когда очередность стилей в css напоминает очередность расположения элементов на странице, нужное место в файле найти легче.
Используйте html-тэги, id и классы с умом
Используя правильный тип селектора, можно здорово уменьшить размер кода:
1. HTML-элементы (body, p, h1 и т.д.). Назначение следует из названия.
2. ID - уникальные идентификаторы, используются один раз на странице. Хороши для определения больших структурных элементов страницы.
3. Классы - задают стиль любому элементу.
Слишком много классов и id перегружают разметку. Представьте такой код:
| Код | |
| 1 2 3 | <ul id="nav"> <li><a href="www">ссылка</a></li> </ul> |
Задавать класс ссылке не нужно, достаточно написать такое правило:
| Код | |
| 1 | #nav li a { стиль ссылки здесь} |
Называйте классы и id логично
Не давайте имен в соответствии с цветом и расположением: это может измениться. Придумайте для себя логичную систему названий.
Используйте каскад
Многие команды элемент наследует от своих родителей, поэтому не нужно раз за разом задавать, например, цвет. Однако все, что относится к разметке (длина, ширина, отступы и т.д.) как правило не наследуется.
Используйте групповые селекторы
Например:
| Код | |
| 1 2 3 4 5 | h1, h2, h3 { color: black; padding: .2em; } |
Это экономит много места.
Дата публикации: 2009-11-13
Прочитано: 2147 раз
