Cascading as high as possible for ultimate flexibility
Think of a flexible website like one big waterfall. The water flows from the top, comes into contact with every rock and boulder on the way down, until it splashes through the plunge basin.
Now think of an inflexible website like water tank with holes poked in it. The water leaks out of those predefined holes, and the only way to stop it is to plug up each hole, one-by-one.
A menu toggle
When a menu toggle button is clicked, a previously hidden menu is revealed. Behind the scenes, a “toggled” class is added to the parent container:
<nav id="site-navigation" class="main-navigation toggled">
<button class="menu-toggle">Menu</button>
<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
</nav>But what if something else on the page needed to be manipulated to accommodate the newly displayed menu? You’d need to plug a hole in the water tank.
A more flexible way
Alternatively, the menu toggle button could’ve just simply added a “menu-toggled” body class from the start:
<body class="menu-toggled">
<div class="something-besides-nav">This will change on menu toggle</div>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle">Menu</button>
<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
</nav>
</body>All we’d need to do is style .menu-toggled .something-besides-nav, eliminating a step from the “plugging holes in the water tank” method.
Why not the html tag?
WordPress already has a convenient body_class() function that you can feed custom classes into. You might as well use body classes.
What else could this be used for?
This was a very long-winded way to say: “Remember that the ‘C’ in ‘CSS’ stands for ‘cascading.’”