In my opinion it is better since having the two classes allow you, amongst other things, to use advanced selectors.<p>Here is an horrible example from the top of my mind:<p>&lt;nav class=&quot;menu&quot;&gt;...&lt;&#x2F;nav&gt;<p>&lt;div class=&quot;alert alert-&lt;?php echo $alert-type; ?&gt;&quot;&gt;...&lt;&#x2F;div&gt;<p>.alert { border: 1px solid #ccc; } &#x2F;&#x2F; Basic alert style<p>.alert-success { border-color: green; } &#x2F;&#x2F; Success alert are green<p>.alert-warning { border-color: yellow; } &#x2F;&#x2F; Warning alert are yellow<p>.alert-danger { border: 3px dashed red; } &#x2F;&#x2F; Danger alert are red !!and have a bigger border!!<p>.menu { margin-bottom: 14px; } &#x2F;&#x2F; The menu has a margin of 14px under it so nothing can get close<p>.menu + .alert { margin-top: -14px; } &#x2F;&#x2F; Alert following the menu need to ignore the menu&#x27;s margin<p>.menu + .alert-danger { margin-top: -16px; } &#x2F;&#x2F; However, the borders of alert-danger are bigger than the regular alerts