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