We revise HTML and CSS "Habrahabra"


    Since “Habrahabr” also consists of a code, I’ll take up a light revision of the part I can control and download it dozens of times a day. We will revise the code for the Live section.

    Under cat HTML and CSS listings.


    Let's dig into the insides. Now the section "Live" is described by the following set of elements (I take a live example directly from the blog page):

    <A the href = « naz.habrahabr.ru »> "look 
    naz.habrahabr.ru »class =« live_section_nickname »> naz → 
    www.habrahabr.ru/blog/google » class = «live_section_navtext_title_sec»> the Google /
    www.habrahabr.ru/ blog / google / 17315.html # comment217245 "class =" live_section_navtext_title "> Google accused Microsoft of monopolizing

    What is wrong with the code?

    1. The code is overloaded with class names that are too long.
    2. The marker next to the username is inserted using the element , instead of being set in CSS. This piece of code is repeated next to each username on Live.
    3. HTML is poorly read.
    4. CSS is poorly read and spread over stylesheets.

    New code

    We will deal with the logic of information

    What is a live recording? In fact, this is information about who, where and what commented. Additionally, the total number of commenters is indicated. Knowing this, I choose new class names for code elements.

    So, I assign class = "who" to the user’s link, class = "where" to the blog link, and name the topic class as a link to a specific topic inside the blog .

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

    Next, immediately evaluate the behavior of the links. So, when you hover over links, they change the background color and text color. The usual thing. However, since I'm going to hide the user's marker in the background by setting it in CSS, I have to take into account the specific behavior of the marker when hovering over this link. In this case, the wallpaper cannot be hung on the element . It is imperative to wrap it in  by hanging the background image exactly on  , and changing the background and color of the link to the link itself. Here is the HTML you need for this:

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

    New styles

    Let's start with the parent. Having rummaged a couple of minutes in styles, I still managed to put them together. Here is what we need to write so that we don’t repeat later, but use the inheritance of properties:

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

    Now we’ll set the bottom indent for the Live recordings:

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

    We describe the general 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’ll 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’s time to describe the behavior of the 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, irrelevant page elements are purposely removed. Convenience for the sake of.

    Also popular now: