Это всё написано в любом туториале по CSS на первой странице.
.uiIcon .itemIcon, .itemIcon { background: black; }
запятая - это перечисление. не имеет смысла, т.к.
.uiIcon .itemIcon
это подмножество .itemIcon
.
Применится ко всем элементам с классом itemIcon
.uiIcon .itemIcon, .itemIcon { background: black; }
<div class="itemIcon">1</div>
<br/>
<div class="uiIcon itemIcon">1</div>
.uiIcon .itemIcon .itemIcon { background: black; }
.itemIcon вложенный в .itemIcon который вложен в .uiIcon
.uiIcon .itemIcon .itemIcon { background: black; }
<div class="uiIcon">
<div class="itemIcon">Этот белый
<div class="itemIcon">Этот Чёрный</div>
</div>
</div>
.uiIcon.itemIcon.itemIcon { background: black; }
Элемент с двумя классами сразу - uiIcon и itemIcon
.uiIcon.itemIcon.itemIcon { background: black; }
<div class="uiIcon itemIcon">
Этот Чёрный
</div>
<div class="uiIcon">Этот белый
<div class="itemIcon">Этот белый</div>
</div>