If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS
to apply the same rules to another element. For example, you might have something like the below selector, which applies the rule to a <p>
with a class of box inside an <article>
with a class of main.
Bad
If you then wanted to apply the same rules to something outside of main
, or to something other than a <p>
, you would have to add another selector to these rules or create a whole new ruleset. Instead, you could use the selector .box
to apply your rule to any element that has the class box
.
Good
There will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.