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

В статье про шмемантику есть интересные мысли, добавлю свою: HTML, а точнее DOM (пополненный через ajax-запросы), можно рассматривать как XML - это, прежде всего, данные. Мета-информация о том, каким из способов мы хотим представлять данные, в случае с применением XML, размещалась в XSLT, а вот задачей CSS было - как реализовать тот или иной способ отображения (ориентируясь на мета-маркеры из XSLT).

Когда отказались от слоя XSLT, получилось, что HTML вынужден содержать и данные, и метаинформацию по их отображению (оставляя по прежнему реализацию отображения за CSS). И вот тут-то и началась путаница в битве за семантику! Кто-то, например TailwindCSS, предлагал забить на метаинформацию и просто размечать контейнеры для данных признаками стилевого оформления, как в старые-добрые — с html-атрибутами типа font (что верстальщиков ввергало в ужас), а кто-то придерживался темы, что способы отображения (в 2 колонки или три) не должны быть размещены в html, а только в CSS, в зависимости от именования сущностей (что тоже бред - почему это таблица морковок должна стилизоваться в 2 колонки, а таблица картофеля в 3).

В итоге HTML5 разработчики вцелом игнорировали, поскольку стандарт предлагает мета-теги (как смысловую базу-опору, используемую и для визуального представления информации и для альтернативного парсинга, например для читалок или для поисковых роботов, т.е. для accessibility) и требует тратить время на оформление смысла множеством новых тэгов, да ещё и перепроверять себя - насколько это корректно - логически вставлять тот или иной новый тэг. Молотком работать проще и дешевле - всё вокруг гвозди/div'ы (особенно когда заказчику пофиг и он не готов за такую работу платить)!

Ещё есть БЭМантика (статья).

Я же, по iAMcss, классы не использую и БЭМ у меня привязан через атрибуты, а не классы ;) Мой подход учитывает специфичность и предлагает её минимизацию.

Но и применение iAMcss по прежнему требует иметь в HTML и общую метаинформацию каким-образом отображать данные (разметка блок-элемент) и метаинформацию частичной модификации вида конкретного подмножества данных (разметка модификатор). Например иконка для таблицы oranges прописана в селекторе CSS [iam-table ~= oranges]::before, а не в html <img src="oranges.png"><table class="iam-table">

В идеале мета-информация для CSS должна содержаться только в шаблонах компонент, а body должен состоять всецело из компонент. В таком варианте роль промежуточного слоя, коим раньше был XSLT, берут на себя компоненты (Vue, Angular, React, Web-components).