12 базовых рефлексов верстальщика

Некоторые мыслительные процессы, идущие в моей голове при вёрстке, напоминают рефлекторную деятельность, высвобождая ресурсы для более интересных задач. Эта статья — попытка формализовать некоторую часть таких «рефлексов».

Я иногда дополняю статью, так что не 12, а больше.

Триггер: утро, начало работы.
Реакция: синхронизировать состояние локального и удаленного репозитория. Сделать git pull.

Триггер: завершено выполнение какой-либо задачи.
Реакция: сделать коммит и, возможно, git push.

Триггер: малейшее сомнение в подходящей проекту кроссбраузерности используемой технологии.
Реакция: caniuse.com.

Триггер: верстаем любой блок с текстом.
Реакция: предусмотреть переполнение текстом и ультракороткий текст.

Триггер: верстаем любой блок с контентным изображением (добавлено тегом img).
Реакция: предусмотреть неподходящий размер изображения.

Триггер: написали display со значением flex или inline-flex.
Реакция: решить вопрос много-/однострочности. Указать flex-wrap.

Триггер: стилизуем флекс-элементы.
Реакция: решить вопрос с размером по главной оси. Указать flex-basis, flex-grow, flex-shrink.

Триггер: написали float со значением left или right.
Реакция: предусмотреть выступ float-элемента за габарит родителя или схлопывание высоты родителя. Использовать «сброс флоатов».

Триггер: написали display: inline-чтоУгодно.
Реакция: определить свойство vertical-align (даже если его значение отличается от baseline, т.к. оно может быть определено в нормализаторе, сбросе, проектом «ребуте» стилей).

Триггер: у блока есть фоновая картинка, инверсионная по яркости фону страницы, и текст, близкий по цвету к фону страницы (пример: страница с белым фоном, блок с тёмно-синим фоном и белым текстом).
Реакция: прописать не только background-image, но и background-color на случай проблем загрузки картинки или любым другим способом избежать совпадения цвета фона и текста.

Триггер: написали height со значением, отличным от auto.
Реакция: решить вопрос с переполнением текстом, если есть текст, подумать об использовании min-height вместо height.

Триггер: верстаем мелкий интерактивный элемент для адаптивного проекта.
Реакция: рассмотреть возможность увеличения клик-габарита, как минимум, до 32×32 пикселей.

Триггер: верстаем «затухание» в блоке (накладываем прямоугольник с градиентом от прозрачного к фоновому цвету).
Реакция: помнить, что для Safari transparent отзначает прозрачный чёрный, а не некий «просто прозрачный». Если фон не чёрный, ужно указать не transparent, а фоновый цвет с нулём в альфа-канале.

А какие у вас «рефлексы»?