Я не уверен, как работает этот код CSS Class!

Я новичок в веб-разработке, и до сих пор я добился хороших успехов.
Я столкнулся с этим в недавнем учебнике по CSS при создании своего портфолио:

.container {
width: var(--container-width-lg);
margin: 0 auto;
}

.container.contact__container {
width: 50%;
display: grid;
grid-template-columns: 50% 50%;
gap: 12rem;
}

У меня есть класс .container в основном файле index.css, который имеет width и margin в качестве свойств и все. Но в моем компоненте Contact, в contact.jsx у меня есть один элемент div с классами contact__container и container, и это только div, который имеет contact__container! :

<div className="container contact__container">
        <div className="contact__options"> 
         {stuff here}
        </div>

        <form>
          {Stuff here}
        </form>

</div>

Мой вопрос в том, почему мы должны быть спецефическими и писать и класс контейнера и класс contact__container? В видео он сказал, что ему нужно быть спецефичным, чтобы иметь возможность изменять ширину, но что это значит? Почему я не могу просто сделать:

.contact__container {
width: 50%;
display: grid;
grid-template-columns: 50% 50%;
gap: 12rem;
}

Спасибо большое