-
使用媒体查询可根据设备特性应用不同样式，实现响应式设计。基本语法为@media媒体类型and(媒体特性){样式规则}，常用媒体类型包括screen（屏幕设备），常用于适配不同屏幕宽度、高度等，确保页面在各类设备上良好显示。
-
用@mixin统一控制菜单项状态最可靠，通过变量定义过渡、混合宏封装hover/focus/active样式，并用@if处理focus-visible；&嵌套确保选择器精准，响应式@media宜嵌套在模块内，可访问性需结构与JS协同。
-
“影子属性”指在派生对象上设置与原型同名的自有属性以遮蔽原型属性，读取优先实例值、删除后回退原型值；Object.create()构建原型链，赋值操作自然实现该行为。
-
Group-hover为什么必须配合group类使用直接写group-hover:xxx没效果，是因为Tailwind的group-hover是一个“依赖类”——它只在父元素有group类时才生效。没有group，group-hover根本不会被编译进CSS。错误写法：文字→完全无效正确结构：文字group必须加在触发hover的祖先容器上（不一定是直接父级，但必须是DOM上层）子元素hover状态下修改父级以外的兄弟元素常见需求：鼠标悬停在
-
Date对象处理时区和国际化存在四大坑：1.不带时区的字符串解析为UTC，导致本地时间偏差；2.toLocaleString输出依赖系统环境，需显式指定locale；3.夏令时切换引发时间计算错误，建议用UTC运算；4.本地时间存储致跨时区混乱，应统一存UTC时间戳并按需格式化。复杂场景推荐使用luxon、dayjs插件或Temporal。
-
应优先使用HTML5原生属性（required、type、pattern）做基础校验兜底，再用JavaScript增强交互反馈、组合逻辑与异步校验；checkValidity()仅返回布尔值，reportValidity()才触发提示；异步校验需手动管理状态并防抖；复杂规则放JS，简单规则用pattern。
-
checkValidity()仅校验不触发样式，需reportValidity()或手动处理；对disabled元素恒返true；动态添加字段须用form.append而非innerHTML；setCustomValidity("")才能清除自定义错误；框架中需等DOM同步后再调用。
-
Object.getPrototypeOf(obj).constructor.name可安全获取实例的类名，优先于instanceof和字符串解析；需处理constructor被覆盖、匿名类、跨iframe等边界情况，并提供兜底方案。
-
String.prototype.normalize()是解决Unicode等价性问题的核心方法，支持NFC、NFD、NFKC、NFKD四种标准化形式，分别适用于显示存储、底层处理、搜索匹配和文本清洗，但不处理简繁体等非等价字符。
-
HTML列表嵌套必须将子列表（ul/ol）完整置于li标签内，否则浏览器会自动拆分为并列列表而非嵌套结构；错误写法如<ul><li>项</li><ol><li>子项</li></ol></ul>会被解析为两个独立列表。
-
Tailwind中extend.spacing不继承默认值，仅合并新增键，会导致未声明的mt-4等类彻底消失；正确做法是用theme.spacing完整重写或确保extend包含全部所需键。
-
手风琴边框由CSS控制，非HTML或属性开关决定；需对容器如.accordion-item设border及overflow:hidden配对border-radius；无边框应通过间距、背景色、阴影等替代，避免粘连。
-
传统<link>标签在SPA中易导致全局样式污染、维护困难、死代码堆积、加载性能差和封装性缺失，难以适应组件化开发。现代方案通过构建工具将CSS模块化，如CSSModules实现局部作用域和按需加载，CSS-in-JS支持动态样式与逻辑共存，Tailwind提供原子类快速开发，Sass/Less增强可维护性。选择方案需权衡项目规模、团队习惯、动态需求、性能与可维护性，结合Webpack或Vite实现打包优化。优化后可显著提升首屏速度、减少资源体积、实现精准缓存、降低布局抖动，最终增强用户体验。
-
HTML无法直接显示密钥最后使用时间，因该字段仅存于后端数据库或密钥管理系统；前端需通过fetch调用后端API获取并安全渲染，严禁硬编码或使用innerHTML，且不得缓存至localStorage/sessionStorage。
-
float在小屏下不能仅靠mediaquery设为none，因其无天然回退机制，需同步清除浮动、重置父容器清除方式并处理兄弟元素的clear；推荐改用flex或grid布局替代。
