# CSS 样式标准 ## 核心原则 * **移动优先设计**：从移动风格开始，针对更大的屏幕进行增强 * **辅助功能合规性**：符合 WCAG 2.1 AA 标准 * **多语言支持**：正确显示重音字符和不同的书写系统 * **一致命名** ：使用 BEM 方法进行类命名（除非使用 Mantine） * **性能优化**：最小化 CSS 大小和加载时间 * **Mantine Integration** ：使用 Mantine UI v8 组件系统作为 React 前端 ## Mantine UI v8 集成 ### 1\.主题配置 //前端/src/theme.ts 从 '@mantine/core' 导入 { createTheme, MantineColorsTuple }; // Chuukese 词典的自定义调色板 const PrimaryBlue: MantineColorsTuple = [ '#e5f4ff', '#cde4ff', '#9bc5ff', '#64a4ff', '#3988fe', '#1d77fe', '#096fff', '#005ee4', '#0053cd', '#0047b5', ]; 导出常量主题 = createTheme({ 主要颜色：'蓝色'，颜色：{ 蓝色：原色蓝色， }, fontFamily: "'Noto Sans', 'Arial Unicode MS', sans-serif", // Chuukese 优化版式标题：{ fontFamily: "'Noto Sans', 'Arial Unicode MS', sans-serif", 字体粗细：'600'， }, // 默认为深色配色方案默认颜色方案：'深色'， // 楚克语文本的组件覆盖组件：{ 文本：{ 默认属性：{ 风格：{ fontFeatureSettings：“‘kern’1，‘liga’1” } } }, 文本输入：{ 默认属性：{ 样式：{ 输入：{ fontFamily: "'Noto Sans', 'Arial Unicode MS', sans-serif", } } } }, 文本区域：{ 默认属性：{ 样式：{ 输入：{ fontFamily: "'Noto Sans', 'Arial Unicode MS', sans-serif", 行高：1.6， } } } } } }); ### 2\. Mantine 提供程序设置 //前端/src/main.tsx 导入'@mantine/core/styles.css'; 导入“@mantine/notifications/styles.css”；从'@mantine/core'导入{MantineProvider}；从“@mantine/notifications”导入{通知}；从 '@mantine/modals' 导入 { ModalsProvider }；从'./theme'导入{主题}；函数应用程序（）{ 返回（ <通知位置=“右上”/> <模态提供者> {/* 应用内容 */} ）； } ### 3\.带有 Mantine 的楚克语文本从“@mantine/core”导入{文本、标题、徽章、卡片}； // 楚克语单词显示组件 function ChuukeseWord({ 单词, 定义 }: { 单词: 字符串; 定义: 字符串 }) { 返回（ <卡片阴影=“sm”填充=“lg”半径=“md”withBorder> <标题顺序={3} style={{ fontFeatureSettings: "'kern' 1" }}> {单词} {定义} ）； } // 使用 Mantine 翻译输入函数 TranslationInput({ 方向 }: { 方向: 'chk_to_en' | 'en_to_chk' }) { 返回（ <文本区域标签={方向==='chk_to_en'？ '楚克语文本' : '英文文本'} 占位符={方向==='chk_to_en' ？ “输入楚克语文本进行翻译...” : '输入要翻译的英文文本...'} 最小行数={4} 自动调整大小样式={{ 输入：{ fontFamily: "'Noto Sans', 'Arial Unicode MS', sans-serif", 字体大小：'1.1rem'， } }} /> ）； } ### 4\.常见的曼汀图案 // 加载状态从 '@mantine/core' 导入 { Loader, Center, Stack, Text }; <中心 h={200}> <堆栈对齐=“中心”> <装载机尺寸=“lg”/> 正在翻译... // 通知从“@mantine/notifications”导入{通知}；通知.显示({ title: '翻译完成', message: '您的文字已成功翻译', 颜色：“绿色”， }); // 模态框从 '@mantine/modals' 导入 { modals }； modals.openConfirmModal({ title: '删除条目', 孩子们：您确定要删除此条目吗？, labels: { 确认: '删除', 取消: '取消' }, 确认属性：{颜色：'红色'}， onConfirm: () => 处理删除(), }); ## CSS 架构（非 Mantine 样式） ### 1\.文件组织 /* 主样式表结构 */ @import 'normalize.css'; /* CSS 重置 */ @import '变量.css'; /* 自定义属性 */ @import 'typography.css'; /* 字体和文本样式 */ @import '布局.css'; /* 网格和 Flexbox 布局 */ @import '组件.css'; /* 可复用组件 */ @import 'utilities.css'; /* 实用类 */ @import 'responsive.css'; /* 媒体查询 */ ### 2\. CSS 自定义属性（变量）：根{ /* 颜色 - 应与 Mantine 主题一致 */ --主色：#228be6； --次要颜色：#64748b； --强调颜色：#f59e0b； --文字颜色：#c1c2c5； --文本光：#909296； --背景颜色：#1a1b1e； --表面颜色：#25262b； /* 版式 */ --font-family-primary: 'Noto Sans', 'Arial Unicode MS', sans-serif; --font-family-chuukese: 'Noto Sans', 'Doulos SIL', 'Arial Unicode MS', sans-serif; --字体大小基础：1rem； --字体大小大：1.125rem； --行高基数：1.6； --行高紧：1.4； /* Spacing - 匹配 Mantine 间距比例 */ --间距-xs: 0.625rem; /* 10px - Mantine xs */ --spacing-sm: 0.75rem; /* 12px - Mantine sm */ --间距-md: 1rem; /* 16px - Mantine md */ --间距-lg: 1.25rem; /* 20px - Mantine lg */ --spacing-xl: 2rem; /* 32px - Mantine xl */ /* Mantine 对齐的断点 */ --断点-xs: 576px; --断点-sm：768px； --断点-md：992px； --断点-lg：1200px； --断点-xl：1400px； } /* 深色模式（Mantine 默认）*/ [data-mantine-color-scheme="暗"] { --文字颜色：#c1c2c5； --背景颜色：#1a1b1e； --表面颜色：#25262b； } /* 灯光模式 */ [data-mantine-color-scheme="light"] { --文字颜色：#1f2937； --背景颜色：#ffffff； --表面颜色：#f9fafb； } ## 组件标准 ### 1\.楚克语文本显示 /* * 楚克语文本组件 * 目的：正确显示带有重音支持的楚克语文本 * 用法：适用于任何包含 Chuukese 内容的元素 */ .chuukese-文本 { 字体系列：var(--font-family-chuukese); 字体大小：var(--font-size-large); 行高：var(--行高-基); 方向： ltr； unicode-bidi：嵌入；字体功能设置：'kern' 1，'liga' 1； } /* 强调楚克语标题 */ .chuukese-text--标题 { 字体粗细：600；字母间距：0.02em；边距底部：var(--spacing-md); } /* 英文文本内嵌楚克语 */ .chuukese-text--内联{ 字体样式：斜体；字体粗细：500；颜色：var(--primary-color); } ### 2\.翻译接口组件 /* * 翻译输入组件 * 用途：翻译界面的输入字段 * 依赖项：需要 .form-group 包装器 */ .翻译输入{ 宽度：100%；最小高度：120px；填充：var(--spacing-md); 边框：2px 实心 var(--surface-color); 边界半径：0.5rem；字体系列：var(--font-family-chuukese); 字体大小：var(--font-size-base); 行高：var(--行高-基); 调整大小：垂直；过渡：边框颜色 0.2s 缓入缓出； } .翻译输入：焦点{ 概要：无；边框颜色：var(--primary-color); 框阴影: 0 0 0 3px hsla(217, 91%, 60%, 0.1); } .translation-input--chuukese { 方向： ltr；文本对齐：左对齐； } .翻译-输入--错误{ 边框颜色：#ef4444； } ### 3\.词典条目组件 /* * 词典输入卡 * 目的：显示各个词典条目 * 用途：字典词条信息的容器 */ .字典条目{ 背景：var(--背景颜色); 边框：1px 实心 var(--surface-color); 边界半径：0.5rem；填充：var(--spacing-lg); 边距底部：var(--spacing-md); 盒子阴影：0 1px 3px rgba(0, 0, 0, 0.1); 过渡：box-shadow 0.2s 缓入缓出； } .字典条目：悬停{ 盒子阴影：0 4px 6px rgba(0, 0, 0, 0.1); } .dictionary-entry__word { 字体大小：1.25rem；字体粗细：600；颜色：var(--primary-color); 边距底部：var(--spacing-sm); } .dictionary-entry__definition { 颜色：var(--文本颜色)；边距底部：var(--spacing-sm); } .dictionary-entry__发音 { 字体系列：“Courier New”，等宽字体；字体大小：0.9rem；颜色：var(--text-light); 背景：var(--表面颜色); 填充： var(--spacing-xs) var(--spacing-sm); 边界半径：0.25rem；显示：内联块； } .dictionary-entry__culture-note { 字体样式：斜体；颜色：var(--text-light); 左边框：3px 实心 var(--accent-color); 左填充：var(--spacing-sm); 顶部边距：var(--spacing-sm); } ## 布局标准 ### 1\.网格系统 /* * 自定义网格系统 * 用途：灵活的网格布局，适合各种屏幕尺寸 */ .网格{ 显示：网格；间隙：var(--spacing-md); } .grid--2-col { 网格模板列：1fr 1fr； } .grid--3-col { 网格模板列：重复（3，1fr）； } .grid--自动调整{ 网格模板列：重复（自动调整，minmax（300px，1fr））； } /* 响应式网格调整 */ @media（最大宽度：768px）{ .grid--2-col, .grid--3-col { 网格模板列：1fr； } } ### 2\.容器和间距 /* * 容器组件 * 目的：具有响应式最大宽度的主要内容包装器 */ .容器{ 宽度：100%；最大宽度：1200px；保证金：0 自动；填充：0 var(--spacing-md); } @media（最小宽度：768px）{ .容器{ 填充：0 var(--spacing-lg); } } /* 间距实用程序 */ .mb-sm { 边距底部：var(--spacing-sm); } .mb-md { 边距底部：var(--spacing-md); } .mb-lg { 边距底部：var(--spacing-lg); } .mt-sm { 顶部边距：var(--spacing-sm); } .mt-md { 顶部边距：var(--spacing-md); } .mt-lg { 顶部边距：var(--spacing-lg); } ## 响应式设计 ### 1\.移动优先媒体查询 /* 移动设备的基本样式 */ .导航{ 显示：柔性；弯曲方向：列；填充：var(--spacing-sm); } /* 平板电脑及以上 */ @media（最小宽度：768px）{ .导航{ 弯曲方向：行； justify-content：空间之间；对齐项目：居中；填充：var(--spacing-md); } } /* 桌面及以上 */ @media（最小宽度：1024px）{ .导航{ 填充：var(--spacing-lg); } } ### 2\.响应式排版 /* * 流体排版 * 目的：响应式字体缩放以提高可读性 */ .heading-1 { 字体大小：clamp(1.75rem，4vw，2.5rem)；字体粗细：700；行高：var(--行高-紧); 边距底部：var(--spacing-lg); } .heading-2 { 字体大小：clamp(1.5rem, 3vw, 2rem); 字体粗细：600；行高：var(--行高-紧); 边距底部：var(--spacing-md); } /* Chuukese 内容的响应式文本缩放 */ .chuukese-文本 { 字体大小：clamp(1rem, 2.5vw, 1.125rem); } @media（最大宽度：480px）{ .chuukese-文本 { 字体大小：1.125rem； /* 在小屏幕上显示更大以提高可读性 */ } } ## 无障碍标准 ### 1\.焦点管理 /* * 焦点样式 * 目的：键盘导航的清晰视觉指示 */ .btn：焦点， .form-输入：焦点， .翻译输入：焦点{ 轮廓：2px 实心 var(--primary-color); 轮廓偏移：2px； } /* 高对比度焦点以获得更好的可视性 */ @media（偏好对比度：高）{ .btn：焦点， .form-input:焦点{ 轮廓：3px 实心#000；轮廓偏移：2px； } } ### 2\.颜色和对比度 /* * 颜色可访问性 * 目的：保证足够的对比度 */ ：根{ --文本对比度：4.5； /* WCAG AA 标准 */ } /* 高对比度模式支持 */ @media（偏好对比度：高）{ ：根{ --主色：#000； --文字颜色：#000； --背景颜色：#fff； --表面颜色：#f0f0f0； } } /* 减少运动支持 */ @media（首选减少运动：减少）{ *, *::之前， *::之后{ 动画持续时间：0.01ms！重要；动画迭代计数：1！重要；转换持续时间：0.01ms！重要； } } ## 实用类 ### 1\.常用工具 /* 显示实用程序 */ .d-none { 显示：无； } .d-block { 显示：块； } .d-inline { 显示：内联； } .d-inline-block { 显示：内联块； } .d-flex { 显示：flex; } .d-grid { 显示：网格； } /* 文本实用程序 */ .text-center { 文本对齐：居中； } .text-left { 文本对齐：左； } .text-right { 文本对齐：右； } .text-primary { 颜色：var(--primary-color); } .text-secondary { 颜色：var(--secondary-color); } .text-muted { 颜色：var(--text-light); } /* 响应式实用程序 */ @media（最小宽度：768px）{ .d-md-block { 显示：块； } .d-md-none { 显示：无； } .text-md-left { 文本对齐：左； } .text-md-center { 文本对齐：中心； } } ## 最佳实践 ### 1\.性能优化 * 使用 CSS 自定义属性来实现一致的主题 * 尽量减少使用昂贵的属性（盒子阴影、渐变） * 针对关键渲染路径进行优化 * 使用高效的选择器（避免深层嵌套） ### 2\.可维护性 * 遵循 BEM 命名约定 * 将相关样式分组在一起 * 注释复杂或不明显的样式 * 使用有意义的变量名 ### 3\.跨浏览器兼容性 * 在主要浏览器（Chrome、Firefox、Safari、Edge）中测试 * 使用 autoprefixer 作为供应商前缀 * 为现代 CSS 功能提供后备 * 使用不同的字体设置进行测试 ### 4\.多语言注意事项 * 如果需要，支持 RTL 语言 * 支持Unicode字符的字体堆栈 * 重音字符的适当间距 * 考虑不同语言的文本扩展/收缩 ## 验证标准 CSS 应该： * ✅ 通过 W3C CSS 验证 * ✅ 符合 WCAG 2.1 AA 无障碍标准 * ✅ 在主流浏览器中正确显示 * ✅ 支持正确的楚克语文本渲染 * ✅ 遵循一致的命名约定 * ✅ 包括响应断点 * ✅ 优化性能和加载速度

CSS 样式标准

包含技能