Про один большой файл, я говорил о давнишних своих программах на ассемблере. Сейчас у меня разделение разметки, стилей, js и логика в классах PHP. И даже такую как вы говорите
Я считаю чрезмерным и даже вредным, но приходится так делать для увеличения скорости загрузки. Кстати есть те кто наоборот говорят, что большие файлы бутстрапа, джеквери и прочих это хорошо, хоть они из этих файлов и используют по нескольку строк.
Я вот(в своём фреймворке) все технологии объединил и у меня страница собирается в одном файле xml, а движок уже на основе xml инструкции страницы уже всё собирает и подключает. Это я к тому что так намного удобнее чем даже иметь правильную структуру и ковыряться в разных директориях и файлах чтобы настроить одну страницу. Инструмент должен быть так заточен чтобы одну страницу\окно(приложения) можно было настроить в одном файле ИМХО.
Когда у вас несколько проектов и помнить все детали каждого нет возможности, то единственный выход - простая и понятная структура. Проще быть знакомым с несколькими языками, использовать очевидные подходы, чем разгребать сложносочиненную кашу зависимостей и разрешать ограничения одного языка через избыточное кодирование.
В одном языке проблема решается естественной строчкой кода, а в другом - танцем с бубном и костылями.
Сами себе противоречите.. Куча разных языков и технологий + ещё куча всяких к ним инструментов, хотите вы этого или нет, всё равно будете танцевать с бубном и костылями..
Я раньше давным-давно писал игры и программы на одном языке Assembler, хоть код и был очень многострочным в нём легко и быстро можно было разобраться. А сейчас с разделением на разные технологии, языки и тд. приходится копаться в куче разных файлах, всё стало намного запутаннее, хоть разделение на первый взгляд и даёт иллюзию очевидности..
Чем высокоуровнее язык тем он ограниченнее в своих возможностях, так было и будет. Просто люди хотят упростить и ускорить создание новых программных продуктов поэтому и создаются специализированные языки под определённые задачи, вот и всё. Assembler the best!!!
Для этого придумали ООП не смотря на разделение технологий на разметку, стилизацию, логику, всё же в современных фреймворках используют объекты с свойствами, которые автоматически формируют вьюхи.
ЗЫ. Поэтому я и считаю, что должен быть один язык, а не куча разных подходов, стилизация отдельно, разметка отдельно и прочее, это уже анахронизм.. ИМХО
Смысловое назначение элемента другое. Это костыли. Должна быть кнопка или стилизованная под нее ссылка.
Конечно кнопка. Оборачивается в 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; }}
Сейчас это легко делается и без JS через скрытые input, а в CSS input:checked прописываются стили для скрытия\показа блока меню.