Компонент · рівень 3

Обране тренера

Вузол 5.8 - збережені товари тренера. Восьмий і останній тренерський організм, і найдивніший файл системи: 278 рядків, два селектори, сім оголошень. Майже сорок рядків пояснення на кожне оголошення - рекорд, і майже все з них про те, чого цей файл НЕ робить.

рівень 3design/system/components/coach-wishlist.css295 рядків3 селектори8 оголошень1 екран
Приватний блок був двома правилами, а в <main> двадцять шість контролів

Це співвідношення і є весь файл, і воно протилежне тому, що зустрів крок 7.95: index.css записує приватні таблиці того кроку по 13-76 правил кожна, тож там робота полягала у видаленні того, чим уже володів атом. Цей екран ніс .cw-note і .cw-note b, і більше нічого - бо його зібрано з канонічної сітки .pcard, а в кожної її частини вже є власник:

Що на екраніХто це малює
.prowproduct-grid.css - набір колонок auto-fill
.pcard .ph .bd .nmproduct-card.css
.pavail.in .preavailability.css - рядок полиці і його крапка
.pold .pnewprice.css
.wlrmfavourite.css каже ДЕ, button.css каже ЯК ВИГЛЯДАЄ
.crumb · .acc .acc-nav .acc-h1breadcrumb.css · account-shell.css

Тож видаляти переїзду не було чого. Видалення вже сталося - шаром нижче й кроком раніше. wireframes/_wf.css малював чотири з цих рядків, і екран перестав його підключати тієї миті, коли його клонували. Чотири правила померли там, і два атоми їх забрали.

Чотири контроли їхали з 25.59 на 44, і причина була в розмітці

class="btn" у цій системі не малює нічого: button.css оголошує базовий блок на чотирьох фінішах і правила .btn не має взагалі. Тож контрол, який не називає фінішу, рендериться як неформатований текст - і таблиця стилів виправити це за себе не може.

КонтролДо, на всіх чотирьох ширинахПісля
.cartbtn16.8 x 25.59 · display: block, без ґрунту, без рамки, без радіуса44 x 44 · --bg-action, --radius-8, svg 20
.cartbtn.notify16.8 x 25.59 - той самий вигляд, хоча це єдиний контрол екрана, який мусить відрізнятись від сусідів44 x 44 · прозорий ґрунт, край --line-strong
.wlrm44 x 44 коробка від favourite.css, але чорнило --text-body, svg 16.8 і жодного стану44 x 44 · --text-secondary, svg 20, hover / press / focus

Коло під міткою обране пішло навмисне: favourite.css записує на 6.2, що сірий файл оголошував його тричі, і рендерилось лише третє - тобто коло вже було невидиме в тому шарі, який ним володів.

І крапка була і набрана, і намальована. .pavail::before - диск 6px від 7.35, коли ● прибрали зі 107 рядків розмітки. Клон цього екрана символ ще ніс, тож усі чотири картки показували диск І знак. Зміряно до: innerText тримав 4 x U+25CF, а ::before був на місці й малював. Сьогодні: 0.

Анатомія

Розмітку знято з кольорового екрана через tools/demo.mjs. Колонку обмежено до 732 - ширини .acc-main в оболонці акаунта на 1280.

Увесь екран, і власного тут лише останній абзац. Сітка 158 / 173 / 234.66 / 233.33 на чотирьох ширинах, рамка фото квадратна на кожній: 156 · 171 · 232.66 · 231.33
1Сітка .prow - auto-fill, дві колонки на телефоні і три від 768. Це product-grid.css, і цей файл не каже про неї нічого
2Картка .pcard - радіус 12, край --line-hair. Знову не цей файл
3Мітка обране .wlrm - два файли на один контрол: favourite.css ставить її в кут (44 x 44, зверху-справа 3), button.css каже, що це тихий текстовий значок без кола і без ґрунту
4Дія картки .cartbtn - btn--accent btn--icon, і третя картка носить .notify, тобто btn--outline. Єдина відмінність на екрані намальована рангом, а не окремим правилом
5Записка .cw-note - єдине правило, яке цей файл справді має: один список обраного служить і тренерові, і покупцеві, і це тренерський погляд на нього
Одне правило, і три драбини, перед якими воно звітує
ВластивістьСіреМалює заразЧому
font-size12.5px--fs-14два кроки типографіки: 5.5 веде півпікселя до сусіда, якого більше читають (12.5 → 13), 5.6 веде ціле на дев'ять щаблів, нічия ВГОРУ (13 → 14)
color--sec #777--text-secondaryпереклад за роботою
border1px dashed #cfcfcf1px dashed --line-strongпереклад за роботою
border-radius8px--radius-8вже щабель
padding10px 12px10px / --space-1212 щабель, 10 ні
margin-top14px14pxне щабель

