Заголовок секції
Найменший файл системи з тих, що лишились, і найпростіша робота: сказати, де починається розділ, і дати з нього вихід. Крок, який його розібрав, знайшов не поламану верстку, а рядок, що називав п'ять речей, з яких цьому файлу належала одна.
Розмітка звідси - та сама, що на home-buyer.html і listing.html.
.sech це space-between, тож самотній заголовок просто стоїть ліворуч, і порожньої дірки праворуч не лишаєтьсяh2, дисплейна 24/600 з --ls-lead. Вирівняні по базовій лінії, а не по центру: заголовок 24 і посилання 14 поруч виглядають криво за будь-якого іншого вирівнювання.all на фініші .btn--text. Єдина текстова кнопка продукту, що говорить тихіше за текст навколо: --text-secondary замість основного--text-action і підкладку --bg-surface. Від'ємні поля тягнуть підкладку за межі рядка, щоб вона не рухала базову лініюФайл ніс таке:
Кожне оголошення прогнано через вирішувач по всіх 40 кольорових екранах: для кожного елемента, який селектор бере цю властивість насправді.
| Ім'я | Збігів | Перемог | Що це |
|---|---|---|---|
.lh1 | 7 | 7 | своє - H1 лістингу. Лишилось |
.seotext .h | 9 | 9 | чуже, живе - заголовок SEO-блока. Поїхало в seo-text.css |
.wfh-logo | 68 | 0 | чуже й мертве: header.css:169 і :172 кажуть обидві властивості самі, а header вантажиться на 19 імпортів пізніше |
.empty-h | 0 | 0 | такого класу немає ніде в репозиторії |
.estate h2 | 0 | 0 | такого класу немає ніде в репозиторії |
Два останні - не половина, що чекає
Етап уже тричі відмовився видаляти правило, у якого немає кольорового близнюка:.tband на 7.44, .led-empty на 7.48, .emptybox без .mini на 7.49 - усі троє живуть у сірому шарі. Ці двоє шукались у design/, у wireframes/ і в _wf.css: єдина згадка в проєкті була цим рядком. Видалено.І це поправка до того, що я сказав напередодні
Обираючи компонент, я сказав, що цей файл фарбує логотип шапки на 34 екранах, і це було невірно. Він намагається і програє 68 разів із 68. Число «34 екрани» було правдою про розмітку й неправдою про те, хто її малює.Цей крок розібрав рядок із п'яти імен і лишив .lh1 собі. Через шість кроків статичний скан знайшов, що сама властивість була мертва ще до переїзду:
Той самий селектор, та сама специфічність, наступний рядок. --ls-lead це -.01em, --ls-display це -.02em, і на екран потрапляло друге. Крок читав той рядок як п'ять імен і не спитав, чи виживає властивість для того імені, яке лишилось. Ім'я було правильне, оголошення вже було мертве. Знято, A/B нуль.
Знайшов не браузер
Вирішувач у браузері складав вердикти під ключем «селектор + властивість», тож два правила з однією властивістю під одним селектором зливались в одну відповідь «іноді виграє». Знайшов статичний скан: та сама властивість, той самий селектор, та сама медіа-умова, двічі в одному файлі. 200 мілісекунд на 74 листи проти восьми хвилин на один. Дешевший інструмент побачив те, чого не бачив дорогий..relh - над блоком схожих категорій у лістингу (2 екрани), .mech-kicker - над механізмом лояльності в кабінеті (2 екрани)Обидва були написані п'ятьма однаковими оголошеннями в одному файлі за двадцять рядків одне від одного: 12 / --fw-black / uppercase / --ls-caps / --text-muted. Різнився тільки відступ, а відступ - це розташування, а не обличчя, тож він лишився окремим рядком.
І в .mech-kicker було друге видання в іншому файлі. account-shell.css називав ті самі два властивості тими самими токенами і вигравав їх лише тому, що вантажиться пізніше - імпорт 71 проти 63. Клас належить заголовку секції; власна бровка картки кабінету лишилась там.
Прочитано з усіх файлів системи: 22 селектори в 14 файлах роблять одне й те саме - великі літери з --ls-caps. І роблять по-різному.
| Вісь | Скільки значень | Як розподілено |
|---|---|---|
| розмір | 2 (+2 без розміру) | --fs-12 ×14, --fs-10 ×6, і у двох розміру немає взагалі |
| вага | 3 (+3 без ваги) | --fw-black ×14, --fw-bold ×4, --fw-medium ×1 |
| колір | 5 | --text-muted, --text-secondary, --text-primary, --text-oninverse, і без кольору |
Цей крок звів дві з двадцяти двох - ті, що лежали в одному файлі. Решта - рішення про значення на 14 файлів, і воно йде в етап 09 цілим питанням, а не розмінюється по одному файлу. Той самий підхід, що з 1.5px: знайдено на 7.49, вирішено одним рішенням на 7.62.
Протеїн 84 товари
Спортивне харчування - інтернет-магазин Stack
126 відгуків
190px 1fr auto вище. Оцінка, розподіл і дія стають в один рядок рівно тоді, коли для трьох є місце| Клас | Екземплярів | Екранів | Робота |
|---|---|---|---|
.sech + h2 | 37 | 10 | межа розділу. Найчастіший заголовок продукту |
.sech .all | 28 | 8 | вихід із розділу. Є не в кожного: 37 заголовків проти 28 виходів |
.lh1 | 7 | 7 | H1 лістингу, 30px, з лічильником товарів поруч |
.homeh1 | 4 | 4 | H1 головної: 16px і вторинним кольором - SEO-рядок, а не заголовок екрана |
.rvhead | 3 | 3 | шапка відгуків: сітка 190/1fr/auto від 620 |
.relh · .mech-kicker | 2 · 2 | 2 · 1 | бровки |
.homeh1 варте окремого слова. Це єдиний H1 у продукті, який навмисно виглядає не як заголовок: 16px, --fw-medium, --text-secondary. Головна починається не з назви магазину, а з роботи людини, і H1 тут потрібен пошуковій системі, а не оку. Принцип 2: одна головна дія на екрані, і це не читання власної назви.
| Стан | Що робить | Чому так |
|---|---|---|
| спокій | заголовок ліворуч, вихід праворуч, обидва по базовій лінії | рядок читається як одна фраза, а не як два блоки |
| наведення на вихід | --text-action + підкладка --bg-surface | підкладка тримається на від'ємних полях, тому базова лінія не зрушує ні на піксель |
| без виходу | заголовок лишається ліворуч | дев'ять розділів із тридцяти семи не ведуть нікуди, і це нормально |
| вузько | заголовок і вихід переносяться, бо gap і flex | на 360 «Спортивне харчування під вашу ціль» не вміщується в один рядок з «Усі категорії» |
| натискання | немає власного | натискають посилання, і воно відповідає фінішем .btn--text, а не цим файлом |
.sech - на межі будь-якого розділу, де далі йде список. .lh1 - один раз на лістингу. .homeh1 - один раз на головній. Бровку - там, де над блоком треба сказати, що це за блок, і слово це службове, а не назва.
Вихід ставлять тоді, коли є куди йти. «Усі товари →» над списком із трьох товарів - обіцянка без змісту.
Правило
Заголовок і вихід стоять на одній базовій лінії. Це рядок, а не два елементи поруч: 24px і 14px, вирівняні по центру, дають криву, яку видно навіть тому, хто не знає, чому.Антиправило
Не роби вихід гучнішим за заголовок. Він--text-secondary навмисно: людина прийшла читати розділ, а не йти з нього. Це єдина текстова кнопка продукту, що говорить тихіше за оточення..sech--rule - той самий заголовок розділу, але з правилом під ним: він відкриває блок усередині довгої прози, де самої лише жирності замало, щоб око знайшло межу.
Умови повернення
Текст розділу, який цей заголовок відкриває.
Ті самі шість оголошень - 12, капс, приглушене - писались у системі чотири рази. 7.50 звів два з них в одну редакцію; ще два жили в contacts-block.css і quiz.css і відрізнялись лише вагою. Це не дрейф, це щабель, і різниця в тому, НАД ЧИМ брова стоїть: чорна відкриває розділ сторінки, де поруч заголовок і лінійка; жирна підписує поле всередині панелі, де капсом більше нічого немає і чорна кричала б.
Сторінка звіряє себе з файлом: 7 власних класів і 3 стани оголошено в section-head.css.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col. Що саме міняється: шапка блоку відгуків стає трьома колонками (190px 1fr auto). Число вже стояло на реєстрі; раунд молекул нічого не складав.Робота: ВІДПОВІДЬ. Рухається: колір посилання «усі». Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Друге з двох посилань, які раунд 1 передав сюди.
Прочитані з section-head.css: 7 семантичних ролей і 21 примітивів.
| Семантичні ролі (7) | Примітиви (21) |
|---|---|
--bg-surface --line-hair --text-action --text-body --text-muted --text-primary --text-secondary | --dur-fast --ease-standard --font-display --fs-12 --fs-16 --fs-24 --fs-display --fw-black --fw-bold --fw-medium --fw-semibold --ls-caps --ls-display --ls-lead --radius-8 --space-12 --space-16 --space-24 --space-32 --space-4 --space-8 |
Три числа повз шкалу: 190px (колонка шапки відгуків), 620px і 800px (дві точки перелому, обидві не з набору 480 / 720 / 1180, яким користується решта системи).
.all - це гачок, а не оформлення: обличчя дає фініш .btn--text, а цей файл додає до нього одну вагу, один колір і white-space: nowrap. Фініш оголошує font-size: inherit і font-weight: inherit навмисно, тож компонент мусить сказати тип у себе - це правило, а не протікання.
Слабке місце
section[aria-label="Опис"] .sech{ max-width: 800px; margin-inline: auto } - оформлення, підвішене на український рядок усередині атрибута доступності. Це п'яте таке правило в системі; інші чотири знайшлись напередодні в empty-state.css. Перейменують ярлик - і опис товару розтягнеться на всю ширину.Якорі: .sech .lh1 .relh
Заміряно в браузері на 360, 390, 720 і 1280 по всіх 40 кольорових екранах: 37 заголовків розділу на 10 екранах і 28 виходів на восьми. Мертвих селекторів: 0 з 14 - двоє мертвих поїхали з файлу цим кроком.
A/B у три проходи: нульовий прохід 0, різниця 0. Крок нічого не намалював інакше - він прибрав із файлу те, що ніколи не малювалось, і віддав сусідові те, що малювало не своє.
Чого бракує
- Одне обличчя для бровки на 22 селектори в 14 файлах - два розміри, три ваги, п'ять кольорів
- Дві точки перелому повз набір: 620 і 800 проти 480 / 720 / 1180, якими користується решта
- Оформлення на
aria-label- п'яте правило системи, що тримається за український рядок - Немає стану «розділ порожній» - якщо в розділі нічого немає, заголовок і «Усі товари →» все одно стоять
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.