Нельзя допускать бардака и неразберихи. Иногда разработчики используют дивы в огромном количестве, чтобы создать разметку так, как они это делали бы используя таблицы. Нужно стремиться к чистой и логической разметке, использовать различные структурные элементы.Не добавляйте еще один див, пока не рассмотрите возможности использования CSS для того, чтобы задать размеры и расположение уже существующим элементам на странице.
Не добавляйте лишние стили
Надо облегчать себе жизнь, а не осложнять. Если не обязательно добавлять еще один стиль, не нужно этого делать. Если вы хотите добавить стиль, например цвет бэкграунда, но не уверены, нужно ли это, не добавляйте прежде чем не проверите — возможно он и без того наследуется этим элементом. А если вы уже добавили стиль в разных местах, подумайте: может достаточно и одного? Все это кажется неважным только до того момента, когда что-то идет не так и надо искать причину. И тогда свой же код 3-х дневной давности кажется нелогичным и запутанным.
Не злоупотребляйте «хаками» для IE
Не используйте хаки, пока не разобрались, что именно и почему идет не так. Сначала лучше попытаться сделать разметку так, чтобы она нормально отображалась и в правильных браузерах и в IE 6,7. Можно и пожертвовать незначительным элементом дизайна, чтобы не осложнять себе жизнь. Создание сайтов, работающих стабильно в разных браузерах, предполагает компромиссы.
Определяйте константы
В программировании есть такие понятия как константы, которые используются раз за разом в коде программы. В CSS констант не хватает, но можно попробовать восполнить этот недостаток. Для этого хорошо использовать комментарии. Классический пример — создание списка цветов, используемых на сайте. Это значит, что у вас перед глазами всегда есть номера основных цветов и это снижает риск выбрать какой-то близкий, но не точный цвет по ошибке. Также этот список помогает менять цвета при необходимости. Вот пример такого комментария:
- /*
- 1 # Text: #333333
- 2 # h1,h2 #000066
- 3 # blue header #333399
- 4 # navigation #CCCCFF
- 5 */
Используйте для форматирования текста
Иногда хочется отформатировать определенным образом части текста или только пару слов в предложении. Не нужно придумывать новые классы и тем более заключать блоки текста в отдельные дивы. Для форматирования текста есть специально для этого предназначенные элементы разметки: strong, em, small. Также, их использование более оправдано с точки зрения сео т.к. словам в тегах выделения присваивается несколько больший вес поисковиками. Главное тут не переусердствовать. Но если продвижение сайтов в Санкт-Петербурге происходит в условиях серьезной конкуренции, то почему не использовать и такую маленькую возможность опередить конкурентов?
Используйте логичные названия
Использование логичной системы обозначения классов и id важно при большом размере css файла, особенно если приходится что-то серьезно менять. Это как и названия файлов — то что очевидно сегодня, завтра уже неясно. Сегодня поленился дать классу развернутое, логичное имя, завтра десять минут ищешь, к чему же это все относится.
Нужно избегать называть классы и id в зависимости от их цвета, расположения и размера т.е. всего того, что называется презентацией. Иначе то, что сегодня было #right-black, завтра может уже превратиться в #left-white. Т.е. вы изменили расположение элемента на странице и его цвет, а имя, присвоенное #id осталось прежним и это, мягко говоря, нелогично.
Больше используйте групповые селекторы
Если есть группа элементов, которые имеют между собой много общего, то выгодно использовать групповой селектор. Например можно просто перечислить h1, h2, h3, strong через запятую и определить их цвет, шрифт и подчеркивание в одном единственном правиле. Это экономит и время и место.
Извлекайте пользу из каскадной природы CSS
Представьте два очень похожих элемента на странице. Можно написать два больших css-стиля для каждого из них в отдельности. А можно задать один общий стиль для элемента, стоящего выше в иерархии и для этих двух похожих элементов прописать в отдельности только то, что отличает их друг от друга.
