用原生 JS 写个纯静态页面竟然能把“仪式感”拉满

很多前端现在习惯了各种框架，但有时候回归原生态反而能出奇效。我最近在研究一个叫 Feijoada Anonymous 的项目，它没有用任何框架，没有包管理器，也没有构建步骤，就三个简单的文件，JavaScript 部分全部写在一个 420 行的 IIFE 闭包里，这种 Keep It Simple 的实操方式在现在的开发环境下反而显得很硬核。

最让我关注的是这个项目的视觉实现，作者定义了一套叫 Azulejo Modernista 的视觉系统，通过 CSS 模拟巴西建筑上的釉面瓷砖效果。它利用了重复渐变来画勾缝线，并给每个组件加上 3px 的墨色边框，配合 Courier Prime 这种像公文一样的字体，把一个“美食互助小组”的官僚主义幽默感给做出来了。

这个项目的交互逻辑其实挺有参考价值的，尤其是那个自诊量表，它通过 JS 实时监听 12 个复选框的状态，然后动态驱动一个粘性刻度表，随着勾选数量增加，状态从“无症状”一路飙升到“建议立即买票回巴西”。

如果你想复刻这种纯净的开发流程，可以参考它的结构：

一、 HTML 结构
直接使用语义化标签划分五个 Section，完全不依赖组件库，所有样式通过原生 CSS 变量控制颜色方案（钴蓝、阳光黄、叶绿）。

二、 JS 逻辑处理
全部封装在立即执行函数表达式（IIFE）中，避免全局污染，核心逻辑如下：

(function() {
  // 状态追踪：监听所有 checkbox 变化
  const checkboxes = document.querySelectorAll('.diagnosis-check');
  const severityMeter = document.querySelector('#severity-meter');

  checkboxes.forEach(check => {
    check.addEventListener('change', () => {
      const checkedCount = document.querySelectorAll('.diagnosis-check:checked').length;
      updateSeverity(checkedCount);
    });
  });

  function updateSeverity(count) {
    // 根据勾选数量动态改变刻度表位置和文本
    // 逻辑实现：count -> 映射到对应的严重等级文案
  }
})();

三、 视觉细节
利用 CSS 的 background-image 配合 linear-gradient 制造出瓷砖缝隙的视觉欺骗感，而不是用图片，这样加载速度极快。

这种不依赖任何 npm 包的部署方式，对于做轻量级 Landing Page 来说简直是保姆级指南。在这个 AI 自动生成代码的时代，能看到这种对原生 API 掌控力很强的作品，确实能给不少开发灵感。