Скин для WP своими руками. (css — финальный аккорд)

Как и обещал – тонкая доводка css под различные браузеры и курс “похудения” для кода.

Не знаю, кто как, а у меня весь процесс обучения идёт преимущественно на своих ошибках. Так, например выяснилась “особенность” Opera-ы корёжить <div>, оформление шапки с использованием CSS “display: block” или различие в отступах “margin” и “padding” у Opera и IE…

А, уж, про масштабирование текста в em-единицах, можно целую поэму сложить. Как правило, в ущерб величине кода, ОБЯЗАТЕЛЬНО надо прописывать “margin” и “padding” для основных элементов оформления. Это сведет к минимуму разночтения Вашего кода в разных браузерах.

Уменьшение размеров файла CSS достигается:

1. написанием коротких правил,
2. группировкой свойств похожих классов и ID,
3. разнесением свойств элемента по подобиям

Давайте рассмотрим все три метода по порядку, но перед этим выполним базовую оптимизацию, чтобы не плавать в коде:

• В файле CSS элементы упорядочиваем сначала по виду: основные теги, ID и классы; а затем в этих трёх списках – по алфавиту.
• Стандартное многострочное форматирование нужно свести в одну строку, а после последнего описания – убрать точку с запятой.

Справились? Отлично! А теперь по пунктам:

1.Написание коротких правил CSS:

Правила вида:

“margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;”

можно и нужно преобразовать к виду

“margin: 0;”

или, если где-то есть отступ отличный от остальных – используем

“margin: 0px 3px 3px 10px;”

,где направление обхода по часовой стрелке: верх – справа – низ – слева.

Такой же принцип для “padding”, “border”, “border-style”, “border-width” и “border-color”.

Цвета вида #AACCFF вполне корректно читаются в записи #ACF, поэтому, там где использована основная палитра (Web-Safe) их заменяют сокращённой записью.

Именованные цвета замените на hex-код, потому, что большинство имён длиннее семи символов. (Сравните длину #b8860b и darkgoldenrod)

2.Группировка свойств похожих классов и ID

Вместо записи:

.video {max-width: 100%; height: auto}
object {max-width: 100%; height: auto}

примените:

.video, object{max-width: 100%;height: auto}

 3.Разнесение свойств элемента по подобиям

Допустим у нас есть код:

ul.tab{padding:1em}
#my-cath{ width:160px; display:none}
#comment{ display:none; padding:1em;   width:160px }

Очевидно, что можно тот же код записать на строку короче:

ul.tab, #comment {padding:1em}
#my-cath, #comment { width:160px; display:none}

В результате таких манипуляций наш скин станет меньше килобайт на 5–10, что, при общем коде страницы в 15–30Кb, согласитесь, не плохо.

Удачи Вам.