Hacker News Digest

Typst предлагает решение проблемы создания доступных PDF-файлов без необходимости в дорогостоящем ПО вроде Adobe Acrobat. Большинство инструментов требуют ручной доработки документов для соответствия стандартам доступности, превращая базовое требование в сложную и затратную задачу. Typst меняет этот подход, автоматически создавая доступные файлы на основе семантической структуры документа.

Доступные PDF должны обеспечивать высокую контрастность текста и содержать скрытые теги, которые позволяют скринридерам правильно интерпретировать документ. В отличие от Typst, где элементы несут смысловую нагрузку, большинство инструментов не могут правильно определить, является ли выделенный текст заголовком, цитатой или просто акцентом. Typst использует семантические элементы для автоматического создания правильно структурированных документов, избавляя авторов от необходимости ручной проверки соответствия стандартам доступности.

• Проблемы с чтением документов в двухколоночном формате, когда порядок чтения нарушается (сверху вниз в колонке, а не слева направо), что затрудняет копирование.
• Критика PDF как неудобного формата, несмотря на его распространённость.
• Положительный отзыв о мобильной версии статьи: хороший адаптивный дизайн и удобное расположение элементов на маленьком экране.
• Важность контрастного чёрного текста на белом фоне для удобного чтения.

В недавнем посте я писал о том, что элементы можно рассматривать как готовые компоненты браузера. Позже я осознал, что сам не следую этому принципу — использовал классы вместо семантических элементов. Это привело к радикальному решению: полностью отказаться от классов на своём сайте.

Я перестроил CSS вокруг трёх слоёв: base, components и utilities. Всё в base уже было на селекторах тегов, поэтому задача свелась к пересмотру компонентов и удалению утилит. Сначала я усилил использование семантических элементов и контекстных стилей, но зашёл слишком далеко, создавая сложные селекторные паттерны.

Решение пришло через кастомные теги и атрибуты по образцу веб-компонентов, но без JavaScript. Например:

note-pad {
  padding-block: var(--size-lg);
  border-block-end: var(--border-default);
}

А кастомные атрибуты заменили модификаторы в стиле BEM:

random-pattern {
  & [shape-type="1"] {
    border: 0.1rem solid var(--color-sheet);
  }
}

Плюсы: сократил CSS до ~5КБ, улучшил доступность и чистоту разметки. Минусы: подход требует большего планирования и не подходит для крупных проектов с разноуровневой командой.

Пока не готов назвать это идеальным решением для всех случаев, но для личного сайта — отличный эксперимент.

• Автор сайта утверждает, что добился минималистичного дизайна почти без использования CSS-классов, полагаясь на семантическую структуру HTML.
• Многие участники дискуссии указывают, что сайт на самом деле содержит множество классов (175+), что противоречит заявлению автора.
• Подход семантической вёрстки (без лишних классов) хвалят за чистоту кода и хорошую доступность, но критикуют за жёсткую привязку стилей к структуре HTML, что усложняет поддержку и изменения.
• Отмечается, что такой подход хорошо работает для статических документов (например, блогов), но не подходит для сложных и динамических веб-приложений.
• В качестве альтернатив упоминаются методологии вроде BEM, фреймворки типа Tailwind CSS и использование современных возможностей CSS (:has, @scope, @layer).
• Часть участников считает, что полный отказ от классов — это скорее эстетическое упражнение, а не практичный паттерн для реальных проектов.
• Общий вывод: важен баланс — использовать семантические элементы по умолчанию, но добавлять классы там, где это необходимо для гибкости.