Испытание: сложные палитры [31/31] 100%

#1

Оцените код, пожалуйста

.palette-small {
    display: flex;
}
.palette-box:first-child  .palette-small {
    flex-direction: column-reverse;
    justify-content: center;
}
.palette-box:first-child .color-4 {
    order: -1;
    align-self: center;
}
.palette-box:first-child .color-3 {
    order: 1;
    align-self: center;
}
.palette-box:nth-child(2) .palette-small {
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
}

.palette-box:nth-child(2) .color-2,
.palette-box:nth-child(2) .color-6 {
    align-self: flex-end;
}
.palette-box:nth-child(3) .palette-small {
    flex-direction: row;
    justify-content: space-between;
}
.palette-box:nth-child(3) .part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.palette-box:last-of-type .palette-small {
    flex-direction: row;
    justify-content: space-between;
}
.palette-box:last-of-type .part {
    display: flex;
}
 .palette-box:last-of-type .part:last-child {
     flex-direction: column-reverse;
     justify-content: space-between;
 }
#2

Хороший код. Осталось немного сократить, сгруппировав одинаковые свойства. Подумайте над этим.

#3

я бы с удовольствием сократил, но вот только если рассуждать логически: если я объединю разные блоки и присвою им flex-direction: column-reverse, то когда я захочу потом исправить один из этих блоков, второй тоже пойдёт следом, разве не так?

#4

Я имею в виду свойство display: flex; и возможно justify-content.

1 Симпатия
#5

да, конечно, спасибо)

#6

Вопрос по данному решению. Подскажите плиз, почему flex применяется к малому паллету palette-small, а не ко всему боксу с четырмя паллетами palette-box.

Также все боксы имеют одноименный класс palette-small и большой palette-box и вот тут

когда применяются свойства, они примеряются именно к нужному первому паллету, а не ко всем, хотя у них у всех есть вложенность palette-small в palette-box…