I'm not sure if it was added after your comment, but there's a restart button at the bottom center of the screen that you can hit while the ball is falling.
ruby {
text-decoration: underline dotted;
}
ruby rt {
visibility: hidden;
}
ruby:hover rt, ruby:focus rt {
visibility: visible;
} .mainContentWidget {
background-color: white;
font-size: 1.5em;
text-transform: uppercase;
}
.sideBarWidget {
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
<div class="mainContentWidget"></div>
<div class="sideBarWidget"></div>
The article instead would suggest you do: .widget {
background-color: white;
font-size: 1.5em;
text-transform: uppercase;
}
.widget-sidebar {
background-color: red;
}
<div class="widget"></div>
<div class="widget widget-sidebar"></div>
To address the bit about common values vs. special modifications. The implication is, although you might have to change some names, it's not context dependent. So if you decide that you want to put apply that same style to a widget in your footer ...and the header ...and this special case on a certain page landing page ...etc, then you just add the extra class to your HTML rather than adding a bunch of context dependent rules in the CSS.