Каква е ролята на този код?

По подразбиране голяма част от елементите в HTML имат предварително зададен padding, margin или outline. Селекторът * избира всички елементи, а стиловете в къдравите скоби променят стойностите по подразбиране на съответните пропъртите на 0. Така, когато подреждате елементи, се подсигурявате, че няма да се чудите, защо даден елемент е с 5px отстояние, а вие никъде не сте задали такова във вашия CSS.

Пример за такова отстояние е p-тагът, който има margin-bottom зададен по подразбиране.

Това, разбира се, не е задължително, но е една добра практика вашият CSS да започва с този глобален селектор.

Тоест, така нулираме някакви дефолтски дадености и започваме да остиляваме начисто. Така го разбирам аз!