html - 通过 css 保持语义和事物的可塑性

Question

只是处理一些 Spark View 引擎 ASP.Net MVC 代码。简化的示例(但我可能已经以类似的风格多次写过同样的东西)。只是在思考..

<content name="main">
      <ul>
      <for each="var userViewModel in ViewData.Model">
        <li>
          <ul>
            <li>${userViewModel.Identity}</li>
            <li>${userViewModel.Name}</li>
            <li>${userViewModel.Email}</li>
              <!-- about to add here -->
          </ul>
        </li>
      </for>
    </ul>
</content>

接下来我想添加

    <li>
<button class="edit-item-button">Edit</button>
    <button class="confirm-delete-item-button">Delete</button>
    </li>

(好吧，它可能比上面的可访问性等更干净。)但是沿着这些思路。但这对我来说似乎不是很语义化，如果我在具有不同 CSS/UI 的不同项目中重用类似的 HTML 模板，也会降低可塑性。

我真的很想...在非 JS 模式下给出只读很好，动态添加编辑控件到页面上的项目准备就绪。这是大罪吗？

Answer 1

是的，使用 JavaScript 添加没有它就没有的功能，并且需要使用该应用程序是一个大罪。这不是世界末日，但你会下 hell :)(特别是如果除了开发人员懒惰之外没有充分的理由这样做)

关于 UI 和标记，我会将“操作”作为单个 <li> (与其他用户信息处于同一级别)，但作为他们自己的 <ul> .这表明它们都是同一类事物( Action )，但是有一个它们的列表。

当然，如果只有一个，那么你就不需要<ul>了。并且可以将 Action 放在那个级别。

这是我的意思的一个例子:

<content name="main">
      <ul>
      <for each="var userViewModel in ViewData.Model">
        <li>
          <ul>
            <li>${userViewModel.Identity}</li>
            <li>${userViewModel.Name}</li>
            <li>${userViewModel.Email}</li>
            <li>
              <ul>
                <li><button class="edit-item-button">Edit</button></li>
                <li><button class="confirm-delete-item-button">Delete</button></li>
              </ul>
            </li>
          </ul>
        </li>
      </for>
    </ul>
</content>