Ревизируем HTML и CSS «Хабрахабра»

Здравствуйте.

Коль скоро «Хабрахабр» тоже состоит из кода, займусь лёгкой ревизией той его части, с которой могу совладать, и которую скачиваю десятки раз в день. Проведём ревизию кода раздела «Прямой эфир».

Под катом HTML и CSS листинги.

Исходный код

Давайте покопаемся во внутренностях. Сейчас раздел «Прямой эфир» описывается следующим набором элементов (беру живой пример прямо со страницы блогов):

<div class=«live_section»>
<div class=«live_section_navtext_title»>
< a href=«naz.habrahabr.ru/»><img src=«i/small_default_userpic.gif» border=«0» alt=«посмотреть профиль» title=«посмотреть профиль»></a> 
<a href=«naz.habrahabr.ru/» class=«live_section_nickname»>naz</a> → 
<a href=«www.habrahabr.ru/blog/google/» class=«live_section_navtext_title_sec»>Google</a> /
<a href=«www.habrahabr.ru/blog/google/17315.html#comment217245» class=«live_section_navtext_title»>Google обвинил Microsoft в монополизме

 22</span>
</div> …
</div>

Что не так с кодом?

1. Код перегружен слишком длинными названиями классов.
2. Маркер возле имени пользователя вставлен с помощью элемента <img>, вместо того, чтобы быть заданным в CSS. Этот кусок кода повторяется возле каждого имени пользователя в «Прямом эфире».
3. HTML плохочитаем.
4. CSS плохочитаем и размазан по файлу стилей.

Новый код

Разберёмся с логикой информации

Что представляет собой запись в «Прямом эфире»? По сути это информация о том кто, где и что прокомментировал. Дополнительно указано общее число прокомментировавших. Зная это, выбираю новые наименования классов для элементов кода.

Итак, ссылке на пользователя присваиваю class=«who», ссылке на блог — class=«where», а ссылку на конкретную тему внутри блога поименую классом topic.

Осталось разобраться с общим количеством комментариев: class=«total» и наименование общего контейнера для всей записи — class=«entry».

Далее следует сразу же оценить поведение ссылок. Итак, при наведении на ссылки у них меняется фоновый цвет и цвет текста. Обычное дело. Однако коль скоро я собираюсь упрятать маркер юзера в фон, задав его в CSS, я должен учесть специфичное поведение маркера при наведении мыши на эту ссылку. Фоновый рисунок в данном случае нельзя вешать на элемент <a>. Нужно обязательно обернуть его в <span>, повесив фоновый рисунок именно на <span>, а изменение фона и цвета ссылки — на саму ссылку. Вот какой HTML для этого нужен:

<div class=«live_section»>
<div class=«entry»>
<span class=«who»><a href="…">username</a></span> →
<a class=«where» href="…">Google</a> /
<a class=«topic» href="…">Google обвинил Microsoft в монополизме</a> <span class=«total»>22</span>
</div>

</div>

Теперь у нас есть готовый HTML-код, более читаемый, более лёгкий. Украсим его стилями.

Новые стили

Начнём с родителя. Порывшись пару минут в стилях, я таки сумел собрать их воедино. Вот что нам нужно записать, дабы потом не повторяться, а воспользоваться наследованием свойств:

.live_section {
padding: 20px 20px 7px 20px;
font-family:tahoma,arial;
font-size:12px;
}

Теперь зададим нижний отступ для записей «Прямого эфира»:

.live_section .entry {
margin-bottom: 1ex;
}

Опишем общие свойства для всех трёх ссылок:

.live_section span.who a, .live_section .where, .live_section .topic {
margin-bottom: 1ex;
line-height: 1.35em;
}

А теперь укажем специфичные свойства:

.live_section .who {
padding-left: 16px;
background: url(i/small_default_userpic.gif) 0 50% no-repeat;
}
.live_section .who a, .live_section .where {
color:#999;
}
.live_section .topic {
color:#666;
}

Настала пора описать поведение ссылок:

.live_section span.who a:hover, .live_section a.where:hover {
text-decoration: none;
background: #ff6666;
color:white;
}
.live_section a.topic:hover {
text-decoration: none;
background: #66cc66;
color:white;
}

И напоследок украсим общее количество комментариев:

span.total {
color: #CC0000;
}

По-моему, получилось хорошо: живой пример. Код стал легче и понятней.

UPD: Альтернативная версия Владимира Агафонкина.

P.S. В примере нарочно убраны не относящиеся к делу элементы страницы. Удобства восприятия ради.