HTML5 and CSS3: Building Responsive Websites

Coding pragmatic solutions

When it comes to front-end web development, 'ivory towered idealism' is a particular bugbear of mine. While we should always endeavor try to do things 'the right way', pragmatism must always win out. Let me give you an example (the finished code is example_10-02). Suppose we have a button to style that opens an off-canvas menu. Our natural inclination might be to mark it up something like this:

<button class="menu-toggle js-activate-off-canvas-menu">
    <span aria-label="site navigation">&#9776;</span> menu
</button>

Nice and simple. It's a button so we have used the button element. We have used two different HTML classes on the button, one will be a hook for CSS styling (menu-toggle), and the other as a JavaScript hook ( ...