Skip to content

Latest commit

 

History

History
79 lines (54 loc) · 3.52 KB

27.css-in-js杀鸡用牛刀.md

File metadata and controls

79 lines (54 loc) · 3.52 KB

027.精读《css-in-js 杀鸡用牛刀》.md

  • css-in-js 的努力和 css-in-js 的发展

css-in-js 带来的问题

  • 结构/行为 vs 样式： 模块化 jsx 让 html 结构与行为耦合在一起，但是样式不应该与模块进行耦合，样式是全局行为，样式单独在某一个模块中使用增加理解成本
  • 松耦合和紧耦合：样式与模块松耦合使得系统 获得更多自由度和拓展性，交互与结构紧耦合，交互依赖于结构
  • 视觉一致性问题： 局部样式阻碍视觉一致性，全局化样式用于保证此问题
  • 代码复用问题，每个组件都维护自己的样式，则会存在很多样式重复代码粘贴问题。维护性降低

OOCSS、SMACSS、BEM、ITCSS、ECSS 思路

  • css-in-js 仍然具备视觉一致性

    • 模块化样式解决样式冲突问题，但是也削弱了全局样式的把控，无论是全局 css 还是局部 css，由于独立组件不确定会被哪些网站引用，所以在明确风格后，无论抽离 css 变量还是 js 变量都具有复用性

    • 全局 css 开发，适合自上而下控制，组件定义 class 不需要关心具体样式，通过全局 class 控制，css-in-js 是自下而上的，需要预先抽出整体风格样式模块，效果与全局 css 等价

      • 全局 css 控制风格
      <style>
    .container{}
    .list-item{}
    .submit-button{}
</style>
<div className="container">
	<div className="list-item"></div>
    <div className="list-item"></div>
    <div className="submit-button"></div>
</div>

      • css-in-js 风格

        const CommonContainer = styled.div``
const CommonListItem = styled.div``
const CommonSubmitButton = css``
export const Container = styled(CommonContainer)``
export const ListItem = styled(CommonListItem)``
export CommonSubmitButton = styled/div`${CommonSubmitButton}`
        • 抽离公共样式包，业务代码样式引用包，不同环境，公共样式通过所在宿主环境判断，给与业务代码样式切换。

  • OOCSS 称为 css 面向对象加强版，避免 class 之间的冗余，创建可复用的 class

    .size {width: 25%;}
.bgblue {background: blue;}
.g-bd2{margin:0 0 10px;}

  • SMACSS

    • CSS 类别： Base 基础样式， Layout 布局样式，Module 模块样式，state 状态样式，theme 主题样式
    • 对于五种类别样式命名需要加上前缀
      1. base 基础元素不需要命名
      2. Layout 使用.l- 或者 layout-前缀
      3. Module 使用模块名命名， 文章区块 .article
      4. state 使用.is-
      5. theme 使用 theme-

  • BEM 更像 SMACSS 分类加强版， __element 表述后代，--modifier 表述状态

  • ITCSS 对于 CSS 元素进行分层： settings 与预处理器一起使用 ，tools 辅助函数变量， Generic 通用层，用于重置基础元素(html, body)样式重置， Elements 对于通用元素样式重置, objects 类似 oocss 对象， Components 对组件样式定义，Utilties 工具类

  • ECSS -- .nsp-Component_childrenNode-rariant ：nsp - 一个尽量短的命名空间，component - 文件名， ChildrenNode - 子元素名，variant - 额外内容

summary

  • css 设计初衷全局化控制样式， 即使产生样式冲突混乱的问题，要记住模块化开发的今天， 样式还是要保持整体全局的统一性，即使是 css-in-js 方法
  • 原生 css 解决方案用于 css-in-js 也是很不错的选择，包括以后的原子化 css(tailwind css)