Тип - єдина драбина, чиє округлення вирішене, і вирішене двома ходами, а не одним. Відступи - драбина, яка не вирішена: tokens.css дає два правила, що суперечать одне одному на цих самих числах - блок 5.5 бере нічиї ВГОРУ (10 → 12, 14 → 16), а обхід 7.67 округляє ВНИЗ до щабля (10 → 8, 14 → 12). Доки це не сказано вголос, зрушити їх означало б ухвалити рішення про значення випадково.

А міжрядковий інтервал не оголошено, і оголошувати не треба. Сіре правило не ставило line-height, тож записка успадковує base.css: 22.4px при 14, тобто 1.6 - рівно те, що .cc-note оголошує руками. Додати оголошення означало б намалювати нічого і зробити другий файл відповідальним за значення, яким уже володіє base.css.

Знайдено на цій сторінці: один об'єкт під двома іменами, і три числа різниці

.cw-note і .cc-note - та сама записка в тому самому потоці, намальована двома руками. Обидві - пунктирне речення в підвалі тренерського екрана; обидві --fs-14 --text-secondary на 1px dashed --line-strong; обидві спираються на той самий успадкований 1.6. Зміряно сьогодні в браузері на 360:

.cw-note - радіус 8, padding 10 / 12, margin 14 / 0
.cc-note - радіус 10, padding 11 / 13, margin 14 / 4

Різниця вся тут: три числа і жодного більше. Обидва набори ніхто не вирішував, і другий уже позначено [?] тричі у coach-clients.css. Одне ім'я й один набір чисел - це перейменування Кроку 6, і воно потребує обох файлів відкритими одночасно.

Пунктирна записка не має атома, і п'ятеро вже пішли з пунктиру

Перевірено сьогодні заново, бо це твердження про корпус, а корпус не лежить у цьому файлі. Одинадцять коробок у семи файлах оголошують 1px dashed var(--line-strong) у своїй СТРУКТУРНІЙ половині - дванадцять із цією, у восьми файлах. Число тримається. І п'ятеро з одинадцяти тією ж половиною кольору того самого файлу повертаються в solid на тонованому ґрунті:

КоробкаОголошує пунктирТой самий файл повертає
.pf-notecheckout-form.css:39:360 solid · --line-hair · --bg-surface
.co-noaddrcheckout-form.css:149:292 solid · --line-notice · --bg-warning
.abonus .warnaccount-shell.css:145:225 solid · --line-hair · --bg-surface
.addr-hintaddress-card.css:34:74 solid · --line-hair · --bg-surface
.ord-oosorder-row.css:62:161 solid · --line-bonus-soft

П'ять файлів, одна відповідь, узята п'ять разів незалежно: кольоровий продукт перетворює пунктирну записку сірого прототипу на суцільну плашку з м'яким ґрунтом. Шестеро лишаються пунктирними - .addr-note, .empty, .emptybox, .errbox, .ac-new і .cc-note, - і останні дві з тієї ж причини, що й ця: ні в тренерської записки, ні в діалогу клієнта ніколи не було редакції в kit.css, тож жодна з них цієї відповіді не зустріла.

І перевірка знайшла у власному списку файлу застаріле ім'я

Файл перелічує шістку як «.addr-note, .empty, .emptybox, .errbox, .bb .tier і .cc-note». .bb .tier видалено на 8.34c - тим самим третім списком зводу, «клас, якого ніхто не носить», де його зміряли на 0 входжень в обох шарах. На його місце стала .ac-new з client-dialog.css, якої на день написання ще не було. Число одинадцять правильне; двоє з одинадцяти імен - уже ні. Твердження про корпус старіє мовчки, і подія, яка його старить, стається в іншому файлі.
Двадцять шість контролів, шість під підлогою, і жоден із шести не цього файлу

Зміряно в браузері всередині <main>, не в розмітці: 26 контролів. Під підлогою дотику 44 стоять шість, і кожен належить чужому файлу:

Контрол360 / 390768 / 1280Чий
.crumb a x215.0015.00breadcrumb.css - і слід є на кожній сторінці каталогу, товару й акаунта
.pcard .nm x436.00 / 36.3844.00product-card.css: база каже min-height: var(--size-44), а запит 619 зводить її до 36

