使用仅显示在"small devices"上的隐藏元素是否被视为不良做法？

Question

我使用一个表来显示在系统中注册的用户的信息。我想让这个表格在小型（移动）设备上显示时更"用户友好"。

这是：

 <table>
    <thead>
    <tr>
        <td>User ID</td>
        <td>Role</td>
        <td>Group</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Dummy User ID 1</td>
        <td>Dummy User Role 1</td>
        <td>Dummy User Group 1</td>
    </tr>
    <tr>
        <td>Dummy User ID 2</td>
        <td>Dummy User Role 2</td>
        <td>Dummy User Group 2</td>
    </tr>
    ...
    </tbody>
</table>

我正在使用媒体查询来更改小型设备上表的外观。

首先，我要躲起来。

其次，我将应用于td元素"display:block；"，以将它们一个接一个地显示出来。

第三，我决定在UserID/Role/Group值旁边显示列名：

<table>
    <thead>
    <tr>
        <td>User ID</td>
        <td>Role</td>
        <td>Group</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <span>User ID:</span> Dummy User ID 1
        </td>
        <td>
            <span>User Role:</span> Dummy User Role 1
        </td>
        <td>
            <span>User Group:</span> Dummy User Group 1
        </td>
    </tr>
    <tr>
        <td>
            <span>User ID:</span> Dummy User ID 2
        </td>
        <td>
            <span>User Role:</span> Dummy User Role 2
        </td>
        <td>
            <span>User Group:</span> Dummy User Group 2
        </td>
    </tr>
    ...
    </tbody>
</table>

因此，这些跨度元素仅显示在小型设备上。在中型/大型设备上，"display:none；"应用于它们，但它们仍然存在于HTML标记中。拥有这样的不可见HTML元素是否被认为是一种糟糕的做法？或者也许还有更好的解决方案？

Answer 1

我不认为这一定是一种糟糕的做法，但如果在屏幕显示中隐藏这些DOM元素会让你变形，我有一个替代解决方案。既然跨度的内容是一致的，为什么不将它们作为"before"伪元素添加到小型设备CSS中呢？

类似于：

td:nth-child(1)::before { content: "User ID: "; }
td:nth-child(2)::before { content: "User Role: "; }
td:nth-child(3)::before { content: "User Group: "; }

通过这种方式，您可以保持屏幕显示的DOM美观整洁，并根据需要通过CSS添加仅用于移动设备的额外标签文本。