Блок опису
Чотири абзаци й чотири кадри на сторінці товару - там, де закінчуються таблиці й починається розповідь. Найменший файл із розібраних, і в ньому знайшлось те, чого в жодному не було: вигляд, який жив у скрипті.
Розмітка звідси - та сама, що на product.html. Фото підставляє design/_nav.js, як і в продукті.
.pdesc - 800 у ширину, по центру. Це єдина колонка тексту в продукті, яка себе обмежує: рядок довший за 800 читається гірше, а решта сторінки товару це таблиці й картки, які міряють себе інакше.pd-tx - 16 / --lh-airy. Основний кегль, а не зменшений: це не примітка під таблицею, це те, заради чого сюди дочитали--text-primary, на пів тону темніше за абзац. Виділяється назва і число, а не речення.pd-img - aspect-ratio: 16/6. Ширину обирає колонка, тож коробка називає пропорцію, а не два числа. Те саме правило, що на квадратах картки товару (7.68), протилежний випадокПринцип 5 цілком: звичайні слова згори, глибина знизу. Склад, дозування і сертифікат вище на сторінці й у таблицях; тут - те саме людською мовою, для того, хто читає, а не звіряє.
П'ять інлайн-властивостей на кожен із восьми кадрів. Дані з них - одна: яке фото. Решта чотири це вигляд коробки, і три з них повторювали те, що таблиця стилів уже казала за два рядки звідси.
| Інлайн писав | Таблиця стилів казала | Що це було |
|---|---|---|
borderStyle: solid | border: 1px solid var(--line-hair) | повтор |
backgroundPosition: center | background: ... center ... | повтор |
backgroundRepeat: no-repeat | background: ... no-repeat | повтор |
backgroundSize: auto 84% | background: ... center/contain ... | розбіжність |
backgroundImage: url(...) | - | дані |
Четвертий рядок - той, заради якого це знахідка, а не прибирання. contain у файлі жодного разу не намалювався, і при цьому читався як правда: хто відкриє desc-block.css, побачить «вписати в коробку», а на екрані стоїть 84% висоти. Інлайн-стиль тим і поганий, що таблиця стилів його не бачить, а людина, яка читає таблицю стилів, не бачить інлайну.
Правило
Скрипт ставить дані, таблиця стилів ставить вигляд. «Яке фото» - дані. «Наскільки воно велике в коробці» - вигляд, і він мусить лежати там, де його шукатимуть.84% - це власне поле рендера: продуктові знімки приходять зі студійним повітрям навколо, і заливка від краю до краю це повітря зрізала б. Підлога лишається --bg-page, білою, а не теплою поверхнею: у знімків свій м'який фон, і тепла заливка під ними читалась би як сіра коробка, домальована навколо товару.
auto 84% · 50% 50% · no-repeat · solid - однаково до і післяСередній рядок при (0,2,0) переважив обидва сусідні - і не сказав нічого нового. Його font-size дорівнює тому, що ставить рядок під ним; його line-height дорівнює тому, що ставить структура над ним. Два оголошення виграли, два оголошення померли, і жоден піксель від цього не залежав - але файл читався так, ніби текст опису стилюють у двох місцях.
Стилюють в одному. Знято; заміряно 16 елементів на двох екранах: 16px / 1.7 до і після.
Заголовок «Опис» бере мірку колонки, під якою стоїть. До 7.73 це правило звалось section[aria-label="Опис"] .sech - речення інтерфейсу в ролі селектора, - і його полагодили так: не питати, як секція називається, а спитати, що стоїть після заголовка. Тому .pdesc тут не просто клас: це якір для сусіда, і перейменувати його означає зрушити заголовок.
А .pd-block не оголошений ніде
Вісім екземплярів у розмітці, нуль правил у всій системі. Обгортка справді потрібна - саме вона є елементом флексу і саме між ними лягає крок 32, - але працює елемент, а не ім'я. Клас без жодного правила це або залишок, або гачок на майбутнє, і з коду не видно, що з двох. Записано в перейменування, крок 6, який за правилом іде після етапу 09.| Стан | Що робить | Чому так |
|---|---|---|
| спокій | текст, під ним кадр 16:6 | єдиний стан, який у блока є |
| до підстановки фото | у коробці слово «зображення», --text-muted | сірий прототип лишає рамку з підписом; у кольорі це видно частку секунди, поки не спрацював скрипт |
| вужче за 800 | колонка стискається до ширини сторінки | max-width, а не width: обмеження зверху, а не розмір |
| опису ще немає | замість абзаців - коробка .emptybox.mini усередині тієї самої колонки | у товару без опису нема чого читати, але є що сказати: перевірене вже стоїть нижче |
| наведення | немає | тут нема на що натискати. Ані кадр, ані абзац нікуди не ведуть |
| фокус | немає | жодного контрола в блоці, і це правильно: опис читають, а не керують ним |
Опис від виробника приходить із накладною, а не з товаром, і між «завели картку» та «отримали офіційний текст» проходить час. Досі в цей проміжок блок просто зникав - і зникав мовчки, разом із заголовком «Опис», тож сторінка виглядала так, ніби опису в цього товару не буває.
Опис
product.html: 358 x 170.8, поле 24/16, рамка 1px #E9E7E2, тло #FAF9F7 · тут, у вужчій колонці стенда: 308 x 193.2. Нових оголошень у desc-block.css: 0.emptybox.mini з empty-state.css, без жодного модифікатора звідси. Коробка порожнього стану вже намальована один раз; компонент, який домалював би собі свою, розвів би два вигляди на одну ідею.mini, а не .empty. .empty це пунктирна рамка з портретом ведмедя на цілий екран результатів. Тут сторінка не порожня: угорі галерея, ціна й кнопка, унизу склад і сертифікат. Ведмідь посеред сторінки товару перекричав би саме те, на що текст показує.mini, а не .emptybox без нього. Коробка без .mini просить 46px поля, і це число не малюється в кольорі жодного разу: усі три кольорові коробки продукту - .mini. 40, 46 і 48 на одну ідею це відкрите рішення етапу 09 (empty-state.html), і не крок про опис товару має його закривати.pdesc, а не замість неї. section-head.css:72 тримає заголовок «Опис» на мірці .sech:has(+ .pdesc) - прибрати колонку означає зрушити заголовок на всю ширину сторінки. Усередині колонки коробка отримує ті самі 800 і ту саму вісь безкоштовно.emptybox .ei має font-size: 0, а знак ставить uivIcons(), який читає одну мапу - UIV_EMOJI в design/_nav.js. doc і chat намальовані в icons.js і обидва пасували б, але рядка в тій мапі не має жоден: набраний тут емодзі або вийшов би сирим системним знаком серед знаків із набору, або, всередині .ei, не вийшов би взагаліПринцип 1 у два речення. Перше знімає сумнів: склад і дозування на місці, перевірені, дивіться нижче. Друге називає причину й обіцянку без дати: «щойно отримаємо офіційний текст». Не вигадуємо опис самі і не вибачаємось - те саме антиправило, що в порожнього стану лістингу.
Правило
Опис розповідає, а не перелічує. Склад і дозування вже стоять таблицею вище; тут те саме словами - для того, хто хоче зрозуміти, а не звірити. Один абзац - одна думка, і кадр поруч показує саме її.Антиправило
Не роби з опису другий продажний блок. Ні знижки, ні кнопки, ні «залишилось мало» посеред тексту. Принцип 4: спокійно й упевнено. Купити пропонують угорі, тут - пояснюють.Сторінка звіряє себе з файлом: 3 власні класи і 1 стан. Стан не додає класу - він названий у файлі й позичений з empty-state.css, тож у списку класів його немає і бути не мало б.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу: жодного. Блок опису плинний - це текст у колонці, яку задає його місце. Раунд молекул його не чіпав.Прочитані з desc-block.css: 5 семантичних ролей і 6 примітивів.
| Семантичні ролі (5) | Примітиви (6) |
|---|---|
--bg-page --line-hair --text-body --text-muted --text-primary | --container-text --fs-16 --lh-airy --radius-12 --space-12 --space-32 |
Повз шкалу два числа: 1px рамки і 800px колонки. Друге - міра читабельного рядка, а не відступ, тож у шкалу відступів воно й не мало б лягти; але воно написане тут і ще раз у section-head.css, і два місця для одного числа - це той самий випадок, що вже закривали для інших значень. Кандидат на токен, рішення - етап 09.
Три проходи по 40 екранах на чотирьох ширинах: HEAD, HEAD ще раз і робоче дерево. Нульовий прохід 0, різниця 0, 215 452 елементи з кожного боку.
І тут нуль сам по собі нічого не доводить: перепис не заміряє background-size, background-position, background-repeat і border-style - тобто рівно ті чотири властивості, які цей крок переносив. Заміряно окремо, властивість за властивістю, на двох екранах і трьох ширинах, на обох серверах: однаково.
Чого бракує
.pd-blockбез жодного правила - вісім екземплярів, нуль оголошень. Перейменування, крок 6- 800px у двох файлах - тут і в
section-head.css. Кандидат на токен міри тексту - Кадр не має підпису -
altу фонового зображення не буває, і для читача з екрана чотири кадри опису мовчать - Довжина опису не обмежена - «читати більше» тут немає, на відміну від SEO-блока каталогу
- Дві мертві мірки в атома, і файл не наш. Знайдено, поки будувався стан вище: без
.eiзгори й без.eactзнизу.emptybox.mini .etтримає свої 8 згори, а.emptybox .es- свої 16 знизу, тож у коробки з полем 24 виходить 32 над заголовком і 40 під текстом.account-empty.htmlуже латає свою копію інлайномstyle="margin-top:0", іempty-state.htmlназиває цей інлайн дефектом. Виправлення -:first-child/:last-childвempty-state.css, один раз на всі коробки без значка, а не окремо в кожному компоненті, який таку коробку вживає
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.