Hi Mo thanks for your kind words! You are right that in this example a h2#element would achieve the same visual effect as a #element selector. However, in this case it made sense to be more specific as it goes in line with how I perceive the underlying structure of the HTML doc. It’s important for h1…h5 tags which are processed by screen readers, indexers, used to generate a TOC, etc.
All I’m really saying is:
This schedule header is pretty important so I made it an h2 tag.
The font size is inherited from h2 which is large enough as is,
and the default styling of h2 mostly works but is tweaked a bit
in this instance.
The opening quote is also important,
but it's not quite part of the main body of text so it can
still work as some kind of header / sub title / caption.
h5 isn't commonly used so I can override more styling here
but still distinguish the element from the unwashed plebian
#quote without a header. Ugh, how uncouth!
If I were to put them outside of the headers they wouldn’t seem as important… which is weird to me because they are styled with large text, bold, uppercased etc. (This is all just my reasoning though, not a hard and fast rule for web dev or design)
Additionally, with CSS I try to be as specific as possible so I don’t get any unintentional side effects. The scenario is bound to happen when importing libs (such as the JS test suite used by FCC) or nesting the page in other apps, frames, etc. There are some debates on whether specificity affects performance but in reality the difference is negligible - I’d prefer a page that loads slower but is correct vs. a speed loader that looks wonky.