5 способов писать CSS код лучше

Конечно, каждый может писать 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-документа.

Мы рассмотрели несколько способов улучшить код, однако это далеко не все. Может быть у вас есть какие-то свои?

Автор урока: Trevor Davis

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://trevordavis.net
Перевел: Сергей Патин
Урок создан: 24 Февраля 2009
Просмотров: 37753
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^