Автор статьи не веб-разработчик, но ему пришлось осваивать CSS, чтобы оформить свой блог. Хорошая новость: для простых задач вроде программистского блога есть небольшое, но рабочее подмножество технологий. Плохая — куча граблей, которые сломают страницу и потребуют дней отладки.
Начинает он с того, что в любом «настоящем» сайте тонны обёрток (wrappers), но автор советует наоборот — обходиться только семантическими тегами HTML5 (main, article, nav, kbd, details, dl). Это упрощает понимание.
Главная боль — вёрстка (layout). Универсального алгоритма расположения блоков не существует — каждый фреймворк использует свои эвристики. Не надо думать «как сделать мой макет», лучше спросить «какие макеты вообще возможны в этой системе».
Следующий камень — браузерные стили по умолчанию. Они отличаются в разных браузерах, и если вы случайно на них полагаетесь, пользователь увидит не то, что вы задумали. Решение — CSS reset: переопределить все дефолты в начале таблицы стилей. Автор прагматично считает, что стилизовать страницу нужно, иначе она нечитаема, но при этом разумно не подгонять HTML под CSS, а наоборот, и поддерживать reader mode.
Хороший приём — classless CSS: стилизовать прямо через имена тегов, не плодя классы. После сброса можно задать, например, шрифт для всех code. Это избавляет от сложных селекторов. Второй вариант — CSS nesting и компонентный подход, чтобы не писать «дальнобойные» правила.
box-sizing: border-box — первая строка любого CSS reset. Иначе размеры элементов не включают padding и border, и при их изменении весь макет едет.
margin collapsing ведёт себя как социальная дистанция: отступы не складываются, а выбирается максимальный. Это полезно, но может удивить. Автор упоминает статью Джулии Эванс, где она советует «совиный селектор» (section > *+* { margin-top: 1rem; }), чтобы родитель управлял отступами детей. Жаль, что такие трюки не узнать без профессионального опыта.
Стандартный flow layout годится для текста, но для управления расположением нужен flexbox. Он отделяет современную вёрстку от времён, когда нужна была «PhD по CSS».
responsive design: HTML сам по себе респонсивен (текст перетекает при изменении окна). Лучше не писать лишних @media, а просто поставить max-width на основной колонке — этого хватает.
1px в CSS — это не физический пиксель, а мера визуального угла. На разных экранах он пересчитывается в разное количество физических точек. Даже сантиметры в CSS — на самом деле углы.
font-size не задаёт размер глифа, а лишь размер виртуального бокса. Реальный размер зависит от шрифта. Свойство font-size-adjust может это исправить, но пока мало где используется. Ещё проблема: установка font-size в CSS ломает глобальную настройку размера шрифта в браузере. Лучше оставить 16px по умолчанию и проверить читаемость в разных конфигурациях.
line-height — тоже с подвохом: это высота не строки, а контейнера для одного шрифта. Если смешивать шрифты (например, monospace внутри абзаца), строки «разъезжаются» по вертикали.
Про vertical rhythm (чтобы строки разных абзацев совпадали по сетке) автор говорит: это чистое вуду, для одноколоночных макетов не нужно.
word-break: длинные inline code или URL не разрываются по словам, и на мобильных они вылезают за край. Единого решения нет, но есть советы в статье «Against Horizontal Scroll».
В итоге автор просит кого-нибудь написать короткую книгу страниц на 100, которая объяснит «достаточно HTML и CSS для простого блога, чтобы не быть раздавленным маргинами».