Least amount of HTML and CSS to create a bottom border for every section?

Question

I am doing a redesign and have some previously existing content in HTML that is similar to

<p class="testimonial-text">Bacon ipsum dolor sit amet aliquip est tail occaecat bacon ad qui short loin exercitation.Strip steak sint dolore et ut, elit kielbasa quis.</p>
&ndash;<span class="person-name">Name Surname</span>
<hr />

And those classes were manually added to every testimonial. So I have so far wrapped everything in a <div id="testimonials"> and then every testimonial is wrapped in a div because I wanted to leverage inheritance so that a new testimonial later did not need the classes nor the <hr /> but of course to prevent a future <div> within the <div> that might be necessary in the future by another dev, I decided to use > p . How do these classes look for keeping code as lean as possible?

HTML

<div id=testimonials>
    <div>
        <p>Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        &ndash <span>Piggy McPiggy</span>
    </div>

    <div>
        <p>Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        &ndash <span>Oinky Sausagebreath</span>
    </div>

    <div>
        <p>Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        &ndash <span>Pigster Pickled</span>
    </div>
</div> <!-- END OF TESTIMONIALS-->

CSS

div#testimonials > div {
    border-bottom: solid 1px #666;
}

div#testimonials p { 
    font-size: 16px; 
}

div#testimonials span { 
    font-weight: bold;
    color: red;  
}

My concern is that if we perhaps need to add a span in the paragraph, that I might need to do something else to make sure that the persons name is still styled as intended. Something about this just does not seem Kosher.

Answer 1

Something did feel wrong about your code

IDs are unique

A bit of redundancy is this: div#testimonials

IDs are unique in the page and should only be one element. You can just to #testimonials and still get that div.

Span? Which one?

Another is the span's usage. Suppose you wanted to style a phrase in the testimonial, you'd use span to style it. But your author style definition calls for all spans: #testimonials span. This would affect all spans, not just the author's.

I suggest you do place a class, like "author", to indicate that which span you are trying to style as the author:

#testimonials span.author { 
  font-weight: bold;
  color: red;  
}

Set the font in the parent

It would be better if you set the default font size on the parent, rather than on each element, unless that element should differ from the others. Also, as far as I know, the browser's default font size is around 16px. You could omit the size declaration.

Aesthetics: Removing the last border

This is just for aesthetics, but I suggest you remove the last entry's border. But since only IE9 supports :last-child, we change the approach. Instead, add a top border and let :first-child, supported in IE7+, remove the very first child's border.

#testimonials > div {
  border-top: solid 1px #666;
}

#testimonials > div:first-child {
  border-top: none;
}

Semantics: It's a list!

If you take a look at your content, it's a list. And if semantics is to be followed, you should use a list.

Worried about size?

You shouldn't. Though semantics might need you to use more code, it's not deployed in this state. Use an automation system like Grunt and minify everything. And make sure to gzip your transfers from the server.

Now this makes more sense.. at least for me:

HTML

<ul id=testimonials>
    <li>
        <p>Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        <span class="author">Piggy McPiggy</span>
    </li>

    <li>
        <p>Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        <span class="author">Oinky Sausagebreath</span>
    </li>

    <li>
        <p>Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        <span class="author">Pigster Pickled</span>
    </li>
</ul>

CSS

/* removing the default styles of the list */
#testimonials{
    list-style:none;
    margin: 0;
    padding: 0;
}

/*unless your testimonials contain lists, this should be fine */
#testimonials li {
    border-top: solid 1px #666;
}

#testimonials li:first-child {
    border-top: none;
}

#testimonials span.author { 
    font-weight: bold;
    color: red;  
}

Answer 2

And now for the BEM way of doing this (http://bem.info/)

HTML

<ul class="testimonials">
    <li class="testimonials__item">
        <p class="testimonials__body">Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        <span class="testimonials__author">Piggy McPiggy</span>
    </li>

    <li class="testimonials__item">
        <p class="testimonials__body">Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        <span class="testimonials__author">Oinky Sausagebreath</span>
    </li>

    <li class="testimonials__item">
        <p class="testimonials__body">Frankfurter meatloaf quis chuck, sunt jerky voluptate veniam ex aute commodo duis laboris labore. Sint dolor enim boudin pancetta culpa ham hock, laboris brisket veniam doner short loin velit qui duis.</p>
        <span class="testimonials__author">Pigster Pickled</span>
    </li>
</ul>

CSS

.testimonials {
    list-style:none;
    margin:0;
    padding:0;
}

.testimonials__item {
    border-top:solid 1px #666;
}

.testimonials__item:first-child {
    border-top:none;
}

.testimonials__author {
    font-weight:bold;
    color:red;
}

Thats how the cool kids are doing it. You wonder why? Read about OOCSS, SMACCS and BEM.