17370845950

多端共用样式的核心是提取通用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 布局在不同环境下的表现