Базовые правила построения CSS

Думаю сегодня я Америку не открою, но все же некоторые забывают простые и очевидные вещи. Хотя начинающим верстальщикам урок будет полезен.

CSS сниппет

Продолжаем копилку знаний!

 И так, "кроссбраузерность" что это и с чем ее едят. Кроссбраузерность - это свойство сайта корректно отображаться и работать во всех браузерах. Коль мы повели речь о кроссбраузерности, следовательно некоторые браузеры отображают свойства тегов по разному, поэтому начиная писать css стиль для сайте, следует сначала обнулить все свойства тегов. Я это делаю так:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big , cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, center, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  outline: 0;
  vertical-align: baseline;
}
table {border-collapse:collapse;border-spacing:0;}

не забываем про HTML5 и добавляем новые или давно забытые теги:

article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}

// на всякий случай принудительно объявим блочный метод
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
} 

для наглядности я привел каждое свойство с новой строки, но почему то мне привычней писать в одну строку. Так и читается лучше и поиск по свойствам не заставляет насиловать скролл. Да и пробелов стараюсь ставить как можно меньше, эта привычка осталась со времен dial-up интернет-соединения. А выглядеть это будет так:

article {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;}

Перейдем к шрифтам. Я привык размеры шрифтов привязывать к базе, основной font я описываю в теге body, причем использую универсальное свойство, которое многие игнорируют. Заголовки объявляю в процентах от базового. Пример:

// где 12px - размер шрифта
//     1.4 - межстрочное расстояние (интерлиньяж). Можно указывать и фиксированный интерлиньяж в px
body {
  font: 12px/1.4 Tahoma, sans-serif;
}
h1 {font-size: 180%;}
h2 {font-size: 160%;}
h3 {font-size: 140%;}
h4 {font-size: 120%;}

Если мы часто пользуемся классами(class) в написании контента, я описываю универсальные классы с float, который склеивается с другими. Думаю не для никого не секрет что классы можно склеивать class="atrib float_left cs_other". Чаще всего такая техника используется с графическим контентом (img)

.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

Еще один класс без которого я не представлю верстки - clearfix, отменяющий обтекание.

.clearfix, #clearfix {
  clear:both;
}

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

Чуть позже я постараюсь описать технику создания анимации по средствам CSS3 без использования JS и фреймворков.