Traps to Developers

CSS
- min-width: auto (по умолчанию) имеет приоритет над flex-shrink, overflow: hidden, width: 0; задайте min-width: 0.
- Горизонталь и вертикаль различаются: width: auto растягивается, height: auto по содержимому; margin: 0 auto центрирует по горизонтали, но не по вертикали (в flex-direction: column работает).
- BFC (display: flow-root) предотвращает схлопывание margin и «обнуление» высоты родителя с float-потомками.
- Новый stacking context создают transform, filter, opacity, position: fixed/sticky, z-index + absolute/relative и др.; z-index действует только внутри контекста.
- На мобильных 100vh включает скрытые панели; используйте 100dvh.
- position: absolute ориентируется на ближайший «positioned» ancestor, а не на родителя.
- float не работает внутри flex/grid-родителя.
- Процентные width/height не работают, если размер родителя не задан.
- display: inline игнорирует width, height, вертикальные margin.
- Пробелы между inline-block элементами рендерятся; в flex/grid — нет.
- box-sizing: content-box (по умолчанию) не включает padding/border; включите border-box.
- Указывайте width/height у <img> для предотвращения CLS.
- Загрузка файлов не показывается в DevTools; используйте chrome://net-export/.
- Внутри <script> строка </script> ломает парсинг.
Unicode
- Отличайте code point и grapheme cluster (последнее — то, что видит пользователь).