Відгук
Чужий голос на сторінці товару: хто, коли, скільки зірок, що сподобалось і що ні, і відповідь магазину під ним. Файл, у якому він жив, ніс три сім'ї, і відгуком була одна з трьох.
Заміряно в браузері на 40 кольорових екранах, на 360, 390, 720 і 1280.
| Сім'я | Що це | Де стоїть | Куди поїхала |
|---|---|---|---|
.rvbig .rvbars .rvitem .rvmeta .rvbody .rvreply .revcols | сам відгук | 3 екрани товару | своє. Лишилось |
.sr .sr.total .sr.accrual | рядок підсумку замовлення | 19 штук, усі на account-orders.html, усі всередині .ob-sum у .ord-body | order-row.css |
.recbanner .rbear | панель заспокоєння з ведмедем | 1 штука, product-reviews.html | banner.css |
.sr.accrual фарбує --text-bonus - це бонусний рахунок, сім'я щабля лояльності. Поруч із відгуком вона не стояла ніколи. .recbanner потрапив сюди на етапі 08 кроці 5 просто тому, що його <style> лежав на сторінці відгуків: заголовок того блока сам це й казав - «екран не володіє css».
Третій ведмідь
Напередодні зempty-state.css виїхали двоє: .uiv-bear у seo-text.css і .uiv-bearwrap у trust-strip.css. Цей - третій, і читається так само, як .wfh-logo на 7.50: сторінка, на якій щось лежить, не є компонентом, яким воно є.Розмітка звідси - та сама, що на product-reviews.html.
180px 1fr вище. Автор ліворуч, текст праворуч: до 620 вони стоять один під одним, бо 180 підпису й решта тексту в 360 не вміщуютьсяrating.css і status-pill.css на 7.27 і 7.37.prc, окремими рядками зі своїм b. Їх 10 на 7 відгуків: більшість людей пише або одне, або нічого.rvreply, накладка з лінією --line-action ліворуч. Єдине помаранчеве в блоці, і воно означає «тут говорить магазин»Смужка тримається на трьох мінімальних ширинах. Ліва цифра 1ch, права 3ch, доріжка flex: 1. Тому «103» і «1» не зрушують доріжку одне відносно одного, а доріжка з'їдає весь залишок - п'ять рядків читаються як одна шкала, а не як п'ять різних.
Заливка - --bg-inverse на --bg-rule. Помаранчевого тут немає навмисно: розподіл оцінок це факт, а не дія, а акцент у системі означає «сюди натискати».
.revcols - один стовпчик до 860, minmax(0, 1fr) 300px вище. Єдиний екземпляр у продукті: тільки product-reviews.html, де відгуків достатньо, щоб зведення поїхало вбікminmax(0, 1fr), а не 1fr: без нуля довге слово у відгуку роздуває колонку й вивалює сітку за екран. Це та сама пастка, що й у .led-wrap на 7.48.
Кольорова половина .sr мала чотири оголошення. У order-row.css поїхали два.
| Оголошення | Спец. | Що робило | Доля |
|---|---|---|---|
.sr span:last-child{ font-family: mono } | 0,2,1 | колонка сум моношрифтом | переїхало |
.sr.accrual span:last-child{ color: bonus } | 0,3,1 | нарахування бурштиновим | переїхало |
.sr.total{ border-top-color: --line-strong } | 0,2,0 | нічого: скорочення двома блоками вище вже ставило цей самий колір із цього самого токена | видалено |
.sr.total span:last-child{ font-weight: semibold } | 0,3,1 | малювало - і в цьому річ | видалено, і це видно |
Слово було жирніше за число
У рядку «Разом».sr.total span (0,2,1) давав обом половинам --fw-black, а .sr.total span:last-child (0,3,1) перебивав праву назад на --fw-semibold. Виходило, що підпис «Разом» важчий за суму, заради якої рядок і читають. Друге оголошення знято, підсумок став 800 обома половинами.Після зняття .sr span:last-child (0,2,1) і .sr.total span (0,2,1) рівні за специфічністю, і розводить їх лише порядок у файлі. Тому переїзд зроблено байт у байт, зі збереженням порядку рядків: перемішай їх - і підсумок мовчки повернеться до 600.
| Клас | Екземплярів | Екранів | Робота |
|---|---|---|---|
.rvitem | 7 | 3 | один відгук |
.rvbar | 15 | 3 | п'ять смужок розподілу на трьох екранах |
.prc | 10 | 3 | переваги й недоліки: 10 рядків на 7 відгуків |
.rvbig · .rvbars | 3 · 3 | 3 | зведення оцінки |
.rvreply | 3 | 3 | відповідь магазину. Є під трьома відгуками з семи |
.revcols | 1 | 1 | дві колонки, тільки на сторінці відгуків |
Екрани: product.html, product-coach.html, product-reviews.html. Мертвих селекторів: 0 з 20.
Шапка відгуків живе не тут. .rvhead зі своєю сіткою 190px 1fr auto оголошена в section-head.css, а .rvbig усередині неї - у цьому файлі. Це не помилка: .rvhead справді заголовок розділу. Але два файли тримають один блок, і про це треба знати, змінюючи будь-який із них.
Два стани заведено на 8.16, і обидва не коштували файлу жодного оголошення. Перший - нуль відгуків. Зведення оцінки при цьому не має що показати, і рішення тут таке: воно не показує нічого. Замість .rvhead - цифри 50px, п'яти смужок і кнопки - стає одна коробка .emptybox.mini з empty-state.css, а кнопка переїжджає всередину неї в .eact, тим самим набором класів, що вже стоїть на account-empty.html.
Відгуки покупців
rating.css, бо це питання цифри, а не блока. Значка в коробці немає навмисно - єдиний гліф, яким цей продукт малює відгук, це зірка, а зірка 34px над словами «Відгуків ще немає» має форму оцінки в один бал. Коробка без значка вже є в продукті: account-empty.html, блок адресДругий - кінець списку. Пара до пагінації каталогу, закритої на 8.15: кнопка «Показати ще» зникає, на її місце стає .loadnote, а номери сторінок лишаються робочими - список закінчився, навігація ні.
.loadnote з empty-state.css, .pgnav і вимкнена стрілка з pagination.css. Цей файл володіє тільки .rvitem над ними, і тому в ньому про цей стан лише коментар, а не правило| Стан | Що робить | Чому так |
|---|---|---|
| спокій | автор над текстом, лінія-волосина згори | відгуки читають стрічкою, і розділяє їх найтонше, що є в системі |
| без відповіді | .rvreply просто немає | 4 відгуки з 7 без відповіді, і це нормальний вигляд, а не порожнє місце |
| без переваг | .prc немає, текст іде першим | поля необов'язкові у формі відгуку |
| від 620 | min-width: 620px: автор стає окремою колонкою 180px | нижче 620 колонка 180 лишає тексту менше половини рядка |
| від 860 | min-width: 860px: .revcols розкладається на дві колонки | зведення вбік має сенс тільки тоді, коли основній колонці лишається не менш ніж 500 |
| наведення | немає власного | відгук не натискають. Натискають кнопку в шапці, і вона відповідає своїм фінішем |
| нуль відгуків 8.16 | .rvhead зі зведенням і список не малюються зовсім; на їхньому місці .emptybox.mini з наявною кнопкою всередині | середнє з нічого - не менше число, а не число. Оголошень: 0, усе малюють атоми empty-state.css |
| кінець списку 8.16 | «Показати ще» зникає, на її місці .loadnote; номери сторінок лишаються | мертвий контрол запрошує натиснути й нічого не відповідає. Оголошень: 0, і форма вже написана в pagination.css на 8.15 |
Правило
Відповідь магазину має рівно одну лінію акценту і жодного заповнення. Голос продавця під чужим відгуком мусить бути видимим і не мусить бути гучнішим за сам відгук. Принцип 1: спершу довіра, потім продаж.Антиправило
Не фарбуй розподіл оцінок акцентом. П'ять помаранчевих смужок читаються як п'ять кнопок. Це факт про товар, а не дія, тому заливка ---bg-inverse.У відповіді магазину чип носить .lg: без заливки, з акцентним краєм. Це не другий вигляд чипа - це те саме слово, сказане тим, хто відповідає, а не тим, хто питає, і край каже, з якого боку розмови воно звучить.
Сторінка звіряє себе з файлом: 17 власних класів і 6 станів. Чотири перші оголошені в review-item.css; два останні - нуль відгуків і кінець списку - навпаки, ті, під які файл навмисно не має жодного оголошення. Вони в списку саме тому: у коді їх не видно, тож холостий контроль стежить, щоб їх було видно тут.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу: обидва, і обидва вже були в реєстрі.--bp-grid-2col ставить мета-колонку відгуку зліва (180px 1fr), --bp-shell-wide дає сторінці відгуків бічну колонку 300px. Раунд молекул нічого не змінив: тут не було чого складати.Прочитані з review-item.css: 9 семантичних ролей і 19 примітивів.
| Семантичні ролі (9) | Примітиви (19) |
|---|---|
--bg-inverse --bg-rule --bg-surface --line-action --line-hair --text-body --text-muted --text-primary --text-secondary | --container-text --font-display --font-mono --fs-12 --fs-14 --fw-black --fw-bold --lh-airy --lh-flat --ls-caps --radius-12 --radius-4 --radius-8 --space-12 --space-16 --space-2 --space-24 --space-4 --space-8 |
Повз шкалу: 50px (цифра оцінки), 7px (висота доріжки), 180px і 300px і 36px (колонки й проміжок сіток), 1.5px і 2px (дві товщини ліній), 620px і 860px (дві точки перелому).
Два класи всередині розмітки відгуку належать іншим файлам, і це видно з коментарів. Зірки й плашка покупки виїхали двома окремими кроками, бо під іншими іменами робили те саме, що вже вміли сусіди.
Три проходи по 40 екранах на чотирьох ширинах, 160 завантажень кожен: HEAD, HEAD ще раз і робоче дерево.
Різниця: 16 рядків, одна властивість, один екран - font-weight: 600 -> 800 на чотирьох підсумкових сумах account-orders.html, на кожній із чотирьох ширин. Рівно те, що оголошено вище, і нічого більше. Переїзд .sr у файл, який вантажиться на 6 імпортів раніше, і переїзд .recbanner у файл на 19 імпортів раніше не зрушили жодного пікселя.
Інструмент довелось лагодити тричі, і всі три поламки були в нульовому проході
- 56 рядків анімації. Пульс скелетів і спінер входу не зупиняються ніколи, тож перепис ловив їх у різних фазах. Тепер сторінка отримує
animation-play-state: pausedще до першого вузла - обидва проходи однаково, від нульового кадру - 563 рядки на одному екрані з сорока. Один шрифт не встиг, сторінка злічилась у запасній гарнітурі й стала на 37.6px вища. Осідання чекало кількість завантажених накреслень, а це підміна: чекати треба, щоб перестала рухатись висота
- 231 рядок на іншому екрані. Те саме, вже після поправки: кеш чистився перед кожним із 160 завантажень, тож шрифти щоразу тягнулись мережею наново. У межах одного проходу стилі не змінюються - кеш чиститься один раз на початку, і додано очікування, поки мережа стихне
Різниця в 16 рядків не зрушила ані на рядок у жодному з чотирьох прогонів. Це і є те, заради чого нульовий прохід існує: він міряє шум, і поки шум більший за знахідку, знахідки немає.
Чого бракує
- Сирі пікселі панелі заспокоєння - 18, 20, 10, 26, 92, 5, 68. Жодного немає на шкалі 2/4/8/12/16/24/32/40, тож вони переїхали в
banner.cssнедоторканими: значення переносять, а не виводять заново - Три точки перелому повз набір: 559 у панелі, 620 і 860 тут - проти 480 / 720 / 1180, якими користується решта
- Дві товщини ліній у одному файлі:
1pxміж відгуками,1.5pxу плашці «Stack»,2pxу відповіді.1.5pxбула частиною рішення на 23 файли, і браузер усе одно малював її одним пікселем - закрито на 7.62, у файлі тепер1pxі2px - Кегль 50px - шкала не має ні цього кінця, ні протилежного
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.