お世話になっております。
スタイルの適用の記述の仕方について認識が合っているのか確認したく質問させて頂きました。

抜粋にはなりますが以下のような認識です。

/* header 要素内の h1 全てにスタイル適用 */
header h1 {

/* .sp-menu クラスを持つ要素内の #open にスタイル適用 */
.sp-menu #open {

/* .sp-menu クラスを持つ要素内の #open にのみスタイル適用 */
.sp-menu #open.hide {

この中で header h1 は、「header 要素内の h1 全てにスタイル適用する（クラス名が設定されていれば置換可能）」という認識です。

ただ、id がそもそも 1 つしか設定出来ない（同 id は複数存在出来ない）ことを考えると以下のような指定方法でも良いように感じますし、これでも問題なく動作します。

#open {

#open.hide {

加えて、.sp-menu #open.hide { は .hide のみでも動作していました。

なぜわざわざ（今回の場合）.sp-menu や #open をつけているのか教えて頂きたいです。
（わかりにくい書き方ですみません💦）

「自分の中では、他の開発者がどこの事を指しているのか見やすくする（可読性を高くする為）にこのような書き方をしているのか？」と考えております。