Base.css

/* === 基础 Reset（优化版） === */

/* 清除常见元素的默认 margin 和 padding */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 合并到这里，更简洁 */
}

/* 设置全局字体与颜色 */
body {
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333333;
  background-color: #ffffff; /* ✅ 明确设置背景色，避免浏览器默认灰色 */
  line-height: 1.5;
  text-rendering: optimizelegibility; /* ✅ 提高文字渲染效果 */
  -webkit-font-smoothing: antialiased; /* ✅ 改善 Mac 上字体显示 */
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除斜体 */
em,
i {
  font-style: normal;
}

/* a 标签默认样式 */
a {
  text-decoration: none;
  color: inherit; /* ✅ 使用 inherit 让颜色继承父级，更灵活 */
  cursor: pointer;
}

/* 图片对齐与自适应 */
img {
  display: block; /* ✅ 避免底部空隙问题 */
  max-width: 100%; /* ✅ 图片不超出容器 */
  height: auto;
}

/* 输入框样式优化 */
input,
textarea,
button,
select {
  border: none;
  color: inherit;
  background: none;
  outline: none;
  font: inherit; /* ✅ 继承字体 */
}

/* 清除浮动（现代写法） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Stylelint

1. 安装 Stylelint

在项目中安装 Stylelint 及常用配置插件：

npm i stylelint stylelint-config-standard stylelint-order stylelint-prettier -D

2. 新建.stylelintrc.js 文件

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-prettier/recommended"],
  plugins: ["stylelint-order", "stylelint-prettier"],
  rules: {
    "prettier/prettier": true,
    "no-descending-specificity": null,
    "function-url-quotes": "always",
    "color-hex-length": "long",
    "rule-empty-line-before": "always",
    "font-family-no-missing-generic-family-keyword": null,
    "property-no-unknown": null,
    "no-empty-source": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["deep"],
      },
    ],
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "font-weight",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition",
    ],
  },
};

3. 在 settings.json 增加

"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  },

Gitignore

# 忽略 Node.js 的依赖包
node_modules/

# 忽略构建输出（如果以后用打包工具会生成）
dist/
build/

# 忽略临时文件
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# 忽略系统文件（Windows / macOS）
.DS_Store
Thumbs.db

# 忽略编辑器配置（如果不想上传）
.vscode/
.idea/

# ESLint 缓存文件（如果有）
.eslintcache