Можно ли скрывать (отображать: нет;) термин определения (<dt>) в списке определений (<dl>)?

Question

Итак, у меня есть список пунктов меню, и я пытаюсь выяснить, следует ли использовать диапазоны с атрибутами класса или списками определений для характеристик каждого элемента.Вот два варианта, которые я рассматриваю:

Вариант 1)

// HAML Markup

%article.menu-item
  %span.name
    Cereal
  %span.price
    4.00
  %span.description
    We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.

// Styling

article.menu-item {
  .price:before { content: "$"; }
}

Вариант 2)

// HAML Markup

%article.menu-item
  %dl
    %dt
      Item
    %dd
      Cereal
    %dt
      Price
    %dd
      4.00
    %dt
      Description
    %dd
      We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.

// Styling

article.menu-item {
  .price:before { content: "$"; }
  dt { display: none; }
}

В настоящее время я использую вариант 1, но для некоторыхВторой вариант причины кажется мне семантически более богатым, поскольку он определяет продукт.Какой вариант мне выбрать и почему?

Answer 1

Если вы собираетесь идти со вторым, вы не должны использовать display: none;. Вам лучше расположить текст вне экрана, чтобы программы чтения с экрана все еще могли его видеть.

dt {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

Answer 2

Я говорю: иди с семантически более богатым кодом (2) и скрой ДТ. может быть более конкретно о том, какие точки вы скрываете: article.menu-item.dt {display: none }. это сделает текст более читабельным и позволит избежать использования span и div soup в вашем коде.