То, что Вы используете не самые обычные селекторы, это круто. На самом деле. Это хорошо, что Вы их помните и не боитесь применять.
Но в данном конкретном случае Вы немного усложнили себе задачу: селектор .palette [class$=fuchsia] и селектор .palette .color-fuchsia дают один результат, но второй вариант более читабельный, на мой взгляд. Более того - селектор .palette в данном задании вообще можно опустить - просто .color-fuchsia тоже отлично справится.
Но что мне не очень нравится - то, что Вы хотите его минимизировать, выдергивая из CSS-правила по 1-2 свойства и применяя их сразу к нескольким, перечисленным через “,” селекторам. Это хорошо для большого количества схожих объектов, но всего для пары - не очень. В итоге Вы только запутали код и запутались сами. Возьмите один объект и пропишите для него все свойства, затем возьмите следующий и пропишите все его свойства и т.д. Перед Вами будет четкая картина. А теперь смотрите - если одно свойство повторяется в двух CSS-правилах, то, казалось бы - давайте сделаем “как лучше” и вынесем его отдельно с перечислением селекторов. Но получиться “как всегда” - остальные свойства двух элементов так и останутся двумя отдельными правилами + вы создадите еще одно целое правило для всего одного свойства. Это немного не правильно - кода станет больше, а понять где что будет труднее. А также иногда имеет смысл прописывать свойства в сокращенном виде - если они простые (margin, padding) и вы используете несколько их составляющих.
И все же если хотите объединить часть свойств - сначала распишите их для каждого элемента, а затем уже перегруппируйте как Вам удобно. Так меньше вероятность, что Вы запутаетесь.
Вот мой вариант решения на 100% (правда у меня не получились абсолютно все отступы кратны 5):
.palette {
display: flex;
}
.palette div {
min-width: 35px;
min-height: 35px;
}
.color-olive {
width: 50px;
height: 150px;
margin: auto 0 auto auto;
}
.color-yellow {
width: 35px;
height: 100px;
margin: auto 0 5px 10px;
}
.color-fuchsia {
width: 35px;
height: 100px;
margin: 5px 0 auto 32px;
}
.color-aqua {
width: 50px;
height: 150px;
margin: auto auto auto 10px;
}
А теперь попробуем его перегруппировать:
.palette {
display: flex;
}
.palette div {
min-width: 35px;
min-height: 35px;
}
.color-olive,
.color-aqua {
width: 50px;
height: 150px;
}
.color-yellow,
.color-fuchsia {
width: 35px;
height: 100px;
}
.color-olive {
margin: auto 0 auto auto;
}
.color-yellow {
margin: auto 0 5px 10px;
}
.color-fuchsia {
margin: 5px 0 auto 32px;
}
.color-aqua {
margin: auto auto auto 10px;
}
Первый вариант занял 32 строки, а второй - 36, хотя, казалось бы, его мы пытались упростить.
Впрочем не все меряется строчками. Выберите подход, который Вам нравится. Главное - чтобы он помог избежать ошибок и сделал код удобным.