Кабінет тренера
Щоденний екран первинної аудиторії: вузол 5.2 «панель» і вузол 5.6 «історія замовлень». Два екрани в одному файлі, бо це один організм - та сама оболонка кабінету, ті самі імена клієнтів, ті самі гроші. Найбільший файл системи.
Розмітку знято з кольорових екранів у цій сесії через tools/demo.mjs, разом із класом coach на <body>. Рамки на 732, бо саме стільки має колонка вмісту в продукті на 1280: .acc це 1032, з яких 268 бере рейка кабінету.
account-shell.css, картки товару - product-card.css.cstat - перше на екрані і заява, а не контрол: тепла поверхня з волосяною лінією, без картки й без тіні. Усередині .tierchip, .cnote з .csub і .qm, і посилання .cmanage.crestock з .rk-lead - ритм замовлень клієнта, перерахований у «скоро знадобиться». Це Job 3 для чужих людей: тренер стежить за запасом не своїм, а клієнтським.cli · .cli-add · .cinfo · .cn · .cg · .cgo · .cav · .cgo-btn. Аватар, ім'я, ціль, кількість замовлень, посилання в профіль.cord · .co-meta · .co-info · .co-status · .co-sum · .co-no · .cs-b. Те саме, що на 5.6, але коротко і без фільтрів.ah, .ac-info, .ac-cli - місця, де цей файл дописує рядок у чужу картку. Імпорт мусить іти після account-shell.css, і це записано у файлі окремо.cnew - велика первинна дія «Зібрати першу сесію»: .cn-ic, .cn-tx, .cn-t, .cn-s, .cn-go. Про неї - наступний розділ, і це найважливіше, що знайшла ця сторінка.ac-cli .cav і .ac-cli .ac-info дописують рядок вибору клієнта в діалозі сесії. Сам рядок - це radio.css, форму аватара й текстової колонки дає кабінет, бо це той самий рядок клієнта, лише всередині вибору.co-top · .co-new · .co-filters з .co-fil і .co-search · чотири .ord з .ord-h, .ord-no, .ord-date, .ord-meta, .ord-cli, .ord-chip, .ord-foot, .ord-tot, .ord-acts · і .co-more унизуУ файлі стоїть абзац, який закінчується інструкцією: «шість структурних правил і два колірні під .cnew - без елемента на жодному кольоровому екрані... хто підтвердить видалення блоку, видаляє ці вісім разом із ним».
Це неправда, і неправда вже п'ять днів. Зміряно в браузері по всіх 88 кольорових екранах:
| Дата | Що сталось |
|---|---|
| 11.08.2026 | записку написано, і вона правильна: .cnew щойно пішов із coach-home, а design/coach-home-empty.html ще не існував |
| 12.08.2026 | цей екран створено - один із 35 клонів кроків 8.12-8.15 - і він несе <a class="cnew"> з усіма п'ятьма дітьми |
| відтоді | записка каже «без елемента на жодному екрані», поки екран несе елемент. Одинадцять комітів. |
І малює вона не дрібницю. На coach-home-empty при 1280 .cnew - 732 x 119, ґрунт --bg-action, чорнило --text-onaction; .cn-ic 46 x 46, .cn-t 18px, .cn-s 14px, .cn-go 28 x 28, усе малює. Це найгучніший об'єкт екрана і єдина дія на ньому: «Зібрати першу сесію».
Записка з інструкцією - це правило без перевірки під ним
Виконати останній рядок того абзацу означало б зняти єдину дію на єдиному екрані, де тренерові більше нічого робити. І в неї було п'ять днів на те, щоб її виконали.Клас важливіший за випадок. Коментар, який стверджує відсутність, - це твердження про корпус, а корпус лежить не в цьому файлі. Він старіє мовчки, і крок клонування - рівно та подія, яка його старить: 35 екранів приїхали одним комітом, і ніхто не перечитав записки, написані напередодні. Прогрепано по всьому шару компонентів: це єдине твердження такого роду, тож одинак, а не родина. Дев'ять правил лишаються.
.ord і .ord-h - одне ім'я, два компонентиНайдорожча відкрита річ у файлі, і вона названа, а не полагоджена, бо перейменування розмітки - це Крок 6. order-row.css (рівень 2) і цей файл (рівень 3) оголошують ті самі два імені для різних об'єктів:
| Ім'я | У покупця | У тренера |
|---|---|---|
.ord | картка, яка розкривається: без власних полів, overflow: hidden, --radius-12, --elevation-1. Поля платять .ord-h і .ord-body окремо, бо розділювач між ними має йти від краю до краю | статичний <article>, який не розкриває нічого |
.ord-h | <button>: ширина 100%, padding: var(--space-16), cursor: pointer і сітка з п'яти зон нижче 640 | <div>: рядок по базовій лінії, space-between, без полів і без чого натискати |
Написані без скоупа, вони розбирають одне одного, і програє телефон покупця: базовий display: flex, оголошений пізніше, б'є display: grid усередині ранішої медіа-умови при рівній специфічності, - і в покупця лишились би п'ять оголошень grid-area без сітки. Прив'язані до оболонки, вони знову два компоненти.
Що платив рядок заголовка, поки цього не зміряли
.coach .ord-h ніколи не скидав order-row.css, який оголошує на тому самому імені padding: var(--space-16) і cursor: pointer. Зміряно на 390: .ord-no стояв на x=49.0 на всіх чотирьох картках, а .ord-meta, .ord-cli і .ord-tot - на x=33.0. Картка платить 12/16, заголовок платить 16 ще раз зверху, і єдиний рядок, який називає замовлення, стояв із відступом більшим за всі інші рядки своєї ж картки.Після padding: 0
Усі чотири заголовки 63.2 замість 94.8 і 120.4, кожен .ord-no на 33.0, кожна дата назад в один рядок. Картки 335.7 / 361.3 / 338.9 / 394.5 → 304.1 / 304.1 / 281.8 / 337.3. cursor: auto пішов разом із ним: рядок не відповідає на клік, а вказівник над ним - обіцянка, якої цей екран не виконає.Це не перефарбовування атома, а скидання імені, яке зіткнулось - рівно те, для чого скоуп і існує.
Приватний псевдонім - не той самий дефект, що заліз у чужий компонент: тут ніщо не перемальовує ім'я, яке атом тримає, - тут малюють ім'я, про яке атомові ніхто не сказав. Виправлення - один рядок у списку селекторів атома, і писати його не цьому файлу.
| Приватне ім'я | Чий це насправді атом | Стан |
|---|---|---|
.cstat .tierchip | account-shell.css, .acc-tier | відкрито |
.co-fil | chip.css - там уже вісім імен | відкрито |
.cgo .cmanage | link-row.css, гучний щабель | відкрито |
.co-search | field.css | закрито 7.96 - розмітка взяла field, тут лишилось лише місце |
.ord-status, .cord .co-status | status-pill.css | закрито 7.96 - атом узяв імена і стани .ok / .way |
.co-sum a | – | закрито 7.96 - два посилання стали кнопками, чим і були |
Кожен із чотирьох закрився так, як абзац і передбачав: атом вивчив ім'я, а правило тут видалили, а не переписали. Та сама форма, що й на кроках 7.23 (чип), 7.30 (рядок посилань) і 7.37 (статус-пілюля): усі три працювали додаванням імені в список атома, і жоден - перейменуванням розмітки, яку ділить заморожений сірий шар.
.cli .cgo-btn і .co-more стоять на елементах, що носять btn, тож їхні поля, ширина і рамка - це button.cssФайл відкривався правилом .co-wrap{ max-width: 940px }, а елемента .co-wrap на цьому екрані немає взагалі. Тобто на своєму екрані воно не малювало нічого - і намалювало б чимало на чужому: co- це простір імен чекауту, де .co-wrap оголошено як обгортку сторінки на 1200, а цей файл вантажиться після checkout-form.css. Один рядок звузив би всі п'ять екранів чекауту до 940 заради елемента, якого не існує.
І сам простір імен - це і є знахідка. .co-top, .co-new, .co-filters, .co-fil, .co-search, .co-more усі сидять у префіксі чекауту, і жоден сьогодні не стикається - звірено ім'я за іменем. Це щастя, а не задум, і наступне co-, яке вигадає будь-який із двох екранів, - підкидання монети.
Найбільша партія розмірів серед п'яти тренерських файлів, і жоден із них тут не вирішено: обидва ходи належать власникові й узяті на всьому продукті два етапи тому. Дев'ятнадцять зрушили, дев'ятнадцять угору, жоден униз. Сім із них 12.5 → 14, п'ять 13 → 14, два 11 → 12, два 11.5 → 12, один 15 → 16, два 22 → 24.
| Клас | Сірий → стало | Клас | Сірий → стало |
|---|---|---|---|
.cstat .cnote | 13 → 14 | .co-top h1 | 22 → 24 (видалено) |
.cstat .cmanage | 12.5 → 14 | .co-top .sub | 12.5 → 14 (видалено) |
.cnew .cn-s | 13 → 14 | .co-fil | 12.5 → 14 |
.cnew .cn-go | 22 → 24 | .co-search | 13 → 14 (видалено) |
.cli .cinfo .cg | 12.5 → 14 | .ord-no | 15 → 16 |
.cli .cgo | 12.5 → 14 | .ord-date | 12.5 → 14 |
.crestock .rk-lead | 13 → 14 | .ord-status | 11 → 12 (видалено) |
.cord .co-meta | 12.5 → 14 | .ord-meta | 13 → 14 |
.cord .co-status | 11 → 12 | .ord-chip | 11.5 → 12 |
| – | – | .ord-tot small | 11.5 → 12 |
Чотири рядки з позначкою (видалено) у файлі більше не існують: 7.96 зняв їх, коли розмітка взяла .acc-h1, .acc-sub, field і власні імена статус-пілюлі. Значення тепер атомове, а не чиясь здогадка.
Записки були справжнім дефектом, і хибними двічі
До 7.96 усі п'ятнадцять читались так, ніби сіре число й досі оголошене - «[?] півпікселя», «[?] 13px не має щабля» поруч із рядком, який кажеvar(--fs-14). 7.96 виправив цю половину і завів другу: назвав кожну «ПЕРЕНЕСЕНО 7.95, НЕ ВИРІШЕНО», що так само хибно з іншого боку.Вони були вирішені, і не тут
Вирішені на 5.5 і 5.6, власником, на всьому продукті. 7.95 лише застосував рішення, поза яким цей екран стояв, бо жив у приватному<style>. 7.98 - третій і останній перепис цих п'ятнадцяти записок. 28 позначок [?] у файлі, і всі вони про геометрію: відступи мають два правила, що суперечать, радіус бере нічию вниз.Це щоденний екран первинної аудиторії - те, що тренер відкриває, коли просто заходить. Усе на ньому міряється однією міркою: скільки дотиків від «зайшов» до «замовлення для трьох клієнтів у дорозі».
Позичати звідси нема чого і не треба: усі 33 власні класи - це розкладка двох конкретних екранів. Усе, що має форму, вже належить комусь іншому, і сім псевдонімів у таблиці вище - це список того, наскільки саме.
Правило
Скоуп існує, щоб розводити імена, які зіткнулись, а не щоб перефарбовувати атоми..coach .ord-h{ padding: 0; cursor: auto } - це скидання чужого правила, яке дісталось не свого елемента. .coach .cli .cgo-btn{ padding: … } було б перефарбовуванням кнопки, і його видалено.Антиправило
Не пиши в коментарі, чого немає на екранах. Файл знає свої правила і не знає корпусу. «Цього немає ніде» застаріває мовчки - і найшвидше саме тоді, коли корпус росте пачкою клонів. Якщо твердження про корпус потрібне, воно має бути заміром із датою, а не реченням.Правила вживання, які називають саме цей компонент: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Ряд дій береться патерном .actions; gap: 10px лишився тут і чекає рішення власника.
Нуль :hover, нуль :active, нуль :focus-visible. Усе, що відповідає на палець, - кнопка, чип, поле, посилання або статус-пілюля, і за них відповідають їхні файли.
Стани тут - варіанти даних, а не взаємодії: тариф Pro проти Free у .cstat, порожній кабінет проти повного, «Доставлено» проти «У дорозі» на пілюлі. Жоден із них не малює цей файл; він лише дає їм місце.
| Умова | Що змінює |
|---|---|
(min-width: 620px) | смуга статусу .cstat з двох рядків в один. Було 720 - етап 10, раунд 3 |
(max-width: 619px) | стрілка .cn-go ховається: картка .cnew уся є посиланням, а нижче точки їй потрібна ширина під речення. Було 520, єдина 520 у файлі, - етап 10, раунд 3 |
Картки оболонки в дві колонки лишились, але не тут: це .acc-grid, і правило належить account-shell.css. Рядок стояв у цій таблиці помилково і етап 10 його звідси прибрав | |
Смуга статусу стала сіткою, а не рядком, що переноситься, на кроці 8.0 - і причина в замірі, а не в смаку. Гнучкий рядок ламає лінію за гіпотетичним розміром елемента: речення заявляло свої 685.8 max-content перш ніж будь-що дозволяли стиснути, посилання після нього не вміщалось, починався новий рядок. Один рядок потребував 889.3 вмісту, тобто коробки 921.3 - а це приходить на 1440 і більше ніде.
Смуга статусу кабінету має два обличчя. .cstat--free - тариф Free: втоплене тло і тихіший край чипа, бо це стан спокою, а не пропозиція. .cstat--up - та сама смуга, коли вона пропонує перейти: чорнильний край, сторінкове тло і .cs-copy замість підпису, бо тут читають речення, а не позначку. Кожне число тут несе [?].
Сторінка звіряє себе з файлом: 47 класів і 0 станів оголошено в coach-cabinet.css. .coach не рахується - це скоуп.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від яких порогів:--bp-grid-2col і його дзеркало. Що саме міняється: смуга статусу кладе чип, примітку і лінк в один рядок; нижче точки ховається швидкий перехід. Було 720 і 520, обидва поза реєстром.Прочитані з coach-cabinet.css, не переписані руками. Найменша частка токенів на рядок серед тренерських файлів, і це правильно: 201 оголошення на 962 рядки означає, що дві третини файлу - записки про те, чого в ньому вже немає.
| Семантичні ролі (14) | Примітиви (20) |
|---|---|
--bg-action --bg-page --bg-sunken --bg-surface --line-action --line-hair --line-inverse --line-onaction --line-strong --text-body --text-muted --text-onaction --text-primary --text-secondary | --container-text --font-mono --fs-12 --fs-14 --fs-16 --fs-18 --fs-24 --fw-black --fw-bold --fw-semibold --radius-12 --radius-circle --radius-pill --size-40 --size-46 --space-12 --space-16 --space-2 --space-4 --space-8 |
--bg-action тут лише в одному місці - .cnew, тій самій картці з розділу вище. Це єдина суцільна акцентна заливка в кабінеті, і стоїть вона на екрані, де тренерові більше нічого натиснути.
Розмітка заморожена, тож перейменування .ord і .ord-h - Крок 6, а не цей файл. Доти скоуп .coach тримає два компоненти нарізно, і саме тому ці два імені єдині у файлі, яким скоуп справді потрібен: усе інше в просторі .ord-*, якого order-row.css не займає.
Якорі: .cstat .cnote .csub
8 кольорових екранів: coach-home · -empty · -free · -loading · -error і coach-orders · -empty · -loading · -error. Плюс два класи, .ac-info і .ac-cli, дописують рядок у діалог додавання клієнта на coach-session-addclient - там цей файл дістає чужий екран.
Чого бракує
.ordі.ord-hперейменувати - одне ім'я на два компоненти, і поки що їх розводить лише скоуп. Крок 6 для розмітки, рішення про імена - власника- Три псевдоніми чекають одного рядка в атомі:
.tierchipвaccount-shell.css,.co-filуchip.css,.cgoі.cmanageвlink-row.css - Простір імен
co-ділиться з чекаутом, і сьогодні не стикається лише випадково - 28 геометричних літералів під
[?]: 14, 15, 9, 6, 13, 20, 3. Відступи мають два правила, що суперечать одне одному, тож жоден із них не рухається без рішення - Дата падає на 360 на трьох картках із чотирьох. Це рядок проти колонки 294 - рішення про слова, не про CSS
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.