Схожі товари
П'ять слів у рамках під каталогом: куди ще піти, коли тут не знайшлось. Найменший файл системи - 14 рядків, 4 селектори, жодного мертвого оголошення. І він малює те саме, що вже малює сусідній компонент, тільки інакше.
Розмітка звідси - та сама, що на listing.html, під SEO-блоком.
.relrow - флекс із переносом, крок 8. Слів може бути три або дванадцять, і ряд не мусить про це знати.relbox - 14/700, --text-secondary, радіус 8. Тихіше за основний текст: це не дія екрана, це вихід із нього.relh, і вона не з цього файлу: 12 / чорний / великими живуть у section-head.css, де 7.50 звело дві бровки в одну редакціюЦе SEO-компонент, і він при цьому чесний. Такий блок часто роблять складом ключових слів; тут п'ять справжніх розділів каталогу, і кожен веде туди, куди обіцяє. Принцип 5: звичайні слова, і за ними справжня глибина.
«Слово в рамці, яке натискають і потрапляють у відфільтрований каталог» на listing.html намальоване двічі: .flink у рейці фільтрів і .relbox тут. Заміряно поруч, на одному екрані:
.flink · рейка | .relbox · підвал | |
|---|---|---|
| коробка | 131 x 40 | 93 x 48 |
| відступ | 8 / 12 | 12 / 16 |
| радіус | 100 - пігулка | 8 - прямокутник |
| вага | 600 | 700 |
| чорнило | rgb(28,28,28) | rgb(91,91,84) |
| край · фон · кегль · гарнітура | однакові: rgb(217,217,217) · біле · 14 · Inter | |
| куди веде | listing.html, обидва | |
Чотири властивості збігаються, п'ять розходяться, і в коді ніде не сказано, що вони мусять розходитись. Аргумент на користь різниці є: .flink звужує цей список, .relbox веде в інший. Але цей аргумент ніде не записаний, тож із файлів його не видно, а з екрана видно дві пігулки різної форми поруч.
Не зведено цим кроком
Обрати одну форму - рішення про вигляд, і воно зачіпає 12 посилань рейки на семи екранах плюс ці десять. Записано вarchitecture.md, родина B1 - «одна ідея під двома іменами». Це та сама форма, що вже закривали для щабля лояльності, статус-пілюлі й бейджа знижки; різниця в тому, що там значення збігалися й розходились імена, а тут ім'я одне на дві геометрії.| Стан | Що робить | Чому так |
|---|---|---|
| спокій | рамка --line-strong, текст --text-secondary | тихіше за основний текст сторінки: блок пропонує, а не кличе |
| наведення | край і текст ідуть в акцент | обидва разом, бо натискається вся коробка, а не слово в ній |
| фокус | кільце браузера, синє rgb(0, 95, 204) | заміряно натисканням Tab, :focus-visible справді збігся. Своє кільце система оголошує і тут не використовує |
| натиск | немає власного | звичайне посилання, браузер відповідає сам |
| відвідане | немає | у системі немає :visited взагалі, і для блока «куди ще піти» це найпомітніший пропуск |
Правило
Кожне слово веде туди, де справді є товари. «Гейнери» відкривають гейнери, а не пошук за словом. Блок під каталогом - останнє, що бачить той, хто не знайшов; він або допоможе, або підтвердить, що шукати нема де.Антиправило
Не роби з нього хмару ключових слів. Двадцять фраз у рамках - це склад для пошукача, а не допомога людині. П'ять справжніх розділів корисніші за двадцять формулювань одного.Сторінка звіряє себе з файлом: 2 власні класи і 1 стан.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу: жодного. Блок «схожі товари» плинний - він ставить сітку карток, а колонки рахуєproduct-grid.css. Раунд молекул його не чіпав.Робота: ВІДПОВІДЬ. Рухається: рамка і колір картки. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Прочитані з related.css: 5 семантичних ролей і 6 примітивів.
| Семантичні ролі (5) | Примітиви (6) |
|---|---|
--bg-page --line-action --line-strong --text-action --text-secondary | --fs-14 --fw-bold --radius-8 --space-8 --space-12 --space-16 |
| – | --dur-fast --ease-standard |
Повз шкалу одне число - 1px рамки. Разом із badge.css, counter.css, overlay.css і pagination.css це найчистіший кінець системи: усе, що можна взяти з набору, взято з набору.
Цей файл крок 7.80 не змінював: у ньому нема чого виправляти. Три проходи по 40 екранах підтверджують і це - нульовий прохід 0, різниця 0.
Вирішувач по всіх 4 селекторах: жодного мертвого оголошення і жодного селектора без збігів. Із тринадцяти молекул, які перепис 7.75 пройшов разом, таких файлів три.
Чого бракує
- Дві форми однієї ідеї -
.flinkі.relbox. Розібрано вище, рішення про вигляд - Немає
:visited- ні тут, ні деінде в системі. Для блока «куди ще піти» це означає, що людина не бачить, куди вже ходила - Своє кільце фокуса - питання відкрите разом із
.brandboxі.certthumb - Звідки беруться п'ять слів - у коді вони написані вручну, і правила «які запити схожі» немає ніде
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.