We audit HTML and CSS "Habrahabra"

Hello.

Since “Habrahabr” also consists of a code, I’ll do a light revision of the part I can cope with, and which I download dozens of times a day. We will revise the code of the “Live” section.

Under the cut HTML and CSS listings.
')

Source

Let's dig in the guts. Now the “Live” section is described by the following set of elements (I take a live example directly from the blogs page):

<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 = "view profile" title = "view profile"> </a>
<a href=103naz.habrahabr.ru »class=ivelive_section_nickname"> naz </a> →
<a href= brow www.habrahabr.ru/blog/google "class=lauivelsese_navtext_title_sec"> Google </a> /
<a href= brow www.habrahabr.ru/blog/google/17315.html#comment217245 "class= commonlive_section_navtext_title> > Google accused Microsoft of monopolism

22 </ span>
</ div> ...
</ div>

What is wrong with the code?

1. Code overloaded with too long class names.
2. The marker next to the username is inserted using the <img> element, instead of being defined in CSS. This piece of code is repeated next to each username in the "Live".
3. HTML is poorly readable.
4. CSS is poorly readable and spread over the style file.

New code

We will understand the logic of information

What is the record in "Live"? In essence, this is information about who commented on what, where and what. Additionally, the total number of comments is indicated. Knowing this, I choose new class names for code elements.

So, I assign the link to the user to class = “who” , the link to the blog is class = “where” , and the link to a specific topic within the blog named topic .

It remains to deal with the total number of comments: class = "total" and the name of the common container for the entire record - class = "entry" .

Then you should immediately evaluate the behavior of links. So, when you hover over links, their background color and text color change. The usual thing. However, as soon as I am going to hide the user's marker in the background, setting it in CSS, I have to take into account the specific behavior of the marker when hovering the mouse over this link. The background image in this case can not be hung on the element <a>. It is necessary to wrap it in <span>, hanging the background image on <span>, and changing the background and the color of the link - on the link itself. Here is what HTML is needed for this:

<div class = "live_section">
<div class = "entry">
<span class = "who"> <a href="…"> username </a> </ span> →
<a class=hywhere href="…"> Google </a> /
<a class= humantopic href="…"> Google accused Microsoft of monopolism </a> <span class = "total"> 22 </ span>
</ div>

</ div>

Now we have ready HTML-code, more readable, easier. Decorate it with styles.

New styles

Let's start with the parent. Having rummaged in a couple of minutes in styles, I managed to put them together. Here is what we need to write, so as not to repeat, and use the inheritance of properties:

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

Now we will set the bottom indent for the live recordings:

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

We describe common properties for all three links:

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

And now we will specify specific properties:

.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;
}

It is time to describe the behavior of links:

.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;
}

And finally, we will decorate the total number of comments:

span.total {
color: # CC0000;
}

In my opinion, it turned out well: a living example . The code has become easier and more understandable.

UPD : An alternative version of Vladimir Agafonkin .

PS In the example, the irrelevant elements of the page are purposely removed. Convenience perception sake.