Організм · рівень 3

Сітка товарів

Найменший організм, який щось важить: 2 селектори, 10 оголошень, 2 класи і жодної семантичної ролі. Це чиста розкладка - файл не називає жодного кольору. Корінь .prow стоїть на 15 кольорових екранах, до двох на екран, і на 1280 тримає 311 елементів при власних 732x959; на 390 це 358x1177.

рівень 3design/system/components/product-grid.css34 рядки3 селектори6 оголошень1 екран
З чого складається

Сітка не малює нічого свого: всі 311 елементів усередині - чужі, і найбільше їх дає картка товару.

ФайлКласівЯкі саме
product-card.css8.bd .bonus .dim .pbrand .pcol .pmeta2 .poldline .prow2
availability.css3.low .pavail .pre
rating.css3.rate .st .uiv-star
favourite.css2.fav .wlrm
button.css2.btn--icon .btn--text
badge.css2.tag-new .tag-pop
price.css1.uiv-cur
checkout-form.css1.cartbtn

14 класів усередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .btn--accent .btn--outline .in .nm .on .out .pcard .pcut .perserv .ph .pnew .pold .tag .uiv-ic

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/listing.html у цій же сесії, обробники зняті, посилання підняті на рівень.

Показано в рамці шириною 1180, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки. Сам організм у рамці обмежено до 732px - це ширина, яку він займає в продукті на 1280. Витягнутий зі своєї колонки, він розтягнувся б на всю рамку, і кнопка на 294 стала б кнопкою на 1490.

1Сітка .prow - repeat(auto-fill, minmax(min(150px, 100%), 1fr)) із gap 12; від 620 це 200px і gap 16. Кількість колонок вирішує арифметика ширини, а не назване число колонок
2min(150px, 100%) - саме воно не дає колонці стати ширшою за контейнер на вузькому екрані. Без нього minmax з твердими 150 переповнює вужчу за 150 колонку
3Список .plist - flex у колонку з gap 12. Це другий корінь того самого файлу, і він стоїть рівно на одному кольоровому екрані, design/listing-list.html. Колірної половини він не має взагалі
4Що в клітинках - у демо 10 карток .pcard, і кожна складається з восьми чужих файлів: product-card.css, availability.css, rating.css, favourite.css, button.css, badge.css, price.css і checkout-form.css - останній через .cartbtn
5Два примітиви і все - --space-12 і --space-16. Це весь список токенів файлу, і саме тому таблиця нижче має порожню колонку ролей

Другий клас файлу - це та сама полиця в один стовпчик. .plist - одне оголошення, flex колонкою з gap: var(--space-12), і стоїть він рівно на одному екрані, design/listing-list.html: той самий каталог, перемкнутий у список. Сітка вирішує кількість колонок арифметикою ширини, а список не вирішує нічого - він віддає ширину картці, і саме тому картка там інша, .pcard-l, з фото ліворуч і ціною праворуч.

фото
BioTechUSA · Угорщина
Iso Whey Zero 908 г
В наявності
★ 4.7 · 88 відгуків · 35 ₴/порція · +11 ₴ бонус
1 050 ₴
Дві справжні картки з design/listing-list.html. Проміжок між ними - усе, що малює .plist; решта належить product-card.css

І перша ж справжня картка привела живий дефект на екран покупця

Плашка «★ Популярне» лягає на назву товару - заміряно на design/listing-list.html, перша картка: перекриття 10 x 14px на 390 і на 360, на 1280 його немає. Причина в арифметиці, а не у верстці списку: до 559 .pcard-l стає сіткою 56px 1fr, фото звужується до 56, а плашка всередині нього - position: absolute без жодного обмеження ширини, і її власні 77px вилазять у текстову колонку, яка починається на 101. .lph не має overflow, тож нічого її не тримає. Друга плашка, «✦ Новинка», вужча на 13px і не зачіпає назву випадково, а не за правилом.

