Оптимизация CSS

Сначала давайте немного почистим от лишних селекторов таблицу CSS. Существует несколько полезных методов.
Таргетинг стилей

Оглавление:
  1. Отключить свойство
  2. Оптимизация и уменьшение кода CSS
  3. Макро-оптимизация
  4. Предоставить информацию стилей и указать структуру
  5. Комментирование
  6. Микро-оптимизация
  7. В алфавитном порядке
  8. Для скорости
  9. Оптимизировать работу CSS
.searchform > .searchsubmit {
   width: 14%;
   height: 25px;
   background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
   outline: 1px solid red;
}

Смысл использования этого свойства, в том что не добавляются размеры элемента. Даже использование красного red (или любое другое название цвета) является значительным. При кодировании используется только шестнадцатеричные, RGB() или HSL(а) цвет CSS.

Отключить свойство

Если нужно добавить новые свойство, вот способ быстро отключить не нужный: поставив x перед любым селектором стиля:

.social a {
   -moz-transition: opacity 0.3s ease 0s;
    x-display: block;
    height: 35px;
    opacity: 0.4;
}
к меню ↑

Оптимизация и уменьшение кода CSS

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

к меню ↑

Макро-оптимизация

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

к меню ↑

Предоставить информацию стилей и указать структуру

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

На базовом уровне, я рекомендую вставки информации разработчика (имя и т.д.) и дату последнего обновления в таблице стилей.

/* Таблица стилей
создана Дата: 09.15.2010
Дата последнего изменения: 06.04.2012
Изменил: ИМЯ
*/

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

/* Оглавление
- Link Styles
- Other sitewide styles
- Actions
- Layout
- LOGO
- TOP NAV
- NAVBAR
- SUBNAV
*/
…
(далее в документе...)
/* =Планировка */ (и т.д.)
к меню ↑

Комментирование

Комментирование разметки позволяет отслеживать начало и конец элементов, которые содержат другие элементы, и это позволяет ориентироваться быстрее.

Комментирование дивов и других основных элементов макета, которые начинаются с <! — # ID или имя класса -.> с помощью разметки <! — / конец # ID или имя класса -.> или <- / # ID или имя класса -.>.

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

Разметка c комментариями:

<div id="pagewrap">
<div id="header">
<h1>Заголовок</h1>
<ul id="navigation">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакт</a></li>
</ul>
</div> <!— #header —>
<div id="contentwrap">
<div id="maincontent">
<h2>Основное содержание Title</h2>
<p>Основное содержание, которое является намного более
важно, чем второстепенное содержание.</p>
</div><!— #maincontent —>
<div id="secondarycontent">
<h3>Боковая панель Title</h3>
<p>Боковая панель содержания, которые не так важно,
как основной контент</p>
   </div><!— #secondarycontent —>
</div><!— #contentwrap —>
<div id="footer">
<p>стандарт авторского права и информация нижнего колонтитула</p>
  </div><!— #footer —>
</div><!— #pagewrap —>
к меню ↑

Микро-оптимизация

Микро-оптимизации сокращает размер файла, ускоряет время загрузки страницы. Вот несколько способов, с которыми вы можете улучшить свой CSS на микроуровне.

к меню ↑

В алфавитном порядке

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

.login {
   border-left: 1px solid #69824d;
   float: right;
   font-weight: bold;
   line-height: 1.5em;
   list-style-type: none;
   margin-top: 5px;
   padding-left: 5px;
   width: 80px;
}
к меню ↑

Для скорости

медленно:

div#wrapper div#maincontent div#sidebar {
   background: #fff url(bg.png) repeat-x 0 0;
   border: 1px solid #ff0;
   font: normal 1.33em/1.33 Georgia, serif;
   margin: 10px 20px;
   padding: .1em;
}

быстро:

aside {
   background: #fff url(bg.png) repeat-x 0 0;
   border: 1px solid #ff0;
   font: normal 1.33em/1.33 Georgia, serif;
   margin: 10px 20px;
   padding: .1em;
}

Чем меньше, тем лучше, когда речь идёт о стиле. Для стилей соблюдайте следующие правила:

Используйте сокращенные свойства всякий раз, когда это возможно (и запомните эти элементы с помощью сокращения: сокращенный синтаксис свойств, порядок стоимости свойств, если таковые имеются; значения по умолчанию и требует значения свойств)

По возможности избегайте дублирование свойств

Не сокращенный CSS
aside {
   background-color: #fff;
   background-image: (bg.png);
   background-position: 0 0;
   background-repeat: repeat-x;
   border-width: 1px;
   border-style: solid;
   border-color: #ffff00;
   font-family: Georgia, serif;
   font-size: 1.33em;
   line-height: 1.33em;
   font-weight: normal;
   margin: 10px 20px 10px 20px;
   padding: .1em;
}
Сокращенный CSS
aside {
   background: #fff url(bg.png) repeat-x 0 0;
   border: 1px solid #ff0;
   font: normal 1.33em/1.33 Georgia, serif;
   margin: 10px 20px;
   padding: .1em;
}
к меню ↑

Оптимизировать работу CSS

И наконец, удаление нескольких строк и отступов также помогает сделать ваш сайт эффективным и быстрым. Вот несколько хороших инструментов очистить CSS.