Рядок замовлення
Замовлення, яке вже зроблено: номер, дата, стан, мініатюри, сума. Натиснули - і під ним відкривається все інше. Найбільший файл системи на кількість оголошень до кількості екранів: 240 оголошень на два екрани.
Замовлення було розкидано по чотирьох файлах. Кожен шматок лежав там, куди його занесла історія, а не там, де він працює.
| Крок | Що приїхало | Звідки | Чому там лежало |
|---|---|---|---|
| 7.46 | .dl .dk .dv · 19 шт. | spec-table.css | ключ над значенням бере ту саму бровку, що th таблиці. Схоже на заголовок колонки, але це не він |
| 7.51 | .sr · 19 шт. | review-item.css | рядок підсумку лежав у файлі відгуків, бо колись стояв поруч на сторінці |
| 7.52 | мініатюри · 26 оголошень | restock-note.css | групований селектор із трьох імен, з яких файлу належало одне |
| 7.52 | тіло замовлення · 14 класів | account-shell.css | оболонка кабінету тримала те, що відкривається всередині рядка |
Після четвертого переїзду файл нарешті описує одну річ цілком. Жоден із чотирьох не зрушив пікселя.
| Видання | Класи | Екземплярів | Екран |
|---|---|---|---|
| прев'ю на дашборді | .aorder .orow .aord-thumbs .aord-info .aord-actions | 1 | account.html |
| рядок списку | .ord .ord-h .oh-no .oh-date .oh-thumbs .oh-sum .oh-drop | 4 | account-orders.html |
Обидва кажуть одне: номер, дата, мініатюри, сума, дія. Обидва малюють мініатюри однаковими правилами - файл сам це визнав, перерахувавши .aord-thumbs .t і .oh-thumbs i в одному рядку. Різні в них тільки розміри плиток і те, що прев'ю не розкривається.
Не зводжу їх цим кроком
Звести два префікси в один - це перейменування, а перейменування двох сімей на двох екранах рухає пікселі заради імені. Іде в Крок 6, разом з іншими дев'ятьма іменами, що несуть по два значення. Тут воно тільки заміряне й записане.Розмітка звідси - та сама, що на account-orders.html.
.oh-status тут не свій: плашка живе в status-pill.css, бо «Доставлено» і «В дорозі» це та сама плашка, що й скрізьmargin-left: auto відтискає їх і суму праворуч. Три перші плитки беруть три різні фото за позицією, четверта й далі стає «+N»button, тож натискання ловить не стрілка, а вся смугаmargin: --space-16 0 --space-2: заміряно з відкритим замовленням - 33px повітря згори і 2 знизу. Вона перша дитина .ord-body, а тіло вже платить 16 з усіх боків, тож верхній відступ був другою порцією того самого повітря, а 2px знизу приклеювали її до першої товарної лінії. Стало margin: 0 0 --space-16: 17 згори (16 тіла плюс лінія) і 16 знизу. У продукті нотатка лежить у згорнутому замовленні, тож її прямокутник нульовий і повітря з екрана в спокої не заміряти - стан довелось увімкнути руками. Але перепис читає обчислений стиль, а його display:none віддає й далі, тож зміна в A/B видно: 4 рядки, один елемент, дві властивості, чотири ширини. Більше не зрушило нічого.Дві колонки від 820: 1fr 292px. Ліворуч товари й підсумок, праворуч повтор і доставка. Нижче 820 вони стають одна під одною, і «Повторити замовлення» опиняється під підсумком, а не над ним - людина спершу бачить, що і за скільки, і лише тоді кнопку.
.ob-main і .ob-side не оголошені ніде
Обидва є в розмітці по 4 рази й не мають жодного правила в жодному файлі проєкту. Це не поламка: вони - клітинки .ob-grid, і сітка розставляє їх сама. Але той, хто шукатиме, чому ліва колонка поводиться так, а не інакше, шукатиме правило, якого немає.Останнє замовлення
Усі замовлення →restock-note.css ніс таке:
Він вантажиться на 5 імпортів пізніше за цей файл, тому одним рядком перебивав 26 власних оголошень цього файлу про його власні плитки. Прогнано вирішувачем по всіх 40 екранах:
| Ім'я | Побито оголошень | Що це |
|---|---|---|
.rk-ph | - | своє - плитка нотатки про поповнення. Лишилось |
.aord-thumbs .t | 13 | плитка прев'ю замовлення. Повернуто |
.oh-thumbs i | 13 | плитка рядка замовлення. Повернуто |
.ob-line .ph | - | уже відчеплено на кроці 5 і відправлено в account-shell.css |
Рядок починався з чотирьох імен. Крок 5 зняв з нього одне, лишивши записку «кожен уламок належить своєму власнику», і саме ця записка чекала тут дві доби. Той самий рядок із п'яти імен був на 7.50 у section-head.css: групований селектор через компоненти - це не стиль запису, це спосіб втратити правило.
Ці 26 не були поламкою
Структурне правило дає плитці вигляд заглушки: втоплений квадрат із блідим написом «фото». Кольорове правило перетворює її на фотоплитку: колір сторінки під зображенням, напис прихований. Так побудована вся система - шар над шаром. Поламка була в тому, що другий шар писався в чужому файлі, і тому переїзд не зрушив нічого.Третє оголошення групи, border-color: var(--line-hair), не поїхало нікуди: усі три імені вже мали border: 1px solid var(--line-hair) у своєму структурному правилі. Колір, названий удруге тим самим токеном, не малює нічого - сім'я мертвих оголошень 7.3 і 7.51.
| Клас | Екземплярів | Екран |
|---|---|---|
.ord · .ord-h · .ord-body | 4 · 4 · 4 | account-orders.html |
.ob-line · .ln-nm · .ln-tot | 10 · 10 · 10 | account-orders.html |
.dl · .sr | 19 · 19 | account-orders.html |
.ln-review | 4 з 10 | відгук пропонують не на кожен рядок |
.ord-oos | 1 | одне замовлення з чотирьох має недоступний товар |
уся сім'я .aord-* | по 1 | account.html |
Заміряно в браузері по всіх 40 кольорових екранах. Мертвих селекторів: 0 з 57. Усі 57 працюють, і всі 57 працюють на двох екранах - це найщільніший файл системи, і це нормально: замовлення показують у двох місцях, зате повністю.
| Стан | Що робить | Чому так |
|---|---|---|
| згорнуто | .ord-body прихований | список замовлень читають очима по номерах і сумах, а не по вмісту |
| розкрито | .ord.open: тіло видно, шеврон повертається на 180° | стан несе контейнер, а не кнопка: одне джерело правди на весь рядок |
| наведення на шапку | розкривач бере --line-action і --text-action | ціль натискання - уся смуга, тож відгукується та її частина, яка каже «тут відкриється» |
| товар недоступний | .ord-oos: пунктир, бурштиновий акцент у слові, 16 повітря знизу і жодного згори | сказати про перешкоду до кнопки повтору, а не після натискання. Принцип 1 |
| до 640 | шапка стає сіткою grid-template-areas, розкривач перетворюється на смугу «Детальніше» на всю ширину | шість елементів в один рядок на 360 не стають, а квадрат 30 - це нижче за поріг дотику |
| до 640, розкрито | розкривач зникає, знизу з'являється «Згорнути» | інакше на телефоні кнопка згортання лишилась би за екраном угорі |
Правило
Стан несе контейнер, а не кнопка..ord.open вмикає і тіло, і поворот шеврона, і зникнення розкривача на телефоні. Один клас на .ord - і весь рядок узгоджений; поставте його на кнопку, і три правила почнуть розходитись.Антиправило
Не ховай перешкоду під кнопку повтору. «1 товар зараз недоступний» стоїть над «Повторити замовлення», а не в тості після натискання. Дізнатись про заміну після того, як кошик уже зібрано, це не інформація, а сюрприз.Правила вживання, які називають саме цей компонент: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Ряд дій замовлення береться патерном .actions. Власний gap: 8 лишився тут як відхилення.
Сторінка звіряє себе з файлом: 41 власний клас і 5 станів оголошено в order-row.css.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col дзеркалом 619 і --bp-shell-wide. Що саме міняється: нижче 619 шапка замовлення перекладається у сітку з областями (no date / stat sum / thmb / more) і показує кнопку «Детальніше»; від 860 бланк замовлення стає двоколонковим. Було 639 - дзеркало 640, якого в реєстрі немає. Раунд атомів записав це число як «винне раунду організмів»; запис був хибний, бо order-row це молекула, і борг належав цьому раунду.Робота: ВІДПОВІДЬ. Рухається: колір рамки і тексту рядка. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Шеврон рядка повертає .ord.open, а сам перехід повороту живе в icon.css: стан тут, рух там, і це навмисно.
Крок 4: те саме рішення про акордеон, що в шухляді меню, і та сама причина не чіпати висоту - історія замовлень це список таких рядків, і одне відкриття рухає кожен під ним. Тіло проявляється на --dur-base, а шеврон над ним повертається на власному --dur-fast: шеврон це відповідь на дотик, тіло це вміст, що приходить, і це дві різні роботи.
Прочитані з order-row.css: 17 семантичних ролей і 22 примітиви.
| Семантичні ролі (17) | Примітиви (22) |
|---|---|
--bg-bonus-soft --bg-page --bg-sunken --bg-surface --elevation-1 --line-action --line-bonus-soft --line-hair --line-strong --mark-faint --text-action --text-body --text-bonus --text-muted --text-primary --text-secondary --text-warning | --font-mono --fs-8 --fs-10 --fs-12 --fs-14 --fs-16 --fw-black --fw-bold --fw-semibold --lh-snug --ls-caps --radius-8 --radius-12 --size-30 --size-40 --size-52 --space-2 --space-4 --space-8 --space-12 --space-16 --space-24 |
| – | --dur-base --dur-fast --ease-enter --ease-exit --ease-standard |
Повз шкалу: 52px і 56px (плитка товару в рядку), 292px (права колонка), 72px (мінімальна ширина суми), 8px (напис усередині мініатюри), 1.5px у сегменті вкладок, 640px і 820px (дві точки перелому, обидві не з набору 480 / 720 / 1180).
Клас open - на .ord, не на кнопці. Кнопка несе aria-expanded, і це не дублювання: один атрибут для того, хто слухає, один клас для того, хто дивиться.
Три проходи по 40 екранах на чотирьох ширинах: HEAD, HEAD ще раз і робоче дерево. Нульовий прохід 0, різниця 0.
Чотирнадцять класів переїхали на 15 імпортів раніше, два імені повернулись із файлу, що вантажиться на 5 імпортів пізніше, одне мертве оголошення видалено - і жоден із 40 екранів не намалювався інакше на жодному з чотирьох розмірів. Так і має виглядати переїзд.
Вирішувач брехав, і брехня була в бік гіпотези
- Псевдоклас стирався разом із псевдоелементом.
.oh-thumbs i:nth-child(1)(0,2,1) перетворювався на.oh-thumbs i(0,1,1), ставав рівним чужому правилу й програвав за порядком. Перший прогін оголосив мертвими правила, які виграють скрізь - Інструмент бачив сам себе. Заморозка анімацій, додана напередодні, ставила
transition: none !importantна*- і це правило перемагало коженtransitionу продукті. П'ять живих оголошень звітувались мертвими. Перехід виникає лише коли значення змінюється, а на свіжому завантаженні воно не змінюється, тож цей рядок не купував нічого - Chrome без вікна відповідає
prefers-reduced-motion: reduce. Тобтоbase.css:26вимикав переходи на кожному завантаженні, і перепис увесь час читав виняток замість типового випадку. Тепер вимога вказана явно
І втретє за сесію - зворотна лапка в коментарі всередині шаблонного рядка закриває цей рядок. Записано в сам файл інструмента, бо тричі це вже не випадковість.
Чого бракує
- Два префікси на одне поняття -
.aord-*і.oh-*. Крок 6, після етапу 09 - Дві точки перелому повз набір: 640 і 820 проти 480 / 720 / 1180
- Чотири розміри плитки товару в одній сім'ї: 46 у прев'ю, 34×38 у рядку, 52×56 у товарній лінії. Три з них не квадратні й жоден не з драбини розмірів
- Поворот шеврона написано двічі:
.ord.open .chevтут і.trustsec[open] > summary .chevуtrust-strip.css. Одне значення для одного атома в двох компонентах - це стан атома, і жити він має вicon.css - Немає стану «замовлень ще немає» - порожній список малює
empty-state.css, а вкладки.ord-tabsпри цьому лишаються
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.