Member list reveals member information on click (#2) Not a follow-up, but related to Member list reveals member information on click (#1). I now want my CSS reviewed.

What I'm doing?

The content in a list of members is revealed by jQuery (see review #1). Instead of having the content pop out, I'm using a transition to make this smooth. Because one can't transition to height: auto;, it's triggered by using max-height: 2000px;.

I have feeling this can be improved.

HTML:

&lt;ul class="block-list member-list"&gt;
    &lt;li id="member-name-1"&gt;
        &lt;a href="#member-name-1" class="block-list__link"&gt;
            &lt;div class="block-list__thumbnail"&gt;
                &lt;img src="member-name-1-thumbnail.jpg" alt="Thumbnail"&gt;
            &lt;/div&gt;
            &lt;span class="block-list__title"&gt;Member Name 1&lt;/span&gt;
        &lt;/a&gt;
        &lt;div class="block-list__content"&gt;
            &lt;p&gt;Content area. No layout things inside. Paragraphs, lists, images.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li id="member-name-2"&gt;
        &lt;a href="#member-name-2" class="block-list__link"&gt;
            &lt;div class="block-list__thumbnail"&gt;
                &lt;img src="member-name-2-thumbnail.jpg" alt="Thumbnail"&gt;
            &lt;/div&gt;
            &lt;span class="block-list__title"&gt;Member Name 2&lt;/span&gt;
        &lt;/a&gt;
        &lt;div class="block-list__content"&gt;
            &lt;p&gt;Content area. No layout things inside. Paragraphs, lists, images.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li id="member-name-3"&gt;
        &lt;a href="#member-name-3" class="block-list__link"&gt;
            &lt;div class="block-list__thumbnail"&gt;
                &lt;img src="member-name-3-thumbnail.jpg" alt="Thumbnail"&gt;
            &lt;/div&gt;
            &lt;span class="block-list__title"&gt;Member Name 3&lt;/span&gt;
        &lt;/a&gt;
        &lt;div class="block-list__content"&gt;
            &lt;p&gt;Content area. No layout things inside. Paragraphs, lists, images.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;


CSS:

.block-list__link {
    text-decoration: none;

    .block-list__title:after {
        /* Adding a space followed by `&amp;raquo;` after titles inside links */
        content: "\0020" "\00BB";
    }
}

.block-list__thumbnail {
    width: 100px;
    height: 100px;
    background-color: #f60;
    float: left;
}

.block-list__title {
    line-height: 100px;
    margin-bottom: 0;
    margin-left: 30px;
}

.block-list__content {
    overflow: hidden;

    /* Omitting vendor-prefixes for demonstration */
    transition: max-height 0.8s linear;

    height: 0;
    max-height: 0;

    &amp;.visible {
        margin-top: 30px;
        height: 100%;
        max-height: 2000px;
    }
}
this popped out at me, I haven't looked at the entire code completely yet, so take this with a grain of salt please

not sure why you do this

&lt;a href="#member-name-2" class="block-list__link"&gt;
   &lt;div class="block-list__thumbnail"&gt;
       &lt;img src="member-name-2-thumbnail.jpg" alt="Thumbnail"&gt;
   &lt;/div&gt;
   &lt;span class="block-list__title"&gt;Member Name 2&lt;/span&gt;
&lt;/a&gt;


I would probably write it like this instead

&lt;a href="member-name-2" class="block-list__link"&gt;
    &lt;img src="member-name-2-thumbnail.jpg" alt="Thumbnail" class="block-list__thumbnail" /&gt;
    &lt;span class="block-list__title"&gt;Member Name 2&lt;/span&gt;
&lt;/a&gt;


I am pretty sure that you don't need that extra div
I think the image tag is going to act similar to the div tag, and I assume that you want to style the image and not the div anyway,  it looks more like a container for the image which I think is redundant. ( I have been wrong before and am not afraid to admit it when someone gives me some solid evidence )

that is the only thing that I can see right now, but I haven't spent much time looking at it either.