HTML优先原则

HTML优先（HTML First ）目的是通过关注 HTML 结构而不是框架来使 Web 开发更易于访问和维护。

HTML First 是一组原则，旨在通过以下方式使构建 Web 软件更容易、更快、更具包容性和更易于维护...

利用现代网络浏览器的默认功能。
利用 HTML 属性语法的极其简单性。
利用 Web 的 ViewSource 功能。

这篇文章提倡“HTML 优先”的 Web 开发方法，优先考虑可读性和可理解性，而不是简洁和抽象。
它提倡使用纯 HTML、CSS 和 JavaScript，无需构建步骤或使源代码变得模糊的转换。

主要思想包括使用 HTML 来实现结构、样式和行为，并避免使用需要非 HTML 文件格式的库。

1、使用“vanilla”方法通过外部框架实现所需的功能
浏览器支持的开箱即用的内容范围很大，而且还在不断增长。在将库或框架添加到代码库之前，请检查是否可以使用普通的旧 html/css 来实现它。

鼓励

<details>
  <summary>Click to toggle content</summary>
  <p>This is the full content that is revealed when a user clicks on the summary</p>
</details>

而不是：

import React, { useState } from 'react';

const DetailsComponent = () => {
  const [isContentVisible, setContentVisible] = useState(false);

  const toggleContent = () => {
    setContentVisible(!isContentVisible);
  };

  return (
    <details>
      <summary onClick={toggleContent}>Click to toggle content</summary>
      {isContentVisible && <p>This is the full content that is revealed when a user clicks on the summary</p>}
    </details>
  );
};

export default DetailsComponent;

2、如果可能，默认使用内联 HTML 属性定义样式和行为
对于样式，可以使用Tailwind或Tachyons等 SPC 库来启用。对于行为，您可以使用hyperscript、Alpine或类似库。是的，这确实意味着您的 HTML 会看起来很忙。但这也意味着其他开发人员将更容易找到和理解行为、导航并对其进行更改。

鼓励

<button onclick="this.classList.add('bg-green')">
  Click Me
</button>

而不是：

<div id="results-pane">
  Click Me
</div>
results-pane.active {
  background-color: green;
}
var resultsPane = document.getElementById("myDiv");
resultsPane.addEventListener("click", function() {
    this.classList.add("active");
});

您可能会注意到，这种方法似乎违反了关注点分离——最常被吹捧的软件设计原则之一。我们认为“全有或全无”的 SoC 方法是有缺陷的，因此提倡采用一种考虑行为局部性并承认两者之间权衡的方法。

3、如果需要库，请使用利用 html 属性的库，而不是围绕 javascript 或自定义语法构建的库

鼓励

<script src="https://unpkg.com/hyperscript@0.0.7/dist/hyperscript.min.js"></script>
<div>
  <input type="text" _="on input put me into output">
  <div id="output"></div>
</div>

不是：

<script src="https://cdn.jsdelivr.net/npm/stimulus@2.0.0/dist/stimulus.umd.js"></script>

<div data-controller="echo">
  <input type="text" data-echo-target="source" data-action="input->echoupdate">
  <div data-echo-target="output"></div>
</div>

<script>
  const application = Stimulus.Application.start();

  application.register("echo", class extends Stimulus.Controller {
      static targets = ["source", "output"]

      update() {
          this.outputTarget.textContent = this.sourceTarget.value;
      }
  });
</script>

4、避开构建步骤
需要将文件从一种格式转换为另一种格式的库会增加大量的维护开销，消除或严重损害 ViewSource 的功能，并且通常要求开发人员学习新工具才能使用它们。现代浏览器不再像引入这些做法时那样受到性能限制。如果我们使用 HTML First 库（例如 static tailwind 或 htmx），则所需的额外 CSS 和 JS 量通常是最少的。
鼓励

<link rel="stylesheet" href="/styles.css">
不是
<link href="/dist/output.css" rel="stylesheet">
npx css-compile -i ./src/input.css -o ./dist/output.css --watch

构建步骤实践是如此根深蒂固，即使在一年前，这种观点也被认为是极其边缘的。但去年已经开始获得显着增长。最近的一些例子：

5、优先选择“裸”HTML，而不是编译为 HTML 的混淆层
这个原则最适用于后端实现。这里的基本思想是可读性。如果熟悉 HTML 但不熟悉后端框架的开发人员查看您的视图文件，他们仍然应该能够理解他们所看到的 90% 以上的内容。如上所述，这意味着为了易于理解而牺牲简洁性。

鼓励

<form action="<%= new_signup_path %>" method="post">
  <div class="field">
    <label for="first_name">First Name</label>
    <input id="first_name" type="text" value="<%= @signup&.first_name %>" />
  </div>
  <div class="field">
    <label for="last_name">Last Name</label>
    <input id="last_name" type="text" value="<%= @signup&.last_name %>" />
  </div>
  <div class="field">
    <label for="email">Last Name</label>
    <input id="email" type="text" value="<%= @signup&.email %>" />
  </div>
</form>

不鼓励：

<%= form_with url: "#", local: true do |form| %>
  <div class="field">
    <%= form.label :first_name %>
    <%= form.text_field :first_name %>
  </div>

  <div class="field">
    <%= form.label :last_name %>
    <%= form.text_field :last_name %>
  </div>

  <div class="field">
    <%= form.label :email %>
    <%= form.email_field :email %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

6、在可能的情况下，保持右键单击查看源代码的功能
早期网络的美妙之处在于，我们总能 "窥探 "到网页任何部分的代码。这对有抱负的开发人员来说是一个天赐良机，因为它让我们在理论（阅读代码如何工作）和实践（看到代码和界面）之间架起了一座桥梁。对于许多网站来说，我们可以复制并粘贴 html 或 css，然后在自己的网站上运行，以获得近乎相同的复制品。对现有代码片段进行 "混搭 "不仅是一种学习方式，而且往往也是我们创作新作品的基础。

此后，业界采用了一些 "改进 "方法，使这种做法变得更为罕见。例如，如果我们使用最流行的前端框架 React，我们就不能点击 "查看源代码"，复制代码并重新混合，因为 1.React 有一个构建步骤，这意味着我们在开发人员工具中看到的代码与开发人员编写的代码不同，而且 2.React 代码片段必须封装在 react 应用程序中才能工作。

对于遵循 HTML 优先原则的网站，我们又重新获得了 ViewSource 功能。事实上，HTML 优先的网站往往更进一步。因为如果使用 HTML 属性定义用户界面交互，那么在复制粘贴到新的代码库时，也可以保留这些交互（前提是目标文件包含相同的 js 库）。我们打算在某个时候将其扩展到 HTML First 代码片段库。

HTMX.org 上的 ViewSource 可供性

总结：
该网站上描述的实践和原则在整个行业中仍然被认为是小众的，并且使用它们的社区很小。