Question

When should you add classes to elements and style them using class selectors and when should you instead add a class/id on the parent and use the elements just as is?

Example:

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

.warning-dialog {}
.warning-dialog h3 {}
.warning-dialog p {}

vs.

<div class="warning-dialog">
    <h3 class="warning-title">This is the title</h3>
    <p class="warning-message">This is the message</p>
</div>

.warning-dialog {}
.warning-title {}
.warning-message {}

Or should you do

.warning-dialog .warning-dialog {}
.warning-dialog .warning-title {}
.warning-dialog .warning-message {}

Answer 1

Ask yourself this simple question:

Do all <x> elements under this common ancestor mean the same thing?

If the answer to that is yes, then you don’t need a class name on those elements. Taking your code as an example, the following is sufficient:

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

Because inside of a .warning-dialog, all h3 elements (1) and all p elements (1) would mean the same, the title and the content of the dialog! Meaning, you don’t need to have any specific class names on them and they are easily accessible via .warning-dialog h3 or .warning-dialog p.

If however, the answer to above question is “No”, that’s a whole different story:

<div>Warning</div>
<div>Info</div>
<div>Error</div>

You can’t (easily) designate each div with a CSS, they don’t all mean the same thing, so you need to use class names to make it better!

<div class="warning-dialog">Warning</div>
<div class="info-dialog">Info</div>
<div class="error-dialog">Error</div>