Создание эффективного стиля

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

Размещайте каскадные таблицы стилей в отдельном файле
Размещение стилей в отдельном файле позволяет ускорить загрузку веб-страниц за счет уменьшения кода, а также кэширования файла с описанием стиля. Также файл со стилями позволяет, изменяя параметры в одном единственном месте, управлять видом всех страниц, где указана на него ссылка.

Создавайте свои собственные селекторы
Селекторы Class удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы употребляются теги SPAN и DIV.
Тег SPAN предназначен для изменения стиля выделенной части текста, такой как отдельный символ или их набор, а DIV позволяет применять стиль сразу к целому блоку. Перед этим тегом, в отличие от SPAN, автоматически добавляется перенос строки и пустое пространство, аналогично действию параграфа.
Несколько подряд идущих тегов, задающих форматирование, лучше заменить одним тегом SPAN с заданным стилем.

Делайте стили удобными для редактирования
Пока происходит работа над сайтом, файл со стилями приходится изменять по многу раз. Для повышения удобства и понимания цели различных селекторов, используйте комментарий, который помещается между символами /* и */. Комментарий повышает читабельность кода и позволяет легко разобраться в нем даже по прошествии некоторого времени. Другим способом создания удобного стиля является использование различных отступов и пробелов. Лучше для этой цели подходит знак табуляции, он добавляет сразу несколько пробелов, и при этом занимает минимум памяти. Сравните два способа описания параметров (пример 1).

Пример 1. Написание файла со стилем

Несмотря на то, что объем нижнего примера больше, чем у верхнего, управлять параметрами стилей удобней и наглядней.

Удаляйте неиспользуемые селекторы
Большое количество селекторов создает путаницу в вопросе о том, кто из них за что отвечает, да и просто увеличивает объем документа. Чтобы этого не произошло, удаляйте селекторы, которые никак не применяются на сайте. К сожалению, определить точно, какой элемент используется, а какой нет, довольно сложно, поэтому добавляйте комментарий к своим собственным селекторам. Это поможет хотя бы не запутаться в большом объеме текста.

Переопределяйте стиль тегов
«Идеальный» код HTML должен содержать только теги и текст, а более ничего лишнего. Для достижения такого результата или хотя бы приближения к нему, описание стилей тегов выносится в отдельный файл, а сам тег пишется без всяких параметров (пример 2). В этом случае происходит сокращение кода и ускорение загрузки веб-страниц.

Пример 2. Подключение таблицы связанных стилей

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