Головний блок
Сорок п'ять рядків, і 463 елементи в корені .hero-wrap на 1280 при власних 1032x593; на 390 це 358x1147. Розбіжність не випадкова: герой сам малює рамку і п'ять перефарбувань за номером, а тримає всередині ще й рейку каталогу з її вильотом. Десять власних класів, і половину з них - .hpromo, .hph, .hps, .hptag, .hside - оголошує також banner.css.
Вісім чужих файлів усередині кореня, і найбільший внесок - банер, з яким герой ділить п'ять імен і сперечається за них.
| Файл | Класів | Які саме |
|---|---|---|
banner.css | 11 | .hbanners .hd-brand .hd-cta .hd-meta .hd-nm .hd-oldline .hd-ph .hd-tag ... |
mega-menu.css | 8 | .gi .gtx .mega-goalcard .mega-goalgrid .mega-goalrow .mega-groups .mega-grp .mega-panel |
filter-rail.css | 4 | .hrail .hrail-fly .hrail-wrap .rsep |
header.css | 3 | .mgl .mgt .mph |
discount.css | 1 | .hd-cut |
availability.css | 1 | .hd-av |
price.css | 1 | .uiv-cur |
chip.css | 1 | .mgchip |
13 класів усередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .ar .gc .hd-new .hd-old .hd-price .ic .lead .mega-sub .on .open .uiv-ic .uiv-trail .wfh-mega
Розмітка тут - не переписана від руки. Її знято з design/index.html у цій же сесії, обробники зняті, посилання підняті на рівень.
Показано в рамці шириною 1180, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки.
.hero-wrap - grid в одну колонку з gap 16; від 860 це 250px 1fr. 250 - ширина рейки каталогу, набрана числом. Нижче за 860 рейка це display:none (filter-rail.css:12), і колонка зникає разом із нею.hstrip - flex із overflow-x:auto і scroll-snap-type: x mandatory, смуга прокрутки схована через ::-webkit-scrollbar. Те, що прилипає - scroll-snap-align:start на .hpromo - оголошено в banner.css:68: одна поведінка, два файли.hstrip > .hpromo:nth-child(1|2|3). Перше стає чорним, його .hptag іде в --text-action, .hph - у --text-onmedia розміром 38px, .hps - у --text-onmedia-muted. Друге й третє отримують по картинці. Жодного класу-модифікатора: поміняйте порядок у розмітці - поміняється малюнок.hvert - рамка, min-height 130, від 720 - 164, флекс із притиском тексту донизу. Кожна теж адресована номером: перша це фото з градієнтною вуаллю через ::before, друга - пляшка.hvt і .hvs - max-width:60% в обох. Це і є все правило про те, щоб слова не лягли на пляшку.mega-panel і 84 - .mega-sub: розмітка вильоту рейки каталогу, яка стоїть у сторінці закритою. Герой їх не малює, він їх тримає, і саме тому у нього 13 неоднозначних дитячих класівТри токени, яких немає в жодній колонці нижче
Вуаль над фотобанером зібрана з--veil-surface, --veil-surface-mid і --fade-surface. У таблиці токенів їх не буде: перепис розкладає імена на дві родини за префіксом - --bg, --text, --line, --elevation, --mark, --shadow, --overlay, --focus в ролях і --fs, --fw, --space, --radius, --size, --ls, --lh, --font та інші в примітивах, - а --veil- і --fade- не належать ні до тих, ні до тих. Токени справжні й описані в tokens.css:821 та 839-842 разом із кількістю вживань. Це єдиний файл у наборі з такими іменами, і питання не про вуаль, а про те, чи має система третю родину, чи ці двоє мають переїхати в першу.| Стан | Що робить | Чому так |
|---|---|---|
| спокій | рамка в одну колонку, стрічка гортається вбік, дві вертикалі під нею | на телефоні герой це висока стрічка: 358 завширшки і 1147 заввишки |
| перше промо | підкладка --bg-media, рамка --line-media, заголовок 38px | один чорний прямокутник на весь перший екран, і він єдиний такий |
:hover на вертикалі | translateY(-2px) і --elevation-2, оголошено transition 150ms | єдиний стан у файлі. Рух не заміряний: прилад цієї сесії анімації не читає, тож це прочитано з файлу, а не побачено |
| від 720 | вертикаль росте зі 130 до 164 | єдина зміна на цій межі в усьому файлі |
| від 860 | рама стає 250px 1fr, рейка каталогу проявляється | герой не перебудовує вміст, він додає колонку ліворуч |
коли в ряду є .hdeal | banner.css:46 переоголошує .hside у дві колонки й пересуває його в другий рядок | власна одноколонкова розкладка героя тримається тільки доти, доки банер не поклав у ряд картку акції |
У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.
@media (min-width: 860px)
Чому перше промо пішло з родини inverse у власну родину
До проходу по боргах перша плитка стояла на--bg-inverse, а це «протилежне до сторінки»: у темній темі вся родина перевертається і підкладка стає світлою. --text-action разом із нею не перевертається, тож помаранчевий тег лягав на світле й провалював контраст - дірка, яку theme.mjs ловив як «одну форму, зламану темою». Власник обрав плитці власний ґрунт: --bg-media, --line-media, --text-onmedia і --text-onmedia-muted - родина, обидві половини якої навмисно рівні. Аргумент не технічний, а предметний: промо-панель це ФОТОГРАФІЧНА поверхня, і дві плитки поруч несуть справжні знімки, які теми не вчать. Родина внесена у виняток theme.mjs поіменно, тож вона перевірена, а не пропущена.Сторінка звіряє себе з файлом: 5 власних класів і 1 стан.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу: жодного - запит зник..hvert мала min-height 130 нижче 720 і 164 вище - розмір, що стрибає на точці, чого етап не робить. Тепер це пандус, обидва кінці рівно ті значення, що там стояли, тож на 360 і на 720 не зрушило нічого.Робота: ВІДПОВІДЬ. Рухається: transform і тінь плитки. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.
Прочитані з hero.css: 14 семантичних ролей і 11 примітивів.
| Семантичні ролі (14) | Примітиви (11) |
|---|---|
--bg-media --bg-page --elevation-1 --elevation-2 --fade-surface --line-hair --line-media --text-action --text-body --text-onmedia --text-onmedia-muted --text-secondary --veil-surface --veil-surface-mid | --font-display --fs-12 --fs-18 --fw-semibold --ls-lead --radius-16 --space-12 --space-16 --space-2 --space-4 --space-8 |
| – | --dur-fast --ease-standard |
Вирішувач по всіх 18 селекторах: одне оголошення з 58 не виграє ніколи - .hvert{ background-image }. Базове правило пише фон скороченням, а слот картинки в ньому б'ють обидва уточнення порівну: .hside > .hvert:nth-child(1) і :nth-child(2). Причина проста до незручності: вертикалей у продукті рівно дві, і обидві названі номером, тож базовому правилу не лишається жодного елемента. Файл описує третю картку, якої немає. Оголошень, що ні з чим не збігаються, тут нуль.
Форма та сама, що й у блоці покупки, тільки навпаки. Там базове правило програє власному уточненню, бо продукт ніколи не ставить елемент поза уточнювачем; тут - бо продукт дає рівно стільки елементів, скільки є перелічених номерів. Адресація за порядком у розмітці - це п'ять правил із вісімнадцяти, і жодне з них не можна прочитати як намір: «третє промо з мадскотом» у коді записано як «третє».
Чого бракує
- Адресація за номером. П'ять правил кажуть «перший», «другий», «третій». Модифікатора, яким можна сказати «це промо чорне» або «ця вертикаль фотографічна», у системи немає, і поки його немає, порядок у розмітці є частиною дизайну
- Три токени поза обома родинами імен -
--veil-surface,--veil-surface-mid,--fade-surface. Рішення про родину, не про значення - 250, 130 і 164 - літерали. 38px літерал навмисно і це вже вирішено (
tokens.css:190-200: вище 34 шкали немає, значення з одним ужитком - не токен), а от ширина рейки і дві висоти вертикалі не пояснені ніде - П'ять із десяти власних класів оголошує також
banner.css. Межа організму проходить не там, де межа файлу, і з коду не видно, хто відповідає за.hpromo - Обидві межі не заміряні зсередини: 720 і 860 стоять між ширинами перепису, і жодна з них не перевірена парою власних ширин
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.