Мітка наявності

Кожне правило цього файлу було прив'язане до .pcard - тобто компонент існував тільки всередині картки товару. Ця сторінка доводила це раніше, ніж хтось узявся б сперечатись: демо вище пише <div class="pavail low"> без картки навколо, і рендерилось чорним, 16px, без жодного стилю. Холостий контроль репортував це кілька кроків поспіль («2 з 5 класів немає взагалі: in out»), і це читалось як проблема стенда. Це була проблема області дії.

Чотири імені для одного рядка, у чотирьох файлах, три з них однакові до значення. Зміряно в браузері по 39 кольорових екранах:

Перші три збігаються в кожному зміряному значенні й різняться лише тим, у якій коробці стоять. .bbavail на сходинку більший, бо PDP - екран, де ухвалюють рішення, і рядок там читають, а не проглядають. Це єдина справжня різниця в наборі, тому вона єдина лишається варіантом.

Кожен такий рядок починався з символу ●, який лежав у розмітці:

107 штук на 17 кольорових екранах - і 108-ма, написана як CSS у status-pill.css (content: "● "). Тобто одна крапка мала три редакції: надрукована, згенерована і .hdots i, єдина, яка коли-небудь була формою.

6px, одне значення, і воно виведене, а не вибране: 5.16 і 6.02 - те, що дав шрифт на двох сходинках, а 6 - ціле число між ними. Сходинка 12px додає 0.84px крапки, сходинка 14px віддає 0.02. currentColor - щоб крапка йшла за станом без другого правила на колір: чотири стани, чотири селектори, а не вісім. Проміжок --space-4 - те, що вже давав пробіл: зміряно 3.9px від чорнила до слова.

Ту саму форму взяли й статус-пілюлі замовлення - .oh-status і .aord-status, ще 5 екземплярів. Одна крапка, одне оголошення, чотири родини.

Одна різниця в наборі, і вона названа: полиця проглядається, PDP читається.

Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.

На картці, у сітці та в Блок покупки. Це чесність, а не продаж: принцип 1 вимагає сказати про порожній склад до того, як людина натисне.

.ci-oostag у cart-row.css стверджує той самий факт - «Немає в наявності» - і має іншу форму: пілюля, 10px IBM Plex Mono, на запалій землі з волосяним краєм. Один екземпляр, на одному екрані.

Чотири, і всі тримаються на класі: .in, .low, .pre, .out. Псевдостанів немає й не має бути - це мітка, а не контрол: її не наводять, не тиснуть і не фокусують.

Прочитані з availability.css, не переписані руками. Чотири ролі й сім примітивів, і найкоротше, що можна сказати про цю таблицю: у ній немає жодної заливки. Рядок полиці це чорнило на власному тлі сторінки, ніколи не плашка - на відміну від статусної пілюлі, з якою його весь час плутають.

Чотири стани полиці - чотири ролі, і жодна з них не поділена ні з ким. --text-info існує рівно для одного вживання (.pre) і більше ні для чого в системі: це та межа, де правило «дві ролі = два токени» зустрічає правило «одне-єдине вживання ще не роль», і виграє перше, бо передзамовлення це стан полиці, а не випадковий колір.

--radius-circle - це крапка, і вона намальована: символ ● прибрано зі 107 рядків розмітки, бо набраний знак читається вголос і не має власного розміру. --font-body оголошено навмисне, токеном, а не літеральним стеком, який ніс buy-box.css: рядок полиці трапляється всередині моноширинних цінових блоків, і без цього оголошення він успадкував би їхню гарнітуру.

Сторінка звіряє себе з файлом. Чужий контекст (.pcard) не рахується: у тому селекторі компонент не є підметом, він лише стоїть усередині когось, і min-height там відповідає на питання сітки, а не своє.