Ну так code it)

если не задуматься о таких сложных элементах дизайна сразу
то да, верстка и стили превращаются как каша

закодили.
и первое правило: никаких отступов и цветов в верстке

Булщит

заворачивай флейм

Есть такая штука, которую придумали ещё в вебдванольную эпоху - контекстонезависимая вёрстка. Это когда компоненты (handlebars, jade темплейты, php блоки) можно вкладывать друг друга, и они лягут нормально, не зная ничего о родителях и окружении в целом. И эта вещь актуальна до сих пор, потому что иначе теряется вся логика компонентой вёрстки. Задавать отступы вручную = создавать для компонентов контекст, с которым им удобно работать, то есть привязать одни компоненты к другим компонентам или правилам, а это уже простейший способ нарушить контекстонезависимую вёрстку. Не надо спейсеры крч

причем тут спейсеры?)

отступы зависят от элементов вокруг

если мы располагаем два верхнеуровневых блока рядом
то отступы будут большими
если рядом два вложенных в верхнеуровневый блок, то отступы будут меньше

притом, со стороны html это может быть один и тот же элемент (например карточка)

Они вручную задают отступы. Вручную. А по идее этим должны заниматься блоки-родители через каскады правил

мы сейчас работает над системой, котороая сама расставляет отступы, на основе вложенности элементов
таким образом верстка получается максимально семантичная

фу зачем?
делай лейауты
это пропы  их можно контролировать

это не работает

и

почему

пример выше

Вот столько звёздочек надо собрать, чтобы спорить с правилом теории близости

список из крупных блоков на верхнем уровне будет иметь отступы в 18px

а если я ТОТ ЖЕ список без изменений положу внутрь какой-нибудь модалки или другого блока, отступы должны быть существенно меньше, например в 14px