1. Зачем знать устройство, если просишь не руками
Тёма сходил за кофе и вернулся к Лёхе с готовностью слушать про красоту — и сразу натыкается на встречный вопрос.
— Слушай, а вот ты говоришь «сделай красиво». Красиво — это куда вообще? В каком месте игры?
Тёма открывает рот — а ответа нет. Ну… везде? Чтоб вся была красивая. Лёха цепляет именно это размытое «везде»:
— Вот пока ты не знаешь, из чего игра собрана, ты и просить можешь только наугад. «Сделай красиво», «почини», «как-то не так». А когда понимаешь устройство — просишь точно: вот это поведение не трогай, а вот вид поменяй. Поэтому сейчас — короткая карта. Из каких слоёв собрана любая веб-страница и любая игрушка в браузере.
Тёма напрягается — звучит как начало лекции по программированию, а он сюда не за этим.
— Только давай без программирования. Я код учить не подписывался. Хватило с меня курсов...
— И не надо. Никакого синтаксиса. Три ярлыка и понимание, что за что отвечает. Цель не в том, чтоб ты сам верстал руками, а в том, чтоб ты точно ставил задачу агенту — знал, какой слой за что отвечает, и просил по адресу. Всё.
2. Дом из трёх слоёв: HTML, CSS, JS
Лёха ищет аналогию попроще, и перебрав несколько вариантов, останавливается на самом очевидном — дом.
— Любая веб-страница или игра собрана из трёх слоёв. Первый — HTML. Это каркас. Стены и комнаты: что вообще на странице есть. Кнопка, заголовок, поле ввода, картинка — HTML говорит, что присутствует. Как чертёж дома: тут стена, тут дверь, тут окно. Сам по себе каркас голый и страшненький — просто скелет.
— А как думаешь, — подкидывает Лёха проверочный, — вот в твоей змейке что было бы HTML?
— Ну… само поле? Клетки, счёт, кнопка «старт». То, что вообще на экране есть.
— Считай, попал. Это каркас — все что присутствует на странице. Второй слой — CSS. Это отделка и интерьер. Как всё выглядит: цвета, шрифты, отступы, тени, плавность, анимация — всё «дорогое» ощущение. Тот же самый каркас можно отделать дёшево, а можно роскошно — и вся разница сидит в CSS. Когда говоришь «красивый сайт», «стильно», «плавно» — ты про CSS.
— О, так вот где живёт моя красота.
— Ровно тут. И третий — JS, JavaScript. Это электрика и техника в доме. Поведение: что происходит, когда жмёшь кнопку, как ползёт змейка, как считается счёт. Логика, мозги. Но так же и анимация, взрывы, движение. Каркас стоит, отделка сделана — но чтоб свет включался и техника работала, нужна проводка. Это JS.
Он подбивает всю карту в одну строчку:
— Запомни просто: HTML — что есть, CSS — как выглядит, JS — что делает. Три слоя, три роли.
3. «Работает» — это не «выглядит дорого»
— А теперь — самое полезное за сегодня, — Лёха чуть давит. — «Игра работает» и «игра выглядит круто» — это разные слои.
Тёма хмурится: разве не одно и то же?
— Смотри. Работает — это JS. Змейка ползёт, яблоко съедается, счёт растёт. Логика крутится. А выглядит дорого — это CSS. Плавность, цвета, эффекты. Красота. И вот зачем тебе это знать практически: когда захочешь сделать игру красивее, тебе не надо лезть в логику. Логика работает — оставь её в покое. Вся красота добавляется в слой CSS. Можно навести роскошный ремонт, не трогая проводку, — и игра будет работать ровно так же, просто выглядеть в разы дороже.
У Тёмы что-то щёлкает, и он сам подводит итог:
— Стоп. То есть я могу не переписывать саму змейку, а только переодеть её? Механика та же, а вид — другой?
— Ровно так. Переодеть, не ломая. Вот и вся мысль.
— Подожди, подожди. Но ты же говорил, что анимация - это JS?
— Анимация анимации рознь. Если элементы двигаются, то это чаще всего JS. Но если элементы меняют свет, пульсируют, переливаются разными цветами - это CSS. Более того, современный CSS настолько мощный что На нем можно делать даже очень крутые визуальные эффекты. И только если CSS уже весь выжат до максимума есть смысл использовать JS.
— Ладно, будем считать, что ты меня убедил, — соглашается Тёма. — Что дальше?
4. Одна кнопка в трёх слоях
Чтоб всё сошлось, Лёха показывает на экране самый мелкий пример — обычную кнопку «Играть». Вчитываться в код не надо, говорит, смотри на роли:
<button id="play">Играть</button> <!-- HTML: что есть — кнопка с надписью -->#play { background: #6c5ce7; border-radius: 12px; } /* CSS: как выглядит — цвет, скруглённые углы */document.getElementById("play").onclick = startGame; // JS: что делает — по клику запускает игру
— Три строчки — три слоя, — разбирает Лёха. — HTML создал кнопку. CSS сделал её фиолетовой и скруглил углы. JS привязал к ней действие — по клику запускается игра. Поменяешь цвет в CSS — кнопка станет другой на вид, а работать будет так же. Сотрёшь строчку JS — кнопка останется красивой, но мёртвой, на клик не отзовётся. Каждый слой отвечает за своё.
Тёма всматривается и узнаёт в коде знакомые элементы. И сам догадывается прогнать на змейке:
— Значит, в моей змейке то, как она ползёт и ест яблоко, — это JS, логика. А то, какого она цвета и как плавно движется, — это CSS, вид. И если я хочу её только покрасивее, мне в JS-логику лезть не надо вообще.
— Ну всё, дошло. Рабочее не трогаем, видимое перекрашиваем.
5. «А мне теперь это всё учить?»
Тёма ловит неприятную мысль и сразу её озвучивает:
— Погоди. Это что, мне теперь надо сесть и выучить весь этот CSS, чтоб делать красиво? У меня и так дел хватает.
Лёха начинает печатать ответ, но Тёма в чат уже не смотрит. Перед глазами разворачивается унылая дорога: учебники, часы, синтаксис, скучные правила — весь тот путь «сначала выучи всё руками», от которого он как раз и сбегал к ИИ. И от этой досады он, почти машинально, под столом тыкает в телефон и строчит Артёму2036: «слышь, я тут красоту делаю, а мне говорят, что без CSS никак. это что, реально весь фронтенд зубрить? я ж не за этим».
— 😏 о, знакомая паника. ты сначала сформулируй, чего на самом деле хочешь. выучить CSS — или чтоб было красиво? это два разных желания, дундук.
Тёма фыркает — задело. И, чтоб остыть, начинает проговаривать про себя: да не CSS он хочет, в гробу он его видал. Он хочет, чтоб выходило красиво. А кто там внутри это вёрстку пишет — да хоть кто. Лишь бы не он. И вот пока он мысленно строит эту отмазку, она вдруг сама оборачивается ответом. Он же не CSS хочет — он хочет результат. Значит, и вопрос не «как мне выучить CSS», а «кто сделает CSS за меня». Артём2036 не дал ответа — он заставил Тёму подумать, чего тот на самом деле просит.
Тёма поднимает глаза от телефона обратно к Лёхе — и попадает ровно в то, что тот как раз говорит.
— А вот это запомни крепче всего, — Лёха будто веселеет. — Нет. Тебе не вёрстку руками писать, тебе её заказывать. Понимаешь устройство — значит, можешь точно ставить задачу. А вёрстку напишет ИИ-агент. Твоя сила не в том, чтоб знать синтаксис, а в том, чтоб знать: вот это слой вида, а это слой логики — и просить правильно.
Мысль Тёме страшно нравится — потому что он сам, минуту назад, в чате на неё и набрёл.
— То есть правильный вопрос не «как мне выучить CSS», а «кто сделает CSS за меня». Так?
— О, вот это уже правильный вопрос, — кивает Лёха. — И этот «кто» у тебя уже есть.
— Так Саня мне уже написал Змейку. Он в дизайне ничего не понимает и сделать красиво не может. Я тоже не понимаю - как я ему детальное ТЗ поставлю?
— А если мы Саню проапгрейтим? — закидывает Лёха. — Научим его делать крутую анимацию..
Тёма молча поднимается и идёт за новым кофе. День обещает быть интересным.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