Как правильно применять CSS. Несколько советов.

Как правильно применять CSS? Все стараются перейти с табличной верстки на дивы, не используя при этом уникальные преимущества CSS. В этой статье даны несколько практических советов по дивовой верстке.

Как правильно применять CSS

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

Дивов не должно быть чересчур много

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

Не добавляйте необязательные стили

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

Используйте "хаки" для IE с умом

Не стоит применять хаки, пока не очевидно, что же именно пошло не так. Сначала лучше сделать всю разметку так, чтобы она безошибочно отображалась и в IE 6,7 (головная боль для всех разработчиков) и нормальных браузерах. Вероятно при этом придется пожертвовать какими-то элементами дизайна. А "хаки" применяйте только если во что бы то ни стало хотите, чтобы пользователь Explorer видел точно то же, что и все остальные. Вообще, разработка сайтов, работающих стабильно во всех браузерах, предполагает определенные компромиссы. Главное, чтобы пользователь мог нориально использовать ваш сайт с любого из основных браузеров без серьезных проблем. А если при этом сайт выглядит чуть более убого в IE6, ничего страшного.

Применяйте для форматирования текста <em> и <strong>

Иногда надо отформатировать кусок текста определенным образом. Не обязательно придумывать для этого новый класс. Есть предназначенные именно для логичного форматирования элементы: strong, b, em, small. Их применение хорошо и с точки зрения оптимизации т.к. слова внутри тегов выделения имеют чуть больший вес для поисковых систем. Главное, не перебирайте с этим.

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

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

• /*
• A # p : #999999
• B # strong : #333333
• C # background #FFFFFF
• D # footer #0f0
• */

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

Применяйте групповые селекторы

Предположим, что есть группа элементов. У них между собой много общего. Для экономии места и времени мудро применить групповой селектор. Пример: перечислить p,a,h1 и h2 через запятую и дать им цвет шрифта и сам шрифт в одном общем правиле.

Давайте всему логичные названия

Применять логичные названия id и классов нужно всегда. Это особенно важно, когда css файл сильно разрастается. Это работает точно так же, как и названия файлов. Сегодня что-то очевидно, завтра уже не очень, а послезавтра вообще не понимаешь - что это за файл. Все были в такой ситуации.