Некоторые разработчики предпочитают делить CSS-код на три части: в первой части идут HTML-тэги, во второй структурные тэги, а в третьей располагаются собственные классы.
Раздел 1: HTML-тэги
В этом разделе код обычно делится на две подсекции. В первой подсекции обычно сбрасываются стандартные HTML-тэги, а во второй HTML-тэги получают новое значение.
Раздел 1: подсекция 1
Как вы уже, наверное, знаете, функция сброса CSS используется для того, чтобы сбросить стандартные значения в браузере (body, h1, p, ul, li, и т.д.). Самым популярным файлом, используемым для сброса, считается Eric Meyers CSS reset. Для HTML 5 мы бы посоветовали взглянуть на файл, основанный на предыдущем, но немного с другим названием - Richard Clark CSS reset. Эти файлы сбрасывают все имеющиеся HTML-тэги и поэтому в них так много CSS-кода. Из жизненной практики, чаще всего нужно сбрасывать лишь значения тэгов body, h1, h2, h3, p, li, ul, form, input, и немного реже table, tr и td. Кстати, если вам хочется, то вы можете использовать сокращенные варианты данных файлов:
/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {
border:0;
margin:0;
padding:0;
font-size:100%;
...
}
В предыдущем коде жирным текстом мы выделили некоторые HTML 5-тэги, которые вам потребуется сбросить (дальше смотрите их краткое описание)
Раздел 1: подсекция 2
Во второй подсекции мы просто задаем новые значения стандартным тэгам HTML:
/* Subsection 2: Standard HTML tags redefinition */
body,
form, input {
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}
Если нам нужно задать значение стандартного тэга (например, h1) с разными параметрами, в зависимости от местонахождения тэга на странице (h1 для заголовков статей, или h1 для заголовков разделов в меню), то можно добавить относительный CSS-код в раздел, который состоит из структурных тэгов (Раздел 2). Например, для меню:
aside {...}
aside h1 {...}
Раздел 2: Структурные тэги
В этом разделе мы задаем все CSS-элементы, которые образуют структуры страницы. Как и предвиделось, HTML 5 представляет новые тэги, которые улучшают семантику кода. Некоторые их них: "header", "nav", "article", "section", "aside", "footer"... Вы можете использовать эти тэги вместо часто используемых DIV, которые мы всегда использовали до этого времени, например:
<div id="nav">...</div>
Вкратце, картинка представляет собой простую верстку в два столбика, которая пользуется тэгами HTML 5 для образования структуры страницы.
CSS код очень простой:
header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}
Что практически идентично с кодом, который мы используем для слоев DIV:
#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}
...
Для каждого HTML-элемента вы можете указать дочерние элементы. Например, если это код навигационного меню:
<nav>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
…то дочерний код будет таким:
nav{...}
nav ul{...}
nav ul li{...}
nav ul li a{...}
Как мы уже говорили, советуем вам использовать абзацы и алфавитный порядок во время расположения параметров элементов, дабы повысить читаемость кода:
nav ul li a{
font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;
}
Какие ярко выраженные изменения относительно HTML 4? Не очень-то их и много:
<div id="nav">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div>
Проще говоря, такой тип структурных тэгов HTML 5 – это тоже, что и DIV с указанным ID в HTML 4:
#nav{...}
#nav ul{...}
#nav ul li{...}
#nav ul li a{...}
Раздел 3: Собственные классы
В последнем разделе наших CSS-файлов мы добавляем собственные класс, которые затем можно будет повторно использовать в нескольких разделах (шапка, меню, днище страницы, и т.д.)
/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}
Вот и все! Если у вас есть какая-то свежая информация или идеи относительно данной тематики, не стесняемся, пишем комментарии!