Оптимизация

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

Оглавление:
  1. Отключить свойство
  2. Оптимизация и уменьшение кода CSS
  3. Макро-оптимизация
  4. Предоставить информацию стилей и указать структуру
  5. Комментирование
  6. Микро-оптимизация
  7. В алфавитном порядке
  8. Для скорости
  9. Оптимизировать работу CSS

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
http://samartsy.ru/

.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.