Использование каскадных таблиц стилей уже само по себе повышает удобство разработки сайта и его действенность. Активное применение стилей и управление с помощью них видом элементов веб-страниц — современная парадигма создания сайтов. Именно по этой причине следует уделить достаточно внимания написанию стилевого кода. Учитывая некоторые особенности которые описаны ниже, можно создать действительно эффективный и удобный документ, содержащий описание стиля и ускоряющий загрузку веб-страниц.
Размещайте каскадные таблицы стилей в отдельном файле
Размещение стилей в отдельном файле позволяет ускорить загрузку веб-страниц
за счет уменьшения кода, а также кэширования файла с описанием стиля. Также
файл со стилями позволяет, изменяя параметры в одном единственном месте, управлять
видом всех страниц, где указана на него ссылка.
Создавайте свои собственные селекторы
Селекторы Class удобно использовать, когда нужно применить стиль к разным тегам
веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных
слов или даже букв, а также блоков, содержащих в себе разные элементы употребляются
теги SPAN и DIV.
Тег SPAN предназначен для изменения стиля выделенной части текста, такой как
отдельный символ или их набор, а DIV позволяет применять
стиль сразу к целому блоку. Перед этим тегом, в отличие от SPAN,
автоматически добавляется перенос строки и пустое пространство, аналогично действию
параграфа.
Несколько подряд идущих тегов, задающих форматирование, лучше заменить одним
тегом SPAN с заданным стилем.
Делайте стили удобными для редактирования
Пока происходит работа над сайтом, файл со стилями приходится изменять по многу
раз. Для повышения удобства и понимания цели различных селекторов, используйте
комментарий, который помещается между символами /* и */. Комментарий повышает
читабельность кода и позволяет легко разобраться в нем даже по прошествии некоторого
времени. Другим способом создания удобного стиля является использование различных
отступов и пробелов. Лучше для этой цели подходит знак табуляции, он добавляет
сразу несколько пробелов, и при этом занимает минимум памяти. Сравните два способа
описания параметров (пример 1).
Пример 1. Написание файла со стилем
a {font-family: Arial, Helvetica, sans-serif; font-size: 80%; color: #003366;}
a:visited {color: #660066;}
a:hover {color: #800000;}
.title {font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFEE; text-align: center;}
/* Тот же самый стиль, но представлен более «красиво» и понятно
*/
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #003366;
}
a:visited {
color: #660066;
}
a:hover {
color: #800000;
}
.title {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFEE;
text-align: center;
}
Несмотря на то, что объем нижнего примера больше, чем у верхнего, управлять параметрами стилей удобней и наглядней.
Удаляйте неиспользуемые селекторы
Большое количество селекторов создает путаницу в вопросе о том, кто из них за
что отвечает, да и просто увеличивает объем документа. Чтобы этого не произошло,
удаляйте селекторы, которые никак не применяются на сайте. К сожалению, определить
точно, какой элемент используется, а какой нет, довольно сложно, поэтому добавляйте
комментарий к своим собственным селекторам. Это поможет хотя бы не запутаться
в большом объеме текста.
Переопределяйте стиль тегов
«Идеальный» код HTML должен содержать только теги и текст, а более
ничего лишнего. Для достижения такого результата или хотя бы приближения к нему,
описание стилей тегов выносится в отдельный файл, а сам тег пишется без всяких
параметров (пример 2). В этом случае происходит сокращение кода и ускорение
загрузки веб-страниц.
Пример 2. Подключение таблицы связанных стилей
Применяйте группирование и контекстные селекторы
Достоинство и удобство группирования состоит в описании одинаковых параметров
селекторов в определенном месте. Тем самым, значение параметра пишется только
один раз, а не повторяется многократно. Контекстные селекторы расширяют возможности
языка описания стилей, делая более гибким их степень применения на веб-страницах.