Размещайте каскадные таблицы стилей в отдельном файле

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

Удаляйте неиспользуемые селекторы

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

Применяйте группирование

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

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

Вместо того чтобы указывать значения отступа на каждой стороне элемента через свойства margin-left, margin-right, margin-top и margin-bottom, это можно одновременно задать через универсальное свойство margin. Перечисление значений через пробел позволяет установить индивидуальные отступы для каждой стороны. Кроме margin к универсальным свойствам относятся background, border, font, padding. Применение этих свойств сокращает объем кода и повышает его читабельность.

Форматирование кода

Существует множество разных подходов как же писать CSS-код. Кто-то упорядочивает селекторы по блокам, другой согласно структуре документа, третий по алфавиту, в общем, сколько людей, столько и мнений. Вы можете воспользоваться онлайновым инструментом, который форматирует CSS-код сразу четырьмя разными способами. А там уже сами решите, какой из способов вам симпатичнее.

Ссылка на сайт
http: //www.cssportal.com/format-css/

Принцип работы очень простой, вводите в текстовое поле свой код, нажимаете на кнопку «Format Code» и получаете четыре разных вида первоначального кода. Для примера возьмём следующий небольшой фрагмент.

body { font: 0.9em Arial, Verdana, Helvetica, sans-serif; color: #000; background: #fff; margin: 0; }.top { margin-bottom: 10px; padding-left: 3%; border-bottom: 1px solid #acacac; }

В результате его форматирования получатся следующие варианты.

Форматированный CSS (Formatted CSS)

body { font: 0.9em Arial, Verdana, Helvetica, sans-serif; color: #000; background: #fff; margin: 0; }.top { margin-bottom: 10px; padding-left: 3%; border-bottom: 1px solid #acacac; }

Порядок свойств не меняется, строки со свойствами сдвигаются вправо на четыре пробела, селекторы разделяются между собой пустой строкой.

Свойства в алфавитном порядке (Properties in Alphabetical Order)

body { background: #fff; color: #000; font: 0.9em Arial, Verdana, Helvetica, sans-serif; margin: 0; }.top { border-bottom: 1px solid #acacac; margin-bottom: 10px; padding-left: 3%; }

Строки со свойствами сдвигаются вправо на четыре пробела, селекторы разделяются между собой пустой строкой, стилевые свойства упорядочиваются по алфавиту.

Лесенкой (Longest Property to Shortest)

body { font: 0.9em Arial, Verdana, Helvetica, sans-serif; background: #fff; color: #000; margin: 0; }.top { border-bottom: 1px solid #acacac; margin-bottom: 10px; padding-left: 3%; }

Строки со свойствами сдвигаются вправо на четыре пробела, селекторы разделяются между собой пустой строкой, строки со свойствами упорядочиваются по длине. Вначале идут самые длинные строки, в конце самые короткие.

Компактно (Compact)

body {font: 0.9em Arial, Verdana, Helvetica, sans-serif; color: #000; background: #fff; margin: 0; }.top {margin-bottom: 10px; padding-left: 3%; border-bottom: 1px solid #acacac; }

Селекторы и свойства записываются в одну строку, пустые строки удаляются.

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

Минимизация кода

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

Данное противоречие решается наличием двух версий CSS-файла: один файл для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью сетевых сервисов, которые и рассмотрим далее.

CSSMin

http: //tools.w3clubs.com/cssmin/

Простой, даже можно сказать, примитивный сервис, построенный на JavaScript и библиотеке YUI Compressor. Вводите в поле «Source» код CSS, нажимаете кнопку «Crunch» и получаете готовый результат в соседнем поле. Также даётся оценка входного и выходного объёма и соотношение в процентах между ними (рис. 22.1).

Рис. 22.1. Итог минимизации кода

CSS compressor

http: //www.csscompressor.com

Этот сервис удобен тем, что комментирует все свои действия, так что вы будете в курсе изменений вашего стиля. Работает он следующим образом. В поле CSS Input вставляете код CSS, выбираете желаемые настройки и нажимаете кнопку «Compress» (рис. 22.2).

Рис. 22.2. Интерфейс

Настройки следующие.

• Compression Mode — режим сжатия. Различается четырьмя видами.
• Highest — все правила записываются в одну строку.
• High — каждое правило записывается на своей строке.
• Standard — каждое свойство пишется на отдельной строке,
• Low — каждое свойство пишется на отдельной строке и отбивается табуляцией.
• Sort Properties — сортировка стилевых свойств в алфавитном порядке.
• Compress colors — цвета вида #ffffff заменяются сокращённой формой #fff.
• Compress font-weight — оптимизируется насыщенность шрифта. Такое значение font-weight как normal заменяется на 400, а bold на 700.
• Lowercase selectors — все селекторы записываются в нижнем регистре.
• Remove unnecessary backslashes — ненужные слэши (\) удаляются.
• Remove unnecessary semi-colons — удалить необязательную точку с запятой в последнем свойстве.

После сжатия выводятся два поля: список сделанных изменений в свойствах и сжатый CSS (рис. 22.3).

Рис. 22.3. Результат использования

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: