Cascading as high as possible for ultimate flexibility

Back to Blog

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.

Waterfall

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.

An odd visual given the context, but bear with me.

What on Earth does this have to do with websites?

Let’s relate this back to menu toggles, a common website feature.

A menu toggle

When a menu toggle button is clicked, a previously hidden menu is revealed, and a hamburger icon turns into a close icon.

Menu toggle animation — Menu toggle from our Spatial theme

Behind the scenes, a “toggled” class is added to the parent container which houses the menu toggle button and menu list.

To visualize with code, you’d have this before clicking the menu toggle button:


<nav id="site-navigation" class="main-navigation">
	<button class="menu-toggle">Menu</button>
	<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
</nav><!-- #site-navigation -->

And this after:


<nav id="site-navigation" class="main-navigation toggled">
	<button class="menu-toggle">Menu</button>
	<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
</nav><!-- #site-navigation -->

The “toggled” class would correspond with the CSS styles to display the menu and turn the hamburger icon to a close icon, as we outlined earlier.

But what if something else on the page needed to be manipulated to accommodate the newly displayed menu?

You’d need to adjust your JavaScript click function to toggle another CSS class in the appropriate place, then write out the accompanying CSS.

In other words, 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.

So our active state would now look like this:


<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><!-- #site-navigation -->
</body>

That way, if we later decided to manipulate the something-besides-nav div on menu toggle, we wouldn’t need to mess with JavaScript.

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.

Going back to our waterfall example, since the water is already in contact with the protruding boulders (via a body class), there’s no need to make any structural changes (by editing our site’s JavaScript file).

Why not the <html> tag?

If we’re talking “as high as possible,” wouldn’t the HTML tag be the true top of the “waterfall”?

Yes, and there’s no technical reason why you can’t use HTML classes if you really need to.

But when you consider:

99.9% of the things you could possibly ever want to do on the page can be accomplished through the body tag.
WordPress already has a convenient body_class() function that you can feed custom classes into if you need to.

You might as well use body classes.

Now why would WordPress use body_class instead of html_class? From my research, it may be a throwback to how xHTML would not validate if classes or IDs were applied to directly to the html tag.

That’s not the case in HTML5, so it’s a moot point nowadays.

If you’re looking to mess around with the WordPress admin bar, which applies styles directly to the html tag, an HTML class may come in handy, but I’d consider this a 0.01% situation.

What else could this be used for?

I know, this was a very long-winded way to say would could be simply boiled down to this:

Remember that the “C” in “CSS” stands for “cascading.”

In future posts, we’ll cover other use cases that will refer back to this concept.