Новая версия сайта находится по адресу

wa.artel.by

Материал взят c сайта http://www.richinstyle.com c нарушением всех авторских прав. Перевод by FireFalcon.

Фишка 3 - Комбинирование, сжатие и объединение

Следующий шаг - это объединение стилей, но надо учитывать необходимость всех имеющихся стилей (нужны ли они вообще), а также комбинирование стилей. Однако группировка элементов, таких как H1, H2 {...}, плохая идея. Это ведет к усложнению таблиц стилей. Вот примеры:

I
A:active {
color: #FFFF66;
background: #9966CC;
}

Заменяем на

A:active {color: #FF6; /* каждая цифра повторяется, так что это тоже самое, что и FF FF 66 */ background: #96c}

II
BLOCKQUOTE {
border-style : solid;
border-width : 1px;
font-style : italic;
line-height : 1.58em;
margin-bottom : .75em;
margin-left : .58em;
margin-right : 1.3em;
margin-top : .75em;
padding : .3em;
border-color: #c06565;
}

Заменяем на

BLOCKQUOTE {border: 1px solid #c06565;
font-style: italic;
line-height : 1.58em;
margin: .75em 1.3em .75em .58em}

III

H1,H2,H3,H4,H5,H6 {
font-style : normal;
line-height : 1.33em;
margin-bottom : .33em;
text-decoration : none;
font-family: "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif
}

H1, H2 {
margin-left: -7%;
}

H3, H4, H5 {
margin-left: -3%;
}

H6 {
margin-left: -1%
}

H1, H2, H3, H4, H5, H6 {
color: #66CCCC;
}

H1 {
font-size : 2em;
margin-top : 1.33em;
}

H2 {
font-size : 1.75em;
margin-top : 1.3em;
}

H3 {
font-size : 1.58em;
margin-top : 1.3em;
}

H4 {
font-size : 1.24em;
margin-top : 1.24em;
}

H5 {
font-size : 1.17em;
margin-top : 1.17em;
}

H6 {
font-size : 1em;
margin-top : 1em;
}

Заменяем на

H1 {font: 2em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.3em 0 .33em -7%;
color: #6CC}

H2 {font: 1.75em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.3em 0 .33em -7%;
color: #6CC}

H3 {font: 1.58em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.3em 0 .33em -3%;
color: #6CC}

H4 {font: 1.24em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.24em 0 .33em -3%;
color: #6CC}

H5 {font: 1.17em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.17em 0 .33em -3%;
color: #6CC}

H6 {font: 1em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1em 0 .33em -3%;
color: #6CC}

Однако не надо преувеличивать важность таких преобразований. Это уменьшает время загрузки, облегчает ловлю багов и становится проще использовать технику с детектирование браузера (разные CSS для разных браузеров) из-за меньших изменений. Не более

Продолжение следует...