А третій із трьох, який файл називає, підлогу вже перейшов. .acc-link записано тут як «40.39 на 360 / 390 / 768»; зміряно сьогодні - 44.00 на всіх трьох і 47.39 на 1280. Хтось це полагодив, і файл про це не знає: та сама сім'я, що й .bb .tier двома розділами вище, тільки в інший бік - там твердження застаріло видаленням, тут виправленням.

Кожен контрол, за який цей екран відповідає, підлогу проходить: .wlrm і .cartbtn по 44 x 44 на всіх чотирьох ширинах, .coach-newcta 328 x 52 на 360.

Токени

Прочитані з coach-wishlist.css. Три ролі й три примітиви на сім оголошень - найкоротша таблиця на стенді, і кожен рядок лівої колонки це переклад сірого імені в роль, яка робить ту саму роботу.

Семантичні ролі (3)Примітиви (4)
--line-strong --text-primary --text-secondary--container-text --fs-14 --radius-8 --space-12

Права колонка написана курсивом навмисне: це імена з іншої епохи, не токени. tokens.css 7.69 каже, чому переклади живуть біля правила, а не тут - половина кольору існує, щоб сказати, де кольоровий продукт вирішив ІНАКШЕ, а переказ уже чинного значення нічого не малює й ховає ті рядки, які справді відрізняються. Тут інакше не вирішив ніхто.

Половини кольору тут немає, і це чесний запис, а не порожній заголовок. Кожен файл, розколотий на кроці 3, вийшов із ДВОХ джерел - wireframes/_wf.css для структури і design/kit/kit.css для кольору, - і друге перемагало там, де вони не сходились. У цього екрана редакції в kit.css не було ніколи: він один із трьох, доданих кроком 8.7 після пачки 7.95, і саме через те, що він був лише сірим, обидва ці кроки й існують.

Стани

Станів немає, і не тому, що їх забули: у файлі два правила, і жодне з них не описує інтерактивний елемент. .cw-note - речення в рамці. Усі 26 контролів екрана носять класи атомів і беруть стани звідти.

Це і є найчистіший вимір усього етапу 08: екран із двадцятьма шістьма контролями, який власною таблицею стилів не малює жодної взаємодії, бо всі вони вже намальовані там, де їх видно всім.

Холостий контроль

Сторінка звіряє себе з файлом: 1 клас і 0 станів оголошено в coach-wishlist.css. .coach не рахується - це скоуп, а b усередині записки це тег, а не клас. Найкоротший KIT_CLS на стенді.

Розмітка
<main class="wf-page acc-main"> <h1 class="acc-h1">Обране</h1> <div class="prow"> <!-- product-grid.css --> <article class="pcard"> <!-- product-card.css --> <a class="ph">…</a> <button class="btn btn--text btn--icon wlrm">…</button> <div class="bd"> <a class="nm">BioTechUSA Hyper Mass 4000 г</a> <div class="pavail in">В наявності</div> <!-- без ● --> <div class="prow2"><span class="pold">…</span><span class="pnew">…</span> <button class="btn btn--accent btn--icon cartbtn">…</button></div> </div> </article> </div> <p class="cw-note"><b>Один список</b> служить і тренерові, і покупцеві …</p> </main>

У цій розмітці рівно один клас належить цьому файлові. Усе інше - імена, які він читає і не оголошує, і саме тому «переїзд» тут звівся до того, щоб дописати фініші в розмітку, а не переписати таблицю стилів.

Де вживається

Якорі: .cw-note

1 кольоровий екран: coach-wishlist. У покупця той самий екран живе під іншим ім'ям - account-wishlist, -empty, -many, - і в нього ● не було відтоді, як його розфарбували.

Немає в коді -> етап 09

Чого бракує

  • .cw-note і .cc-note - один об'єкт під двома іменами, три числа різниці, обидва набори невирішені. Крок 6, і потрібні обидва файли
  • Пунктирна записка не має атома: 12 коробок у 8 файлах, і 5 з них уже пішли в solid на тонованому ґрунті. Це одне рішення про дванадцять коробок, а не дванадцять про одну
  • .crumb a - 15.00 на всіх чотирьох ширинах, і слід є на кожній сторінці каталогу, товару й акаунта. Рішення про слід, не про вузол 5.8
  • .pcard .nm - 36 нижче 619, при базі min-height: var(--size-44). 91 із 171-піксельних карток продукту стоять на цій ширині
  • Два літерали під [?] - 10 і 14, - і обидва в одному правилі. Драбина відступів має два правила, які на цих самих числах дають протилежні відповіді
  • Два твердження про корпус у цьому файлі застаріли, і обидва знайдено перевіркою, а не читанням. Тверджень про корпус у коментарях більше, ніж хтось перевіряє

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.