Иерархия универсального селектора и селектора html в CSS

При написании CSS-стилей порядок следования селекторов не имеет особого значения, но есть некоторые рекомендации. Обычно сначала пишут универсальный селектор (*), затем селекторы по тегу (например, html), затем селекторы по классу и id, а в конце - псевдоклассы и псевдоэлементы
В приведенном примере кода порядок написания селекторов корректен, так как сначала задаются общие стили для всех элементов с помощью универсального селектора, а затем - стили для элемента html

В CSS, порядок селекторов важен только в том случае, если у них одинаковый вес. Ваш пример не является проблемой, поскольку универсальный селектор * имеет наименьший вес, а селектор элемента html имеет больший вес. Это означает, что стили, определенные для html, переопределят любые конфликтующие стили, определенные для *.

Тем не менее, обычно рекомендуется использовать универсальный селектор * для обнуления отступов и границ (как вы уже сделали), а затем использовать другие селекторы (включая html, body и т.д.) для определения основных стилей вашего сайта. Так что ваш подход абсолютно правильный!

В данном случае без разницы, т.к. свойства не повторяются в этих селекторах, => переопределения не будет. Но вообще, логичнее сначала задавать селектор * а потом вниз по иерархии. Универсального правила нет, нужно смотреть на конкретных примерах, и то, зависит от того что тебе надо