Все блоки можно условно разделить на два класса: простые и составные. Простой блок атомарен и не позволяет вкладывать в себя другие блоки. Составной блок может содержать другие блоки.
Простые блоки
Простые блоки можно делать опираясь внутри блока в CSS-правилах на имена элементов. Строго говоря, в простые блоки можно вкладывать другие блоки до тех пор, пока у них не пересекаются имена элементов и не происходит конфликт стилей.
Рассмотрим на примерах.
Пример: иконка
Универсальный блок для вставки иконки. Позволяет вставлять иконки как одной картинкой, так и спрайтом. Как GIF/PNG-8, так и PNG-24. Позиционируется абсолютно, родитель должен зарезервировать место под иконку. Фоновая картинка задаётся для .b-icon i. Для выбора кадра спрайта используется .b-icon i { left: -Xpx } или .b-icon i { top: -Ypx }
HTML:
<i class="b-icon"><i></i></i>
CSS:
.b-icon
{
position: absolute;
overflow: hidden;
/* default width/height and offset */ /**/
width: 16px;
height: 16px;
margin-left: -19px;
}
.b-icon i
{
position: absolute;
/* Надо задать размер картинки */ /**/
/* width: 523px; */
/* height: 18px; */
/* Надо задать background */ /**/
/* background: url(path-to-image); */
}
Реализация этого блока не подразумевает вставки в него других блоков. Это атом, который нельзя разделить.
Пример: аватарка
Следующий пример это аватарка. Это картинка и ссылка на профиль пользователя. Ссылка может отсутствовать.
HTML:
<i class="b-userpic"><a href="#"><img src="..." alt=""/></a></i>
CSS отсутствует.
Пример: имя пользователя
Яндексовое имя пользователя. Полужирное и с первой подчёркнутой красной буквой. Может не быть ссылкой.
HTML:
<b class="b-user"><a href="#"><b>s</b>undukov</a></b>
CSS:
.b-user, .b-user *, .b-user a:link
{
font-weight: bold;
color: #000 !important;
}
.b-user a, .b-user a b
{
text-decoration: underline !important;
}
/* First character */ /**/
.b-user b
{
color: #f00 !important;
}
Пример: аватарка и имя пользователя
Имя пользователя и аватарка ведут на одну и туже страницу и хочется сделать их одной ссылкой. Это можно сделать, вложив аватарку в имя пользователя и спозиционировав её абсолютно.
HTML:
<b class="b-user">
<a href="#">
<i class="b-userpic"><img src="..." alt=""/></i>
<b>s</b>undukov
</a>
</b>
CSS:
.b-user .b-userpic
{
position: absolute;
margin-left: -30px;
}
В этом примере оба блока простые, мы их вложили один в другой и конфликта стилей не произошло, потому что при реализации блоков использованы разные элементы.
Вообще делать блоки простыми, т.е. опираться только на имена элементов это стрельба себе в ногу. Как правило, лучше делать с мыслью, что в любой блок может быть вложен любой другой блок. В частности, если блок относительно развесистый или многострочный, его нельзя делать простым. Никогда. Это тонкий лёд.
Составной блок
В составных блоках нужно опираться только на классы, иначе стили родительского блока будут влиять на вложенные блоки.
Некоторые части составных блоков можно делать простыми для экономии классов и надеяться, что в них никогда не понадобится вложить другой блок с пересекающимися именами элементов.
Рассмотрим на примере. Для начала не будем задавать классы никаким элементам.
<div class="b-services">
<h2>Сервисы</h2>
<ul>
<li><a href="">Крибли</a></li>
<li><a href="">Крабли</a></li>
<li><a href="">Бумс</a></li>
</ul>
</div>
Не задав класса для ul и li мы потеряли возможность вложить в элемент списка блок, который тоже реализован на списках, например, выпадающий по клику список (b-dropdown). Стили от .b-services ul и .b-services li будут накладываться на элементы у .b-dropdown li.
<div class="b-services">
<h2>Сервисы</h2>
<ul>
<li>
<ul class="b-dropdown">
<li class="visible">
<a href="" onclick="dropdown(event)">Крибли</a>
</li>
<li><a href="">Крибли-Крибли</a></li>
<li><a href="">Крибли-Крабли</a></li>
</ul>
</li>
<li><a href="">Крабли</a></li>
<li><a href="">Бумс</a></li>
</ul>
</div>
Конфликта можно избежать, если ul и li в .b-services задать классы.
<div class="b-services">
<h2>Сервисы</h2>
<ul class="services">
<li class="service">
<ul class="b-dropdown">
<li class="visible">
<a href="" onclick="dropdown(event)">Крибли</a>
</li>
<li><a href="">Крибли-Крибли</a></li>
<li><a href="">Крибли-Крабли</a></li>
</ul>
</li>
<li class="service"><a href="">Крабли</a></li>
<li class="service"><a href="">Бумс</a></li>
</ul>
</div>
При этом элементу h2 класс можно не задавать, опираться на него в CSS и надеяться, что во вложенных блоках h2 не будет (как правило не бывает, вложенные блоки имеют заголовки меньшего уровня или вообще без заголовков).