你好，關於第一點我想應該只是該pen作者的個人習慣而已，你當然可以將此兩style合併，效果也會一樣喔。

.gallery .gallery-item {
    flex: 1 auto;
    height: inherit;
    max-width: 100%;
    background: gray;
    border: 2px solid white;
    background-size: cover;
    background-position: center top;
}

第二點的部分則是牽涉到CSS中最基本的選擇器(Selector)部分，若你還不熟、或是想要挑戰一下自己的能力，這裡有個教學網站很不錯：
CSS Diner: https://flukeout.github.io/

下方的樣式中，.gallery .gallery-item是想表達「gallery-item是屬於gallery的子代」，也就是你所說的「在裡面」，這在了解結構上是有助益的。舉例，「我是個學生，我是個好人」，而「我是個XX學校的學生，我穿著校服」，那「我是個穿著XX學校校服的好人」依舊是成立的。

.gallery .gallery-item {
    flex: 1 auto;
}
.gallery-item {
    position: relative;
    cursor: pointer;
    transition: all .1s linear;
}

在寫CSS時，除了選擇器除了要選對之外，還必須注意到CSS style本身的「權重」，正確的順序如下（參考https://specificity.keegan.st/）

1. 屬性含有!important後綴
2. inline style (行內樣式)
3. id selector
4. class, attribute, pseudo-classes selector
5. elements, pseudo-elements selector

每一個都是獨立的階級，不同階級就算數量上較多也贏不過上一層階級的；而當同階級同分時就會比對下一級的分數，以此類推。若依舊同分，則相同的屬性會以CSS stylesheet中為主。
若將第一點中的style改成以下；

.gallery .gallery-item {
    height: inherit;
    max-width: 100%;
    background: gray;
    border: 2px solid white;
    background-size: cover;
    background-position: center top;
}

.gallery .gallery-item {
    background: blue;
}

由於選擇器一樣，style權重分數一致，愈後方的style中的相同屬性（background）會蓋過前方的，最後background就會是blue的了。

順帶一提，
由於你是初學者，並不需要跟人合作專案，在進行添加CSS屬性時，此階段因為沒有協作規範，可能屬性添加的順序會不一致，建議自己在實作時，先訂定屬於自己的簡易規範，比如說按字母序或是按影響視覺效果（位置、大小、背景顏色、文字顏色等等），會使得自己在除錯時加快許多：

/* Order by alphabets */
.box {
    align-items: center;
    background-color: #000;
    color: #f00;
    /* ...etc */
}
/* Order by visual influence */
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30vh;
    background: rgba(0,0,0,.5);
    /* ...etc */
}

依據你的參考
那個分開一點意義也沒有
另外也沒有包含 .gallery 的樣式

第二段程式碼與第一段目前是等效的
但 .gallery .gallery-item 樣式只會套用在 .gallery 之下
.foo .gallery-item 不受引響

而且 .gallery .gallery-item 的權重也比 .gallery-item 高
.gallery-item 中定義的樣式是無法覆蓋 .gallery .gallery-item 的
詳細請參考