... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Оптимизация таблиц стилей. ( стр.1)

 

 

Структура таблиц стилей ||  Оптимизация таблиц ||  Практический пример структуризации и оптимизации


Цель оптимизации - максимально сократить код таблицы при сохранении результативности всех правил. Это довольно сложный процесс, включающий множество составляющих успеха. Основными из них можно считать:

  • правильный подбор имен классов и идентификаторов;
  • верстка таблиц без пробелов и переводов строк;
  • использование стенографических свойств;
  • группировка селекторов с одинаковыми объявлениями.

Выбор имен

Решающую роль здесь могут сыграть даже имена классов и идентификаторов. Поэтому следует выбирать лаконичные имена, которые должны отражать смысл стиля, а не качественные его характеристики. В этом случае нужно соблюдать тонкий баланс между краткостью названия и смыслом стиля. Например, требуется создать особенный стиль для первого заголовка на странице, который должен отличаться от всех других, скажем, зеленым цветом и растяжкой текста. Тогда, очевидно, требуется создать идентификатор, а назвать его можно по-разному: "#green" "#green_header" "#first_header" или просто "#f_h".

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

Верстка таблицы стилей

Как вы уже знаете, CSS не чувствителен к лишним пробелам и переводам строк. Поэтому правило вида:

P {color: red}
аналогично правилу
P {
color: red
}

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

Значения по умолчанию

У каждого свойства есть значения по умолчанию, не стоит их указывать явным образом. В тексте значения по умолчанию следует использовать только в тех случаях, когда надо переопределить ранее заданные значения (вспомните пример с удалением подчеркивания у ссылок, когда указывалось свойство text-decoration: underline, чтобы убрать подчеркивание, использующееся для ссылок по умолчанию). Рассмотрим стиль заголовка H1:

H1 { text-decoration: none; letter-spacing: normal; line-height:100% }

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

 

Страница: - 1 - | - 2 - | - 3 -

 

Структура таблиц стилей ||  Оптимизация таблиц ||  Практический пример структуризации и оптимизации

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены