CSS问题集中讨论区

[swustzzh]

CSS样式隔离：

• BEM: Block Element Modifier，antd里面的命名很多以这种格式，适用于组件库
  • 优点：无作用域样式污染、可读性好
  • 缺点：命名太长？？？一个好名字倒是比较重要
• CSS Modules：CSS模块化
  • 优点：100%解决样式无污染问题、学习成本低
  • 缺点：需要频繁输入styles、没有变量、可读性差
• CSS in JS
  • 优点：无作用域样式污染、无用的CSS堆积问题（未被使用的变量不会被打包？）、基于状态的样式定义
  • 学习成本、代码可读性差、代码格式不好维护、性能消耗
• 预处理器：Sass、Less、Stylus、PostCSS
  • 优点：解决无作用域样式污染问题、可读性好
  • 缺点：借助编译工具
• Shadow DOM
  • 优点：浏览器原生支持、严格意义上的样式隔离
  • 缺点：浏览器兼容、只对制定范围内的dom结构起作用
• Vue Scoped：vue特定的css限制作用域的方式

[swlws]

滚动条

1. 滚动条占用盒子宽度

scrollbar-gutter: stable;

[swlws]

Grid

1. 区域横跨
   达到类型flex布局的，自动向前挤

grid-column: span 2 // 横跨两列