HTML and CSS Reference
In-Depth Information
Reducing e Depth Of Applicability
Probably the most common problem with CSS is managing specificity.
Multiple CSS rules compete in styling a particular element on the page. With
our menu, our initial rules were styling the list items and the links in the
navigation and the menu. Not good.
By adding more element selectors, we were able to increase specificity and
have our menu styles win out over the navigation styles.
However, this can become a game of cat and mouse as a project increases
in complexity. Instead, we should be limiting the impact of CSS. Navigation
styles should apply to and a
"
ect only the elements that pertain to it, and
menu styles should apply to and a
"
ect only the elements that pertain to it.
I refer to this impact in SMACSS as the “depth of applicability.” It's the depth
at which a particular rule set impacts the elements around it. For example, a
style like
#nav li a
, when given an HTML structure that includes our
menus, has a depth of 5: from the
ul
to the
li
to the
ul
to the
li
to the
a
.
The deeper the level of applicability, the more impact the styles can have on
the HTML and the more tightly coupled the HTML is to the CSS.
The goal of more manageable CSS — especially in larger projects — is to
limit the depth of applicability. In other words, write CSS to a
"
ect only the
elements that we want them to a
"
ect.
