直接修改element.style仅影响行内样式，优先级高但不持久；应优先用classList增删类名复用CSS规则；读取真实样式须用getComputedStyle()；全局动态样式宜插入标签。

最轻量的CSS作用域隔离方案是用data-属性+后代选择器，如[data-comp="user-card"].avatar；需注意空格、避免ID/全局类、控制优先级。

应使用复合选择器实现多条件同时满足的样式应用：如.btn.primary表示同时具备btn和primary类；button.submit:hover需同时满足button标签、submit类及hover状态；button[type="submit"]:disabled则要求butto...

attr$="value"是CSS后缀匹配属性选择器，仅匹配属性完整值以指定字符串结尾的元素，不支持子串、正则，且默认不区分大小写。

动态元素应优先用data-*属性或属性选择器定位，避免依赖不稳定的class；事件代理配合class切换是主流方案；ShadowDOM需用:host或::slotted；SSR和渲染时序问题需用requestAnimationFrame等兜底。

该用~选择器当需匹配同一父元素下参考元素之后的所有同级兄弟元素，而+仅匹配紧邻的下一个；~在表单提示统一控制中更灵活，但要求DOM同级且顺序靠后，否则需改用父类、属性选择器等替代方案。

类选择器（.btn）最直接可靠，只匹配带指定class的元素，不限标签类型；可组合标签名、父级类或伪类（如:not(.disabled)）提升精准度；应避免宽泛命名与过深嵌套，必要时结合属性选择器增强排他性。

prefers-color-scheme是CSS媒体查询，用于响应系统暗色偏好：@media(prefers-color-scheme:dark){/暗色样式/}，支持Chrome76+等现代浏览器，值为light/dark/no-preference，需配合data-theme属性避免与手动切换冲突。

应使用属性选择器精准选中文本类表单元素，如input[type="text"]等，并包含textarea和select；需重置box-sizing、resize、vertical-align及字体行高；剥离系统样式用appearance:none并补全下拉箭头；禁用态须兼顾可访问性，...

通用兄弟选择器~可选中同一父元素内A之后所有同级B元素，解决传统相邻选择器无法跨节点样式联动的难题，适用于表单提示控制、radio内容切换等场景。

CSS群组选择器用逗号分隔多个选择器，使相同样式规则一次性应用到多个元素；它支持统一设置按钮、语义标签、表单禁用态等场景，但需注意逗号表示“或”关系、优先级独立计算、避免过度堆砌及兼顾语义化。

^=是CSS属性选择器中的前缀匹配，要求属性值严格以指定字符串开头（区分大小写且忽略前后空格），如[data-id^="user-"]匹配"user-123"但不匹配"user-123"或"US...