Вам не кажется, что CSS превращается в язык программирования?

Смысловое назначение элемента другое. Это костыли. Должна быть кнопка или стилизованная под нее ссылка.

Конечно кнопка. Оборачивается в label c for="id скрыторго input#l-aside" При клике на кнопку input переключает checked. Через стилизацию в CSS скрывает\показывает нужный блок.

У меня например main расширяется, а в мобильной версии всплывает aside

Например:

@keyframes Expand {
        /* 0% {grid-template-columns: var(--aside) auto;} */
        100% {grid-template-columns: 0 auto;}
}
@keyframes Reduce {
        /* 0% {grid-template-columns: 0 auto;} */
        100% {grid-template-columns: var(--aside) auto;}
}
#l-aside:checked ~ main {
        animation: Expand 1s forwards;
}
#l-aside:not(:checked) ~ main {
        animation: Reduce 1s forwards;
}

@media screen and (orientation:portrait) {
        #l-aside:checked ~ main {
                animation: none;
        }
        #l-aside:not(:checked) ~ main {
                animation: none;
        }
        body > main {
                grid-template-columns: auto;
                grid-template-rows: var(--header) auto var(--footer);
                grid-template-areas: "header" "section" "footer";
        }
        body > main > aside {
                top: 50%;
    left: 50%;
                opacity: 0;
                z-index: 3;
                height: 80%;
                position: fixed;
                transform: translate(-50%,-50%);
        }
        body > main > section {
                opacity: 1;
                transition: all 1s linear;
        }
        #l-aside:not(:checked) ~ main > aside {
                opacity: 1;
                transition: all .25s linear;
        }
        #l-aside:checked:focus ~ main > aside {
                opacity: 0;
    transition: all .25s linear;
        }
}

Эмм, так это я знаю. В примере, который я цитировал не про это же...

С РНР тут ничто не сравнится. Такое ощущение, что его писали совершенно незнакомые друг с другом люди.

Я все-таки за то, чтобы стили оставались чисто оформлением, а поведение было очевидно:

  < button  onclick="menuOpen()">меню</button>
</header>

<div id="overlay" onclick="menuClose()"></div>
<nav id="bar">
...

var s = document.getElementById("bar");
var o = document.getElementById("overlay");

function menuOpen() {
  s.style.display = "block";
  o.style.display = "block";
}

function menuClose() {
  s.style.display = "none";
  o.style.display = "none";
}

@media (min-width: 1200px) {
  nav {
    display: block;
    ...
  }
  header button {
    display: none;
  }

Даже при клике вне области открытого меню скрывается? А, SSE события может выполнить? А, поддержка таких фишек во всех браузерах? Сможем добавить с каскадной таблицей стилей условное появление и удаление допполей? Именно удаление, что бы в форму при отправке не попадали? CSS не более, чем стилизация. Я бы на нем, кроме, максимум манипуляций с display block, display none ничего не делал

Что в нем плохого?

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

ЗЫ. Поэтому я и считаю, что должен быть один язык, а не куча разных подходов, стилизация отдельно, разметка отдельно и прочее, это уже анахронизм.. ИМХО

Так пявлялись и появляются новые языки. Каждый хотел сделать новый, единый. По факту появлялось очередное ответвление.

В этом плане мне нравится php. Он универсален. Хочешь - строго типизируй function (array $t, string $b, bool $d) array{}, хочешь не используй типизацию. Поддерживает всё, кроме ассинхронности (хотя многие пытаются в ассинхронность ReactPHP). Каждый может найти свой подход. За это его любят и ненавидят одновременно. 

Анархия