CSS. Выходим на новый уровень

Если Вы недавно начали заниматься версткой html-страниц и хотите научится это делать лучше эта статья для Вас, кроме того она подойдет для тех кто верстает уже давно, к сожалению многие неправильно составляют свои таблицы стилей.
Вот несколько основных моментов грамотного написания CSS.

1. У любого браузера существуют значения свойств стилей по-умолчанию, например это касается padding и margin. Если мы не хотим что-бы наш сайт выглядел по разному в разных браузерах (мало кто хочет) нам необходимо сбросить эти значения. Для этого достаточно в начало нашего файла со стилями вписать этот код

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;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
 
/* remember to define focus styles! */
:focus {
        outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
        text-decoration: none;
}
del {
        text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}

Это код css-библиотеки сброса стилей Reset.css. Обратите внимания что после его вставки желательно избавится от тех селекторов которые не будут применятся.

2. Правильно оформляйте стили. Помните, что хорошо написанный удобочитаемый код оправдает себя в будущем, уверен вам придется еще не раз вернутся к нему, гораздо проще разобраться в грамотно-составленном коде, речь идет о пробелах, переносах, новых строках… Существует два стиля написания CSS, первый

#contact_left {
        float: left;
        color: #4d0c1a;
        padding-top: 20px;
}

— каждое новое свойство пишем на новой строке, обычно является новичковым, некоторые считают его более наглядным, такой метод увеличивает размер css-файла, второй

div.content { color:#999; font-size:1.5em; padding:30px 0; }
        div.content .name { font-size:2em; color:#555; }
        div.content .value { font-size:1.7em; color:#555; }
 

— все свойства пишем на одной строке разделяя их пробелами, основное преимущество этого метода заключается в том что можно писать стили в иерархическом порядке, что в определенной степени облегчает жизнь разработчику

какой стиль выбрать — решать вам!

3. Используйте наследование там где это возможно. Это очень просто и удобно! Определите свойство один раз у родителя элемента (у того который располагается выше) и у вас не будет больше необходиомсти задавать его каждый раз для каждого потомка, если понадобится в дальнейшем вы сможете его переопределить.
Например, чтобы определить размер и имя шрифт для всей страницы, задайте его для BODY

body {
        background: #855a23 url(../image/bg.gif) repeat-y scroll center top;
        color: #000;
        font-family: arial, helvetica, sans-serif;
        font-size: 11px;
}

Для всех наследуемых элементов страницы будет шрифт размером в 11px
Если для отдельного параграфа потребуется использовать более крупный шрифт, просто задайте ему его, тем самым переопределив начальное значение. Важно помнить, что значения, заданные в виде процентных величин, не наследуются!

Оригинал статьи представлен в моем блоге maxmoriss.ru

UPD Это моя первая статья на Хабре, не судите строго!