Обране тренера
Вузол 5.8 - збережені товари тренера. Восьмий і останній тренерський організм, і найдивніший файл системи: 278 рядків, два селектори, сім оголошень. Майже сорок рядків пояснення на кожне оголошення - рекорд, і майже все з них про те, чого цей файл НЕ робить.
<main> двадцять шість контролівЦе співвідношення і є весь файл, і воно протилежне тому, що зустрів крок 7.95: index.css записує приватні таблиці того кроку по 13-76 правил кожна, тож там робота полягала у видаленні того, чим уже володів атом. Цей екран ніс .cw-note і .cw-note b, і більше нічого - бо його зібрано з канонічної сітки .pcard, а в кожної її частини вже є власник:
| Що на екрані | Хто це малює |
|---|---|
.prow | product-grid.css - набір колонок auto-fill |
.pcard .ph .bd .nm | product-card.css |
.pavail.in .pre | availability.css - рядок полиці і його крапка |
.pold .pnew | price.css |
.wlrm | favourite.css каже ДЕ, button.css каже ЯК ВИГЛЯДАЄ |
.crumb · .acc .acc-nav .acc-h1 | breadcrumb.css · account-shell.css |
Тож видаляти переїзду не було чого. Видалення вже сталося - шаром нижче й кроком раніше. wireframes/_wf.css малював чотири з цих рядків, і екран перестав його підключати тієї миті, коли його клонували. Чотири правила померли там, і два атоми їх забрали.
class="btn" у цій системі не малює нічого: button.css оголошує базовий блок на чотирьох фінішах і правила .btn не має взагалі. Тож контрол, який не називає фінішу, рендериться як неформатований текст - і таблиця стилів виправити це за себе не може.
| Контрол | До, на всіх чотирьох ширинах | Після |
|---|---|---|
.cartbtn | 16.8 x 25.59 · display: block, без ґрунту, без рамки, без радіуса | 44 x 44 · --bg-action, --radius-8, svg 20 |
.cartbtn.notify | 16.8 x 25.59 - той самий вигляд, хоча це єдиний контрол екрана, який мусить відрізнятись від сусідів | 44 x 44 · прозорий ґрунт, край --line-strong |
.wlrm | 44 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.
.prow - auto-fill, дві колонки на телефоні і три від 768. Це product-grid.css, і цей файл не каже про неї нічого.pcard - радіус 12, край --line-hair. Знову не цей файл.wlrm - два файли на один контрол: favourite.css ставить її в кут (44 x 44, зверху-справа 3), button.css каже, що це тихий текстовий значок без кола і без ґрунту.cartbtn - btn--accent btn--icon, і третя картка носить .notify, тобто btn--outline. Єдина відмінність на екрані намальована рангом, а не окремим правилом.cw-note - єдине правило, яке цей файл справді має: один список обраного служить і тренерові, і покупцеві, і це тренерський погляд на нього| Властивість | Сіре | Малює зараз | Чому |
|---|---|---|---|
font-size | 12.5px | --fs-14 | два кроки типографіки: 5.5 веде півпікселя до сусіда, якого більше читають (12.5 → 13), 5.6 веде ціле на дев'ять щаблів, нічия ВГОРУ (13 → 14) |
color | --sec #777 | --text-secondary | переклад за роботою |
border | 1px dashed #cfcfcf | 1px dashed --line-strong | переклад за роботою |
border-radius | 8px | --radius-8 | вже щабель |
padding | 10px 12px | 10px / --space-12 | 12 щабель, 10 ні |
margin-top | 14px | 14px | не щабель |
Тип - єдина драбина, чиє округлення вирішене, і вирішене двома ходами, а не одним. Відступи - драбина, яка не вирішена: 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-note | checkout-form.css:39 | :360 solid · --line-hair · --bg-surface |
.co-noaddr | checkout-form.css:149 | :292 solid · --line-notice · --bg-warning |
.abonus .warn | account-shell.css:145 | :225 solid · --line-hair · --bg-surface |
.addr-hint | address-card.css:34 | :74 solid · --line-hair · --bg-surface |
.ord-oos | order-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 / 390 | 768 / 1280 | Чий |
|---|---|---|---|
.crumb a x2 | 15.00 | 15.00 | breadcrumb.css - і слід є на кожній сторінці каталогу, товару й акаунта |
.pcard .nm x4 | 36.00 / 36.38 | 44.00 | product-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 на стенді.
У цій розмітці рівно один клас належить цьому файлові. Усе інше - імена, які він читає і не оголошує, і саме тому «переїзд» тут звівся до того, щоб дописати фініші в розмітку, а не переписати таблицю стилів.
Якорі: .cw-note
1 кольоровий екран: coach-wishlist. У покупця той самий екран живе під іншим ім'ям - account-wishlist, -empty, -many, - і в нього ● не було відтоді, як його розфарбували.
Чого бракує
.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.