多端共用样式的核心是提取通用CSS为独立文件（如common.css），通过命名空间、自定义属性和兼容性处理实现跨端统一引入与维护，避免冗余和冲突。
多端共用样式，核心是把重复的 CSS 提取成独立文件，在各端（Web、H5、小程序、App 内嵌页等）统一引入，避免样式冗余和维护不一致。
提取公共 CSS 文件
将通用样式（如重置样式、基础字体、颜色变量、常用工具类、栅格系统、按钮/卡片基础结构等）单独抽离为 common.css 或 base.css。注意只放真正跨端一致的部分，避免写死像素值或平台专属属性（如 -webkit- 前缀需谨慎，小程序不支持部分 CSS 特性）。
- 用 CSS 自定义属性（
:root）管理颜色、间距、圆角等可配置项，方便后续主题切换 - 避免使用仅 Web 支持的特性（如
position: sticky、filter），或加注释标明兼容性 - 可配合 PostCSS 插件（如
postcss-preset-env）做语法降级，但需确认目标端是否支持编译后输出
在各端正确引入公共 CSS
不同端引入方式略有差异，关键是确保公共样式优先加载、不被覆盖：
-
Web / H5：在
中用最先引入，早于业务 CSS -
Vue / React 项目：在入口 JS（如
main.js）顶部import '@/styles/common.css'；确保打包时被识别为全局样式 -
微信小程序：无法直接 link 外部 CSS，需将公共样式复制到
app.wxss顶部，或通过构建脚本自动注入；也可用@import引入本地common.wxss -
App 内 WebView：可托管
common.css到 CDN，HTML 中同步加载；或随包体下发，用绝对路径引入
避免样式污染与冲突
共用 CSS 不等于全局裸写。需控制作用域和层级：
立即学习“前端免费学习笔记（深入）”；
- 用 BEM 或命名空间前缀（如
.u-text-center、.m-btn）降低意外覆盖风险 - 慎用通配符重置（
* { margin: 0; }），小程序和部分 WebView 对通配符支持差，建议用更安全的html, body, div, p, ...显式列表 - 组件级样式（如 Vue 的
或 CSS Modules）仍保留，公共 CSS 只负责基础层和工具层
构建与发布协同
让公共 CSS 的更新能及时同步到各端：
- 将
common.css放在独立 npm 包中（如@org/styles），各端作为依赖安装，版本号管理变更 - 若无私有 npm，可用 Git Submodule 或 CI 构建时自动拉取最新版并复制到各项目
src/assets/css/ - 上线前建议跑一次跨端视觉回归测试，尤其关注表单控件、文字截断、flex 布局在不同环境下的表现
