Андрей

function f() { return 1 }
f.key = 'value'

Способ прост: побочным элементам делаем position: absolute, чтобы они не влияли на центрирование

Вот так: codepen.io/standys/pen/QwXKRb

1. Берете содержимое дива
2. Разбиваете на строки
3. Находите строку с картинкой
4. Ставите её куда вам нужно
5. Записываете обратно в див

вот пример: jsfiddle.net/acpcmzwo/1

Попробуйте cache-manager

В спецификации написано, что

Because of the way selectors work, multiple declarations for the same selector may be organized into semicolon (;) separated groups.

то есть «;» используется для разделения правил. Поскольку после последнего правила нечего разделять, то и разделитель не нужен.

Там же есть пример без разделителя в конце:

h1 {
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

Но хоть он и необязателен, лучше его всё-таки ставить. При добавлении новых стилей к этому селектору очень легко не заметить отсутствие разделителя, что может привести к непредсказуемым последствиям, и отнять время на отладке и стучании лбом по клавиатуре..

Если вы таким образом хотите сэкономить пару байт, то делаете это неправильно. Для этого лучше использовать минификатор. С ним будет и результат лучше, и разработке он не навредит.

Нужно добавить options.base
По умолчанию это всё, что до * в пути, вам же нужно указать его прямо:

gulp.task('zip', function() {
    gulp.src(['*.*', 'src/**/*'], {base: './'})
        .pipe(zip(packageinfo.name + '.zip'))
        .pipe(gulp.dest(baseFolder.build));
});

Почитайте эту статью, написано просто и понятно: frontender.info/writing-efficient-css-selectors
Ответ на первый вопрос в этом абзаце

Зачем совмещать селекторы? Вы сами ответили, что кода будет меньше.

PS: не используйте такие миксины,
во-первых для этого есть autoprefixer,
во-вторых border-radius уже сто лет работает без префиксов

PPS: Заниматься оптимизацией селекторов css стоит только если у вас все остальное идеально

Используйте run-sequence
https://www.npmjs.com/package/run-sequence

В примерах разбирается как раз ваша проблема:

gulp.task('build', function(callback) {
  runSequence('build-clean',
              ['build-scripts', 'build-styles'],
              'build-html',
              callback);
});

Решение с флексбокс (везде кроме ИЕ 9 и ниже)

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

jsfiddle.net/u9hpeemz/2

Вот так: jsfiddle.net/aLhetfa4/1
Для верхнего левого уголка, сумма индексов в матрице меньше половины,
для верхнего правого разница индексов меньше половины, и так далее..

Итоговый код такой: jsfiddle.net/aLhetfa4/3

upd:
Немного сместил систему отсчета, и код стал еще проще:
jsfiddle.net/aLhetfa4/4