Конечно, каждый может писать CSS код. Даже существуют программы, делающие это. Но всегда ли код получается идеальным? Вот пять путей, с помощью которых этого можно добиться.
Путь №1. Сброс
В начале кода следует принудительно обнулять css-параметры основных тегов. Например так:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
а затем уже переопределять значения CSS. Это делается потому, что разные браузеры могут по-своему интерпретировать неопределенные значения и не всегда это будет так, как нам нужно.
Путь №2. Алфавитный порядок
Значения свойств следует писать в алфавитном порядке. Например, так:
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
Конечно, из-за этого код не станет работать быстрее, но вам будет удобнее находить тот или иной параметр, в случае большой таблицы стилей.
Путь №3. Структурирование и организация.
Вам следует писать таблицу стилей таким образом, чтобы она имела определенную структуру, а также не скупитесь на комментарии в CSS.
Например так:
/*****Сброс*****/
Сбрасываем параметры всех тегов
/*****Базовые элементы*****/
Определение стилей для тегов: body, h1-h6, ul, ol, a, p и т.п.
/*****Базовое расположение элементов сайта*****/
Определите расположение элементов сайта: header, footer и т.п.
/*****Хедер*****/
Определите значения элементов хедера
/*****Содержание*****/
Определите значения элементов содержательной части сайта.
/*****Футер*****/
Определите значения элементов футера
/*****и т.д.*****/
Определите значения элементов для других частей сайта
Использование комментариев и группировка CSS по элементам поможет быстрее найти и изменить то значение, которое вы хотите.
Путь №4. Улучшение читаемости и внешнего вида кода.
Если значений у тега больше трех, то пишите каждый на отдельной строке. Это поможет удобнее читать и воспринимать код.
Например так:
div#header { float: left; width: 100%; }
div#header div.column
{
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
Путь №5. Начать вовремя.
Не стоит приаттачивать таблицу стилей к документу до тех пор, пока не создадите готовую структуру этого документа и не определитесь с его элементами.
Вы должны определиться, как будет выглядеть ваша страница: где будет шапка, где будет основная часть, будет ли футер или нет, какие еще элементы вы хотите включить в дизайн страницы.
И запомните: CSS - ничто без хорошо организованного и правильно структурированного web-документа.
Мы рассмотрели несколько способов улучшить код, однако это далеко не все. Может быть у вас есть какие-то свои?