ImagineTables

Какие принципы должны лечь в основу создания CSS-кода

Не писать CSS. Только препроцессор, только миксины.

Если правильно понял вопрос, попробуйте это (придётся подписаться на событие focusin):

// Resets CSS animation based on keyframes.
System.resetAnimation = function (elements)
{
	elements.forEach(element =>
	{
		element.style.animation = 'none';
		element.offsetHeight; // Trigger reflow.
		element.style.animation = null;
	});
}

Опять же, если я понял ваш вопрос правильно, можно обе анимации объединить на основе переменных, а в нужный момент задавать значение переменной, управляющее ходом анимации, и сбрасывать её. Примерно так:

const map = $('.map');
map
	.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
	.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
	.css('--speed', Math.abs(position.y).toString());

System.resetAnimation([map[0]]);

@keyframes move-map-bg_map
{
	from
	{
		background-position-y: var(--current-position-y);
	}

	to
	{
		background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
	}
}

Выше показано, как одна анимация плавно переходит в другую, в данном случае — на лету меняется скорость и направление анимации фона.

А оно вообще анимируемое?

Вот тут, например, пишут, что нет: https://stackoverflow.com/questions/71085424/how-t...

В стандарте (https://drafts.csswg.org/css-overflow-4/#propdef-l...) этот вопрос обходят стороной:

Animation type: see individual properties

А далее, обратно на сепульки. ))

По ссылке на SO есть рабочие примеры, как добиться того же эффекта при помощи других свойств, плюс в стандарте показано, из каких трёх свойств можно собрать данное (чтоб уж полностью воспроизвести, если надо).

Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.

Декларативно (на pure CSS) можно сделать что-то типа такого:

body:has(.first-block:hover) .second-block
{
    background: red;
}

И неважно, где эти блоки и как связаны. :hover можно заменить на другой псевдокласс, обозначающий взаимодействие с юзером, например :active или :focus-visible.

Но для кликов лучше прибегнуть к императивному скрипту (используется jQuery):

$('.first-block').on('click', () => $('.second-block').addClass('red');

И, само собой, CSS:

.red
{
    background: red;
}

для маркера checkbox навешен transition для плавного появления

Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.

Но если приспичило, можно:

Первый вариант
1. Описать галку в начале файла:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
	<defs>
		<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
			<path fill="currentColor" … />
		</symbol>
	</defs>
</svg>

2. Вставить в кнопку:

<svg width="32" height="32"><use href="#checkmark"></use></svg>

3. Анимировать прозрачность.

Второй вариант

Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:

@property --my-color-1
{
	syntax: '<color>';
	initial-value: #000;
	inherits: false;
}