纯静态页面用原生 JS 把仪式感做到极致

纯手写DOM操作简直是自虐，以后改个样式得在几百行代码里找半天。不过，偶尔回归原生反而能跑出意想不到的效果。最近在拆解一个叫 Feijoada Anonymous 的项目，它既没引入框架，也没配包管理器，更没有构建流程，整个工程仅三个文件，JavaScript 全部压在一个 420 行的 IIFE 闭包里。这种极简实操在当下的工程环境里反而显得格外硬核。

最吸引我的是它的视觉语言。作者自定义了一套名为 Azulejo Modernista 的视觉系统，用 CSS 把巴西建筑上的釉面瓷砖质感还原出来：靠重复渐变画出勾缝线，给每个组件加 3px 墨色描边，再配上像公文一样的 Courier Prime 字体，生生把一个“美食互助小组”的官僚幽默感立住了。

交互层面同样有参考价值，尤其是那套自诊量表。脚本实时监听 12 个复选框状态，动态驱动一个粘性刻度条，随着勾选数量递增，状态文案从“无症状”一路飙升到“建议立即买票回巴西”，逻辑清晰且极具张力。

若想复刻这种纯净开发流，可按以下结构拆解：

语义化标签与CSS变量构建基础架构

一、HTML 结构
直接用语义化标签切分五个 Section，完全不依赖组件库，所有配色通过原生 CSS 变量统管（钴蓝、阳光黄、叶绿）。

IIFE封装逻辑避免全局变量污染

二、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渐变模拟瓷砖纹理提升性能

三、视觉细节
利用 CSS background-image 配合 linear-gradient 制造瓷砖缝隙的视觉欺骗，而非引入图片，加载速度快得惊人。

这种零 npm 依赖的部署模式，对轻量级 Landing Page 开发简直是保姆级范

原生JS写这种小规模项目简直是快感，只要不碰状态管理，简直比用React爽太多了！不少前端早已习惯在各类框架里起舞，偶尔回归原生反而能跑出意想不到的效果。近期在拆解一个叫 Feijoada Anonymous 的项目，它既没引入框架，也没配包管理器，更没有构建流程，整个工程仅三个文件，JavaScript 全部压在一个 420 行的 IIFE 闭包里，这种极简实操在当下的工程环境里反而显得格外硬核。最吸引我的是它的视觉语言。作者自定义了一套名为 Azulejo Modernista 的视觉系统，用 CSS 把巴西建筑上的釉面瓷砖质感还原出来：靠重复渐变画出勾缝线，给每个组件加 3px 墨色描边，再配上像公文一样的 Courier Prime 字体，生生把一个“美食互助小组”的官僚幽默感立住了。交互层面同样有参考价值，尤其是那套自诊量表。脚本实时监听 12 个复选框状态，动态驱动一个粘性刻度条，随着勾选数量递增，状态文案从“无症状”一路飙升到“建议立即买票回巴西”，逻辑清晰且极具张力。若想复刻这种纯净开发流，可按以下结构拆解：

语义化标签与CSS变量构建基础架构

一、HTML 结构
直接用语义化标签切分五个 Section，完全不依赖组件库，所有配色通过原生 CSS 变量统管（钴蓝、阳光黄、叶绿）。

IIFE封装逻辑避免全局变量污染

二、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渐变模拟瓷砖纹理提升性能

三、视觉细节
利用 CSS background-image 配合 linear-gradient 制造瓷砖缝隙的视觉欺骗，而非引入图片，加载速度快得惊人。

这种零 npm 依赖的部

直接在HTML里塞data属性真的爽，变量名少了，页面清爽太多了。比如，在一个超简单的Landing Page项目里，你可以用语义化标签切分Section，全靠原生CSS变量管理配色，钴蓝、阳光黄、叶绿全塞进data属性里，轻松统管整个视觉系统。别用组件库，直接用IIFE封装逻辑，避免全局污染，脚本实时监听复选框状态，动态驱动粘性刻度条，从“无症状”飙到“建议立即买票回巴西”，逻辑清晰有张力。纯CSS渐变模拟瓷砖纹理，利用background-image配合linear-gradient制造视觉欺骗，不用图片，加载速度快得惊人。这种零npm依赖的部署模式，对轻量级Landing Page开发简直是保姆级范本。