Как правильнее писать css код?
1. Миксины полезнее для свойств с префиксами и параметрами. В вашем примере в миксине нет параметров, просто набор свойств.  Для списка свойств можно просто создать класс, а потом его вписать так:  @extend .classname; в нужном месте. Или прописать этот класс элементу в разметке.
2.не стоит создавать излишней конкретики вложенности , если этого не требуется. в будущем, если понадобится, можно обертку добавить. Это к тому же лишит возможности использовать классы повторно в других элементах. 
3.Лучше присвойте классы каждому элементу, хотя кажется, что header nav ul li  писать быстрее, классы придуманы для стилизации, а теги для структуры документа. Вы сможете потом использовать их повторно, поставив другому элементу.
В вашем случае это должен быть extend
Миксин примерно для таких задач%button {
  display: inline-block;
  width: 100px;
  height: 50px;
}
@mixin button-color($color, $text) {
  background: $color:
  color: $text;
  border: 1px solid $text;
}
.attention-button {
  @extend %button;
  @include button-color(red, white);
}

danger-button {
  @extend %button;
  @include button-color(lime, white);
}