前端技术文章
-
<i>标签用于无语义强调但需斜体呈现的文本，如命令名、生物分类、外文短语；<em>用于需读屏软件识别的语气或语义强调；误用会损害可访问性与语义结构。437 收藏 -
lessc默认编译慢是因为默认开启源码映射、严格语法检查及每次重复解析全部@import依赖树；watch卡住因监听粒度粗，递归扫描含node_modules的无关文件；输出冗余因未压缩、不合并选择器；API调用比命令行更可控但需手动缓存。437 收藏 -
matches()比element.tagName更灵活语义化，支持CSS选择器语法实现复合条件匹配、精准类组合判断、事件委托中跨标签行为过滤，且现代浏览器兼容良好。437 收藏 -
pattern属性仅作前端格式提示，不保证数据合规，真正合规须依赖后端白名单校验与前端协同；其正则不加/^$/、需配title提示、移动端支持弱，且不可替代inputmode等输入体验优化手段。437 收藏 -
BEM通过“块__元素--修饰符”结构解决CSS作用域失控问题：user-card__avatar--large明确标识模块归属、部件身份与状态变体，避免同名类冲突与语义混淆。437 收藏 -
Object.assign能复制可枚举的Symbol自有属性，Symbol仅提供命名隔离与不易误覆的“软私有”，非语言级私有；真私有需用#field或闭包。437 收藏 -
Symbol类型在JavaScript中的独特应用场景包括：作为唯一属性键、避免属性冲突、实现私有变量、创建不可枚举属性、用于对象标识等。这些特性使得Symbol在构建模块化、可维护的代码时非常有用。
Symbol是ES6引入的唯一值类型，用于避免属性名冲突、模拟私有属性、定义对象特殊行为（如Symbol.iterator）和替代魔术字符串，提升模块安全与语义清晰性。437 收藏 -
<kbd>标签专用于标记用户必须亲手按下的物理键或组合键，如<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>；不可用于代码（应选<code>）或系统输出（应选<samp>），嵌套须符合真实按键逻辑，且需保障语义完整性以支持无障碍访问。437 收藏 -
JavaScript事件是用户或浏览器触发的通信机制，通过addEventListener绑定可避免覆盖、支持多监听和精确移除；需善用event对象属性（如target、preventDefault）、事件委托及语义化API（如key而非keyCode）。437 收藏 -
系统性掌握HTML5需分三阶段：一、掌握语义化标签结构，如<header><nav><main>等及DOCTYPE声明；二、通过复刻响应式页面练习盒模型与媒体查询；三、用JavaScript实现DOM获取、事件监听与内容修改。437 收藏 -
不推荐在main.js中直接import全局CSS文件——它会生效但破坏Svelte样式作用域设计，引发HMR失效、CSS提取异常及预处理器配置失效等问题；应改用__layout.svelte或+layout.svelte中的<styleglobal>引入。437 收藏 -
outline不占布局空间且环绕元素绘制，常用于焦点提示；通过outline-color、style、width设置样式，配合outline-offset控制偏移，提升可访问性。437 收藏 -
grid-template-columns和grid-template-rows需显式定义行列并确保父容器有明确宽高，否则隐式轨道和fr单位失效导致布局塌陷；repeat()更安全，fr依赖可用空间，嵌套时需逐层确认高度来源。437 收藏 -
推荐五款中文支持良好的HTML编辑器：一、VSCode官方简体中文语言包；二、Notepad++简体中文绿色版；三、SublimeText4安全汉化补丁；四、BlueGriffon3.1简体中文正式版；五、Htmldocedit1.02中文内建版。437 收藏 -
Emotion的keyframes返回的是标识对象而非字符串，必须通过插值（如animationName:${spin}）在css/styled中使用；不可硬编码动画名或拼接字符串；支持闭包传参但需避免重复创建；SSR需配合CacheProvider和createCache；哈希去重依赖内容一致，非变量名。437 收藏