«Семантический интерфейс» даже не использует семантическую разметку! Перевод

Вчера прочитал статью (Jason Knight), а в этом что-то есть! Удивительно другое, люди не знакомые с css глядя на пример скажут, что приведенный пример проще. И второе, ведь это все знают, так почему мы часто делаем более сложно? Есть и третье, — изначально же html справляется с этим.

В html есть всё по умолчанию. В большинстве случаях. И дело тут не в html даже.

Прочтем часть статьи…

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

На этот раз у нас есть абсурдно названный «Семантический пользовательский интерфейс», который, если быть откровенным, в каждом примере и средствах, с помощью которых он работает, переворачивает птицу в семантической разметке. Достаточно плохо набрасывать уроки презентаций на то, что тянет практики обратно к худшим из практик конца 90-х до CSS.

Нет, эти клоуны удваиваются, добавляя слово «смысловой» в название, когда там НИЧЕГО ТАКОГО!

Семантическая разметка — в случае с HTML — использует ТЕГИ, чтобы сказать, что есть или БУДЕТ БЫТЬ в профессионально написанном документе, основанном на грамматических и структурных нормах. Это связано с тем, что целевой аудиторией для семантической разметки являются не разработчики или программы, которые общаются друг с другом, а для того, чтобы проинструктировать пользовательский агент (браузер — частично) передавать эти значения внутри ограничения устройства или возможностей пользователя.

В их примерах совершенно отсутствует правильная — ЕСЛИ ЕСТЬ — семантическая разметка.

Возьмите что-нибудь столь же простое, как список хлебных крошек. Да, я сказал СПИСОК. Жаль, что они не знают, что такое списки.

Semantic UI

Где они показывают зверство разметки:

<!-- Their Way, Don't do this -->
<div class="ui breadcrumb">
   <a class="section">Home</a>
   <div class="divider"> / </div>
   <a class="section">Store</a>
   <div class="divider"> / </div>
   <div class="active section">T-Shirt</div>
</div>

Где этот чертов СПИСОК? Это не семантическая разметка!

Там для всех намерений и целей нет тегов ZERO, которые имеют семантическое значение в HTML. Даже якорь семантически нейтрален. Хуже того, у них в разметке презентационные косые черты, а вокруг них тупой расточительный и бессмысленный DIV. И НЕТ, классы не предоставляют семантику HTML для таких пользовательских интерфейсов, как программы для чтения по Брайлю, программы для чтения с экрана, поисковые системы и т.д., и т.д., и т.д.

А для чего?

Разве сложно сделать и иметь эту простую чистую СЕМАНТИЧЕСКУЮ разметку?

<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Store</a></li>
  <li>T-Shirt</li>
</ul>

И немного простого CSS

.breadcrumbs li {
  display: inline;
  list-style: none;
}
.breadcrumbs li:last {
  font-weight: bold;
  color: #000;
}
.breadcrumbs li:not(:last-child):after {
  content: " / ";
  color: #006;
}

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

Посмотрите на их представление о форме!

И т.д.

https://medium.com/codex/semantic-ui-doesnt-even-use-semantic-markup-7d311da1530e

P.S. мне другое понравилось, пример касается самого простого — css и на нем мы видим, как мы всё усложняем, хорошо, а если мы пойдем далее, там что? )