".menu.opened" и ".opened", когда я должен использовать какой?

Question

Я изучаю код в посте ({ ссылка })

    <style>
        .menu {
            display: none;   
        }

        .menu.opened {
            display: block;
        }
    </style>

согласно комментарию к этому посту, часть .menu в .menu.opened не нужна технически, поэтому я попытался

    <style>
        .menu {
            display: none;   
        }

        .opened {
            display: block;
        }
    </style>

работает хорошо, как и раньше.

Итак, в чем разница между .menu.opened и .opened, когда мне следует использовать какой?

Answer 1

.menu.opened когда ваши элементы имеют оба класса .menu и .opened => используйте это, если хотите css указать элементы, которые имеют оба класса.

.menu .opened когда ваши элементы имеют класс .menu или .opened => используйте это, если хотите css все элементы, которые имеют хотя бы один из этих классов.

Первый

Пример: <x class="menu opened"></x> => блок дисплея

<x class="menu"></x> => нет дисплея

<x class="opened"></x> => нет CSS

Второй

Пример: <x class="menu opened"></x> => блок дисплея или ни один не зависит от приоритета (до, после класса или! Важно)

<x class="menu"></x> => не отображать

<x class="opened"></x> => отображать блок