Не полагоджено тут навмисно. Обрізати слово, стиснути його в трикрапку або лишити від плашки саму зірку - це три різні відповіді про те, що екран КАЖЕ на телефоні, тобто на первинній ширині. Це рішення власника, а не перенесення; записано в беклог.
Стани
СтанЩо робитьЧому так
до 620minmax(min(150px, 100%), 1fr), gap 12на 360 це дві колонки по 158, і сітка сама їх нарахувала
від 620minmax(min(200px, 100%), 1fr), gap 16ширша клітинка і ширший проміж: те саме правило, інші два числа
від 1040нічогофайл оголошує тут чотири колонки, і вони не діють - див. нижче
порожньо, помилка, завантаження.prow у DOM немаєна listing-empty, listing-error і listing-loading сітку заміняють інші організми цілком, а не спорожнюють
станів у файлі немаєжодного :hover, :focus чи :checkedусе, що реагує на людину, лежить рівнем нижче, у картці і в кнопці
Межі

У файлі жодної медіа-умови, і це результат етапу 10, а не пропуск. Сітка була написана на двох запитах - (min-width: 620px) на три колонки і (min-width: 1040px) на чотири, - і жоден із них ніколи не малював: колірна половина файла переоголошувала те саме правило без умови й била обидва. Раунд 3 їх видалив і замінив на auto-fill з пандусом-підлогою, тож кількість колонок тепер рахує браузер на будь-якій ширині, а не список чисел.

Обмеження

Правила вживання, які називають саме цей компонент: U6. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Один список товарів на екран.

Холостий контроль

Сторінка звіряє себе з файлом: 2 власні класи і 0 станів.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: жодного - обидва запити зникли, і два інші виявились мертвими. 1) Мертві: структурна половина файлу писала repeat(3, 1fr) на 620 і repeat(4, 1fr) на 1040, а кольорова половина нижче перевизначає .prow із тією самою вагою - тож жоден із двох не малював ніколи. Перепис кроку 1 порахував 1040 діючою межею продукту; вона не діяла, і сказати це міг лише замір виходу. 2) Сітка йшла НАЗАД: 1 колонка на 320, 2 на 360, 3 на 520, 2 на 620, 3 на 680, 4 на 880 - на 620 підлога стрибала зі 150 на 200 і коробка 588 переставала вміщати три, тобто ряд карток губив колонку в ту мить, коли вікно ширшало, і саме на точці, названій «ряд карток перестає бути однією колонкою». Одна підлога цього не лікує (три на 620 вимагають 185 або менше, чотири на 1280 - 194 або більше), тож дефектом є сам перемикач, і його замінив пандус --grid-col-fluid. Ціна названа: стан «три колонки» на 520-619 (три картки по 154.7px) стає двома по 244.
Токени

Прочитані з product-grid.css: 0 семантичних ролей і 4 примітиви.

Семантичні ролі (0)Примітиви (3)
---space-12 --grid-col-fluid --grid-gap-fluid
Що знайшов вирішувач

Вирішувач по обох селекторах: 2 оголошення з 10 не виграють ніколи, і обидва це grid-template-columns на .prow - одне в @media (min-width: 620px), друге в @media (min-width: 1040px), обидва зі структурної половини. Їх б'є базове правило колірної половини: та сама специфічність, нижче за текстом. Наслідок читається просто: з трьох меж файлу жива одна - 620 з колірного блоку. Чотири колонки на 1040 написані і не намальовані жодного разу, а 1040 це межа, яку файл називає й ніколи не переходить.

Двадцять відсотків оголошень файлу мертві, і це найбільша частка в наборі - при тому, що сам файл найкоротший. Мала кількість правил не рятує від суперечності, вона тільки робить її помітною.

Немає в коді -> етап 09

Чого бракує

  • 1040 - рішення, а не прибирання. Або видалити межу, або дати їй виграти; і в обох випадках це значення, сказане вголос
  • 150 і 200 - сирі пікселі. Мінімальної ширини картки система токеном не називає, хоч це і є та величина, від якої залежить уся розкладка каталогу
  • .plist без колірної половини й на одному екрані - або він повноцінний другий вигляд каталогу, або його місце в listing, а не тут
  • Межа 620 не заміряна зсередини: 390 і 720 стоять по різні боки, але жодна ширина перепису не стає впритул до неї
  • 14 неоднозначних дитячих класів - найбільше в наборі після героя. Із коду не видно, чий .pcard, .ph, .nm чи .tag

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.