Несколько советов по применению CSS

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

Не создавайте слишком много дивов

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

Существует концепция, которая по английски называется box model. Понятие бокса обсуждается подробнее в статье CSS box. Смысл в том, что не только дивы, а все заголовки, параграфы и т.д. сами по себе являются боксами. И им можно задать размеры, отступы, поля, границы и расположение на странице. Умелое использование боксов позволяет создавать очень сложную, интересную разметку не усложняя код. А новые дивы стоит добавлять только когда это действительно необходимо.

Не используйте ненужные стили

Зачем осложнять жизнь себе и коллегам, если над сайтом кроме вас работает кто-то еще? Если нет нужды добавлять очередной стиль, не делайте этого. Если вы хотите добавлять новый стиль, например цвет заголовка, нужно сначала проверить - не унаследован ли он уже тем элементом, который вы хотите форматировать. Т.к. CSS - это каскадные таблицы стилей, то заголовок может, к примеру унаследовать цвет от контейнера, в который он вложен. Нет нужды повторяться и задавать ему тот же цвет повторно в стиле h1{...}. Если вы уже определили цвет в нескольких местах, посмотрите: может быть и одного более чем достаточно. Вообще, эти рассуждения кажутся неважными только до того момента, когда разметка стала разваливаться и нужно найти причину. А тогда ваш код, написанный вчера больше не кажется логичным. А уж если кто-то другой попробует в нем разобраться, шансов еще меньше.

Используйте при выделении частей текста <trong> и <em>

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

Отдавайте предпочтение групповым селекторам

Опыт показывает, что частот множество элементов страницы имеют мнжду собой много общего. К примеру все заголовки от h1 до h5 (хотя я не видел человека, использующего h5) имеют одинаковый шрифт, а цвета и размеры разные. В таком случае для экономии места можно использовать групповой селектор. В данном примере нужно просто перечислить все элементы через запятую и определить их цвет в одном общем правиле: h1,h2,h3,h4 {color: #355093; }. Это удобно еще и тем, что когда вы захотите поменять цвет всех заголовков разом (а это вполне вероятно т.к. цвет у них уже одинаковый), то поменять нужно будет номер цвета тиолько в одном месте.

Называйте все по возможности логично

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

Дата публикации: 20.12.2009

Вы вошли на сайт как: Гость Войти по OpenId

Включите картинки в браузере Обновить картинку

Комментариев нет.

Рейтинг@Mail.ru Rambler's Top100