CSS, HTML и многое другое…

Одно из основных преимуществ использования CSS — уменьшение времени загрузки страницы. Но не стоит останавливатся на этом, ведь можно сократить и сам CSS.

Font

Используйте:

font: italic small-caps bold 1em/1.5em serif

…вместо

font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
font-family: serif

Порядок записи:

[[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

Такая сокращенная запись будет работать, если указаны font-size и font-family. Если их опустить, то правило проигнорируется. Если не указывать font-weight, font-style или font-variant, то им присваивается значение normal, так что учтите это.

Background

Используйте:

background: #fff url(image.gif) no-repeat fixed top left

…вместо

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top left

Порядок записи:

[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>]

Если опустить любое из этих значений, ему будет присвоено значение по умолчанию. Если не указывать значение background-position, фоновое изображение будет расположено в левом верхнем углу контейнера и затем продублировано по горизонтали и вертикали.

Lists

Используйте:

list-style: disc outside url(image.gif)

…вместо

list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Порядок записи:

[ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ]

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

Margin & padding

Есть несколько вариантов сокращений для внешних и внутренних отступов, в зависимости от количества сторон контейнера с одинаковыми значениями margin или padding.

4 разных значения

Используйте:

margin: 2px 1px 3px 4px (top, right, bottom, left)

…вместо

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

3 разных значения

Используйте:

margin: 5em 1em 3em (top, right и left, bottom)

…вместо

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

2 разных значения

Используйте:

margin: 5% 1% (top and bottom, right and left)

…вместо

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

1 значение

Используйте:

margin: 0 (top, bottom, right and left)

…вместо

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Приведенные выше правила также применяются для padding и border.

Border

Используйте:

border: 1px solid #000

…вместо

border-width: 1px;
border-style: solid;
border-color: #000

Используйте:

border-right: 1px solid #000

…вместо

border-right-width: 1px;
border-right-style: solid;
border-right-color: #000

(можете заменить right на top, bottom или left.)

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

Такие границы можно получить так:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

А можно добится того же используя:

border: 8px solid #336;
border-width: 10px 8px 8px 10px;
border-color: #ccf #336 #336 #ccf

Вывод

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

Источник: CSS shorthand properties