Как оптимизировать CSS

Одна из самых полезных особенностей CSS2 - способность использовать стенографию («скоропись»). В результате чего мы получаем красивый, не перегруженный код, который пишется легко и быстро.

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

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

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

1. Отбивка (Margin & Padding)
2. Шрифты (Font)
3. Фон (Background)
4. Границы (Border)
5. Списки (List)
6. Контуры (Outline)

Отбивка (Margin & Padding)

Вместо того, чтобы каждый раз прописывать отдельно margin-top, margin-right …. как здесь:


{
margin-top: 10px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 0px;
}


Мы можем сделать следующее:

{margin: 10px 15px 5px 0;}

Первый и второй код абсолютно идентичны друг другу и работоспособны. А чтобы было проще запомнить, что и в каком порядке писать - вспоминаем, как движется стрелка на часах. Сначала она вверху (margin-top), потом справа (margin-right), потом внизу (margin-bottom) и наконец - слева (margin-left)

Если же у нас отбивка (Margin & Padding) со всех сторон одинаковая, то пишем так:

{margin: 10px;}

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


{
padding-top: 10px
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}


это мы можем смело писать как

{padding: 10px 5px;}

А вот теперь самое интересное - мало кто знает, что можно использовать не только 1, 2 или 4 переменных, но и 3! Первая будет отвечать за отбивку сверху, вторая - за правую и левые стороны, а третья - за низ. Например:

{margin: 0 10px 5px 10px;}

идентично

{margin: 0 10px 5px;}

Шрифты (Font)

По сравнению с margin и padding параметров здесь несколько больше, но это не повод пугаться. Посмотрим, что у нас вообще есть и в каком порядке это должно писаться:


{
font-style: italic;
font-variant: small-caps;
font-weight: 500;
font-size: 1em;
line-height: 24px;
font-family: arial,verdana,sans-serif;
}


А коротко:

{font: italic small-caps 500 1em/24px arial,verdana,sans-serif;}

Следующий код задает размер шрифта 12 pixels, высоту линий 28 pixels, тип шрифта - без засечек:

{font: 12px/28px sans-serif;}

Остальные параметры, которые были опущены, либо наследуют родительские свойства, либо приравниваются к нормальным (обычным).

Фон (Background)

Объединяем несколько параметров в один:


{
background-color: #456;
background-image: url(back.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 50% 50%;
}


или:

{background: #456 url(back.gif) repeat-y fixed 50% 50%;}

Свойства фона, как и шрифтов, имеют установки по умолчанию. Либо цвет фона, либо фоновый рисунок - должны быть прописаны. Вот эти параметры:


color: transparent;
image: none;
repeat: repeat;
attachment: scroll;
position: left top (0 0);


Самая частая ошибка - это когда значения позиции фона меняются местами. По-русски:

{background-position: top left;}

должно писаться как

{background-position: left top;}

Но, раз мы решили оптимизировать код, то положение фона слева вверху было бы проще написать как 0 0, а справа внизу - 100% 100%.

Еще один момент, который вы могли уже заметить - это настройки цвета. Мы установили цвет фона #456, а его шестнадцатиричное значение - #445566. Хотя это и не значительное изменение, но все-таки оно немного упрощает работу.

Границы (Border)

Одни из самых часто используемых свойств рамок - это ширина и стиль. Раньше, чтобы придать необходимые параметры, нам пришлось бы писать следующий код:


{
border-left-width: 2px;
border-left-style: solid;
border-left-color: #000;
border-right-width: 2px;
border-right-style: solid;
border-top-color: #000;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #000;
}


Сейчас же мы можем уложиться всего в пару строк:


{
border: solid #000;
border-width: 3px 2px 0;
}


В случае, если параметры всех границ одинакомы:

{border: 3px solid #000;}

Используйте все возможности для оптимизации кода. В случае необходимости вам будет легче его потом править.

Списки (Lists)

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


{
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}


заменяем на:

{list-style: inside circle url(bullet.gif);}

Контуры (Outline)

Так же редко используется. Плюс поддерживается не во всех браузерах - так что будьте осторожны.


{
outline-color: #fff;
outline-style: dotted;
outline-width: 1px;
}


можем смело заменить на

{outline: #fff dotted 1px;}

Спасибо за добавление статьи в: