我應該使用 id 還是 class 來“指示” Tailwind.css 中 HTML 元素的用途？

Question

上下文：

我在前端使用Alpine.js 和 Tailwind.css構建的網站的 header 上有一個復雜的 html 結構。

“復雜結構”，如：

<header class="BODY-HEADER">
    <div class="NOTIFICATION-WRAPPER grid md:grid-cols ... id-cols-3 t ... font-medium ... p-4">
        <div class="TOP-MSG my-auto ... inline-block hidden md:block ... text-right">
            <span class="EMAIL">
                <svg>...</svg>
                <span class="ml-1"> 
                    email @ example . com
                </span>
            </div>
            <div class="CONTACT-INFO flex">
                <span class="PHONE mr-4">
                    <svg>...</svg>
                    <a class="ml-1">...</a>
                </span>
            </div>
            <div class="NOTIFICATION m-auto md:my-auto ... text-center ... lg:ml-0">
                Subscribe to our newsletter. 
            </div>
        </div>
        <script>
    function initializeHdr() {
      return {
            ...
        },
        menu: initializeHdrNav()
      }
    }

    function initializeCompareHdr() {
      return {
            ...
          }
        }
      }
    }
  </script>
        <div 
       x-data="sticky header logic here" 
       @scroll.window="scroll sticky header trigger here"
  >
    <div 
         id="js-sticky-header" 
         :class="{ 'lg:fixed': showStickyHdr == true }" 
         class="header-sticky top-0 z-10 w-full"
    >
      <div 
           id="menu-wrapper" 
           x-data="initializeHdr()" 
           @keydown.window.escape="searchModalOpen = false;" 
           @private-content-loaded.window="getAllData(event.detail.data)" 
           class="z-10 w-full ... bg-container-dark"
      >
                    <nav id="MAIN-MENU" class="grid grid ... justify-between items-center ... ">
                        <div class="LOGO-WRAPPER md:w-40 px-5 ... 0 mx-auto ... ">
                            <!-- the logo -->
                            <a href="url to local environment's home here" title="" aria-label="the logo label here">

<!-- etc... another 1400 lines are all part of the MAIN NAVIGATION structure -->

如果您願意，導航中有幾組鏈接，子導航。 並且導航本身在移動設備和桌面上是不同的，實現為兩個包裝 div。 一個包裝 div 包裝移動設備，另一個包裝桌面，但還有其他元素包裝兩個 div，然后是導航上方的一些其他內容，然后是導航“存在”的同一 header 中的附加信息。

TL;DR：這是一個復雜的 HTML 結構，在不同的視口上具有多個布局，並且具有多個嵌套級別（總而言之，生成的 HTML 是 1500 行代碼）。

問題：

最初，一位同事使用 CSS class 來表示特定部分的“含義”，例如：

<nav class="MAIN-MENU grid grid-cols-3 2xl:grid-cols-4 items-center px-5 justify-between">

我已將“違規”代碼放在全大寫中，以便更容易在這個問題中發現。

我試圖通過“發出信號”元素的功能來使嵌套元素的意圖更加明顯。

用戶 AndyJamesM 關於如何/何時使用 id 和類的解釋以及 HTML4 和 HTML5 標准的比較很有用，但在這種情況下並不真正適用。

因此，我采用了不同的方法，因為它是一個唯一的元素，所以我將它移到了id屬性中，如下所示：

<nav
  id="main-menu"
  class="grid grid-cols-3 2xl:grid-cols-4 items-center px-5 justify-between"
>

id="main-menu"和class="main-menu都沒有任何樣式，它們只是為了“命名目的”和可讀性，所以當人們瀏覽代碼時，他們會立即知道發生了什么。

從邏輯上講，我會說最好使用id="main-menu"因為：

1. 它是頁面上的單個元素，所以我表示它的唯一性
2. 它是從class屬性中提取的，因為class屬性已經有太多來自其他 Tailwind 類的噪音。
3. 它正在為將來可能與一些 JS (Alpine.js) 功能掛鈎奠定基礎。

至於保留一個空的 class 名稱來表示目的，我看不出這種方法的好處。 我在上面的要點中列出了 3 個 arguments。

我找不到計數器 arguments ，我傾向於使用 class 名稱作為意圖信號。

在做出此決定時，是否有任何明確定義的最佳實踐可以遵循？

我有一位同事主張使用課程作為答案。 我覺得這不合邏輯，但他堅持自己基於公司資歷和預感的觀點。 我得到的論點是應該避免 id ，但是為什么呢？

編輯：不使用id命名的一個可能的可行原因：我們正在“發出”使用 JS 的“信號”——實際上沒有。 這可以通過在每個實際使用 JS 的id值前面附加js-來“清理”，但這也意味着在更新代碼上浪費了額外的時間，同時不確定這是否是最好的方法。

是否有與兩個給定選項不同的方法？

一種可能的替代方法是 HTML 注釋。 這似乎是最好的選擇。

aria-labelledby方法似乎也是朝着正確方向邁出的一步。

想到的另一件事是使用自定義數據屬性。 由於它們不必具有值，因此可以像這樣簡單：

<nav data-nested-desktop-sub-nav>

但是，問題仍然存在：什么是“最好的”方法？

Answer 1

在 HTML 中，4 個 ID 用於向元素添加語義（含義/命名）。 在 html5 中引入了新標簽以提供更好的“開箱即用”語義

我試圖通過“發出信號”元素的功能來使嵌套元素的意圖更加明顯。

nav 元素已經通過賦予元素含義來做到這一點，並聲明其中的鏈接是主要導航鏈接，屏幕閱讀器知道該元素的作用是導航。

因此，根據 html5 規范，使用已提供含義/語義的<nav>元素與主要導航元素一起使用，也許這也在<header>內。 在結構上，這個標記提供了堅實的意義，因為它是站點 header 內的主要導航。 在這種情況下，我認為添加一個純粹用於識別的 ID 沒有任何價值。

“沒有必要將所有鏈接都包含在<nav>元素中。 <nav>僅用於導航鏈接的主要塊；通常<footer>元素通常具有不需要的鏈接列表<nav>元素。”

請參閱： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#usage_notes

此外，如果擔心的話，為了提高可訪問性，請使用“aria-labelledby”

“一個文檔可能有多個<nav>元素，例如，一個用於站點導航，一個用於頁面內導航。在這種情況下，可以使用 aria-labelledby 來提高可訪問性，請參見示例。”

使用<header>和<nav>提供的價值遠遠超過任何 ID。 它們通過創建內容部分來幫助定義文檔大綱，並為屏幕閱讀器增加可訪問性的價值。

header 中的導航創建大綱層次結構，如下所示：

- Header
    - Main Nav

在導航上使用 ID 不會像以前那樣增加任何價值，除非您使用它來連接 JS。 只是為了命名而掛在那里的 class 沒有添加任何其他內容，並且可以說是完全沒有意義的。