Question

I have seen some developers write

HTML:

<div class="test"> some content </div>

CSS:

div.test {
  width:100px.
}

What is the purpose of doing div.className instead of just .className.

Does this mean this style will be applied only when the class is applied to a div.

So, <span class='test'>content</span> will have no effect of ‘test’ with the css above? If that is the case, is that best practice? This is almost like style overriding for different type of elements, mixing styles with rules!

Answer 1

To really answer your question, though, I first have to answer a couple of other questions. Because, as you will see, it’s all about context.

• What is the point of HTML?
• What is a div?
• How is it different from other HTML elements?
• And what does it mean when a element has a class (or collection of classes)?

I’ll give you my opinion on the answers to those question, and then we can have a meaningful discussion on best-practices.

What is the point of HTML?

The point of HTML is to add context to your data. Text, all by itself, can be a very powerful thing. Since the invention of the printing press, it has served humanity very well as an extremely powerful communication tool. Take the following document for example:

My shopping list
Bread
Milk
Eggs
Bacon

Even with this simple text document, most people can dechiper the intent of the writer; its a shopping list. There is a heading, and a collection of list items that need to be purchased.

So whats the point of HTML then, if simple text documents are enough?

Fair question. If text is enough to communicate, then why do we need HTML?

The reader of the document attempts to parse the information they get. That process is embedded with a ton of cultural tricks and learned patterns that are used to reconstruct the original intent. It is trivial for most people with a basic understanding of english to determine the meaning of the document. However, as the complexity of the document increases (or the familiarity of the reader with the context decreases), then it becomes more and more difficult to parse correctly. Assumptions are made; context becomes unclear. Eventually, the reader’s ability to accurately decode the message falls apart, and the message is indechiperable.

This is the space where HTML exists. It is desinged to wrap around data, providing context and meaning. So even if you (or the computer) are unable to process the actual information, you can understand the context in which it should be. For example, the same document with HTML:

<h1>My shopping list</h1>
<ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bacon</li>
</ul>

Now, even if we weren’t able to understand the actual data, we have a contextual backdrop to interpret the data. We have a heading and an unordered list with a collection of list items.

<h1>Xasdk bop boop</h1>
<ul>
    <li>Zorch</li>
    <li>Quach</li>
    <li>Iach</li>
    <li>Xeru</li>
</ul>

I have no idea what that means, but at least I know there is a heading and an unordered list. That is the way the browser sees your HTML document: some data, wrapped in context.

What is a div? How is it different from other HTML elements?

HTML elements define context; they describe the content they wrap around. HTML shouldn’t alter or change the meaning of the data, it simply augments it and defines relationships between the data: parent, child, sibling, ancestor… So a li element describes a list item. An h1 element describes a heading. A table element describes a table, and so on.

So, what is a div then? Well, a div is a block-level HTML element that has no context of its own. By itself, it doesn’t mean anything (other than the fact that it is a block).

While most other HTML elements (with the exception of the span element) have some kind of explicit context, the div element does not. That is a huge difference. It’s a blank box. It’s a box that doesn’t mean anything. When you put something in a ‘div’, you are saying that its in a box, but that box doesn’t really mean much.

So what is the point of a div then?

The div tag provides a blank slate for you to define your own context. Back to our shopping list example: right now, there is a weak relationship between the unordered list and the heading. They are weakly associated siblings, they just happen to be next to each other, but nothing really binds them together as a unit. What we would really like to say is:

<grocery_list>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</grocery_list>

But we can’t do that within the confines of the HTML spec. But what we can do is stick them in a ‘box’:

<div>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

What does it mean when an element has a class (or collection of classes)?

But, again, that box doesn’t mean that much right now. What we really would like to do is give that box some context of our own. We want to invent our own element. Thats where the class attribute comes into play. While HTML elements augment data, HTML attributes augment elements. We can say:

<div class="shopping_list">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

So we are saying that our div is really a shopping_list. That shopping_list has a heading, and an unordered list of items. HTML is supposed to make your data more clear, not less clear.

So, finally, how does this all relate to your question?

When you are writing CSS, you are leveraging your context (elements, classes, ids, and the relationship between elements) to define style.

So back to the shopping list example. I could write a style that said:

<style>
    ul {
        background-color: red;
    }
</style>

But what am I really saying? I’m saying: "All unordered lists should have a background color of red". And the question is: Is that really what I mean? When writing CSS you should keep your structure in mind. Is it right to say all div elements should look a particular way, or give only divs a specific class? For example, I would aruge that this might be better:

div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li { 
    margin-bottom: 1ex;
}

Here, I am saying that these elements, in this particular context should look this particular way.

So in your example, what does a div with a class of test really mean? What is the content? What context are you trying to clarify? That will tell you what your style selectors should look like.

For example:

<div class="shopping_list important">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

<table class="budget">
    <tbody>
        <tr class="important">
            <td>Account Balance</td><td>$0.00</td>
        </tr>
            </tbody>
</table>

Is a CSS selector of .important a good idea? Is an "important shopping list" the same thing as an "important table row in a budget table?"

And only you can answer that, depending on what your data is and how you have decided to mark up that data.

There are a bunch of technical topics to get into about CSS specificty, like good practices for maintaining complex style sheets and complex associations between elements, but ultimately it all boils down to answering these questions:

1. What am I trying to communicate? (Data/Content)
2. What context is the data in? (HTML)
3. What should that look like? (CSS)

Once you can answer those questions, everything else will start to fall into place.