是否可以在定义列表 () 中隐藏（显示：无；）定义术语 ()？

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，但出于某种原因，选项 2 在我看来在语义上更丰富，因为它定义了产品。我应该选择哪个选项，为什么？

Answer 1

如果您打算选择第二个，则不应使用 display: none;。您最好将文本放置在屏幕之外，以便屏幕阅读器仍然可以看到它。

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

Answer 2

我说使用语义更丰富的代码 (2) 并隐藏 dt。也许更具体地说明您要隐藏哪些 dt：article.menu-item.dt {display: none }。它将使文本更具可读性，并避免代码中出现 span 和 div 汤。