-
核心是用最简HTML5结构起步，避免过度设计：使用语义化标签（header/main/footer/section）、必加viewport元标签、内联10行以内CSS、图片加alt、外链加rel="noopener"、用UTF-8编码和相对路径，部署首选GitHubPages。
-
BEM解决的是Flex协作问题而非兼容性问题，要求容器类名绑定Block、Modifier表达业务意图、子项命名带上下文、响应式用静态Modifier控制。
-
需结合Canvas绘图、事件监听与状态管理实现象棋游戏：一、建Canvas画布并获取2D上下文；二、绘制9×10棋盘、楚河汉界及九宫格；三、用二维数组定义棋子属性与初始布局；四、通过鼠标事件实现选子与落子逻辑；五、为各类棋子编写独立走法规则函数。
-
with语句在严格模式下被完全禁用，非严格模式下已被主流引擎废弃，绝不该在新代码中使用；它破坏作用域透明性、阻碍静态分析、导致变量引用不可预测，并引发难以调试的错误。
-
选JavaScript图表库需聚焦需求匹配度、学习成本、维护活跃度三点：静态图用Chart.js或ECharts，实时交互选D3.js或AntVG2，按框架兼容性、体积和更新频率综合评估。
-
用flex布局实现侧边菜单：父容器display:flex，菜单flex:00200px，主内容flex:1并overflow:auto；高亮靠JS匹配URL动态加active类；移动端用translateX(-100%)抽屉式切换；侧边栏推荐position:sticky而非fixed以保障语义与兼容性。
-
WebLocksAPI通过资源维度唯一锁名协调多标签页对共享状态的原子访问，所有读-改-写操作须在锁回调内完成并返回Promise，不支持环境需服务端幂等或前端提示降级。
-
capture属性在移动端可调用摄像头，但仅限特定场景且高度依赖浏览器实现；现代AndroidChrome、Safari（iOS16.4+）支持capture="environment"或capture="user"触发原生相机界面，而旧版iOS、微信内置浏览器等多数不支持。
-
<var>是纯语义标签，用于标记文档中表示变量名、数学符号或占位符的文本，不具动态功能，不影响运行时行为，仅提升可访问性与SEO。
-
必须用参数化Mixin管理按钮：尺寸用语义化map+guard判断的.button-size()，颜色变体显式分离@bg/@border/@text，状态样式正交封装为.button-state()，主题变量须在组件前导入以确保上下文一致。
-
呼吸感动画本质是用cubic-bezier(0.25,0.1,0.25,1.0)控制scale与translateY同步变化，通过压扁→拉伸的形变反馈模拟自然节奏，需注意iOSSafari对贝塞尔y值限于[0,1]及keyframes内不可设timing-function。
-
文本换行异常需协同设置word-break与white-space：前者控制断词位置（normal/break-all/keep-all），后者决定空白处理与换行权限（normal/nowrap/pre/pre-wrap）；长URL用break-all+normal，中英混排防误断用keep-all，预设换行用pre-line，优先选overflow-wrap:break-word保兼容。
-
移动端过渡动画卡顿的根本原因是重绘开销大，应仅用transform和opacity触发硬件加速，明确声明过渡属性，结合媒体查询按设备降级时长与效果，并适配触控操作与渲染瓶颈。
-
商品卡片应使用语义化HTML结构：用<article>包裹，标题用<h3>，价格等关键字段用带语义类名的标签（如<spanclass="price">），主图<img>必须含描述性alt属性，促销标签用<spanrole="note">，按钮统一为<buttontype="button">；CSS布局优先用flex实现单列流，大屏再切grid，禁用固定高度，图片区域设aspe
-
Tailwind中before/after伪元素必须显式声明content，如before:content-[""]，否则无效；所有样式需加before:/after:前缀；content值需在配置中扩展；定位需宿主relative+伪元素absolute及z-index控制。
