美文网首页程序员我爱编程
CSS-in-JS 还是 CSS-Modules

CSS-in-JS 还是 CSS-Modules

作者: Yifan15 | 来源:发表于2018-03-20 13:50 被阅读59次

    结论

    目前并无明确的结论对于应该使用 CSS-in-JS 还是 CSS-Modules,所以需要看项目的需要以及自己的喜好,喜欢 JS 风格的写法,那就偏向于用 CSS-in-JS,喜欢 Plain-CSS 的风格,就使用 CSS-Module(css-loader and style-loader in webpack),行业内对于使用什么也都争论不休

    CSS in JS

    缺点

    1. 性能问题(Benchmark 参考 链接1)
    2. 无法使用 Pseudo-classes,Pseudo-elements,Media queries
    3. Debug 不方便

    优点

    1. Js Style,使用方便
    2. 对象传递很方便
    3. Recompute styles at runtime

    共同解决的问题

    Dead Code elimination: 无用代码的移除
    Composition: 组合
    Dependencies: 依赖其他的 CSS 文件
    Conditional styling: 不同 state 使用不同的 Style
    Call site customization:使用者指定其 Style 的能力

    Note:

    1. Facebook and Instagram 都使用 CSS in JS
    2. react-inline 可以提取 CSS 发布
    3. radium 可以解决缺点3,引入了很多特性
    4. Plain Css 也可以利用 Sass 等实现一些 JS 可以做的事情

    参考链接

    1. Use CSS Modules instead of inlining styles in React
    2. React: CSS in JS
    3. Modular CSS with React (推荐阅读)
    4. Inline Styles are so 2016

    相关文章

      网友评论

        本文标题:CSS-in-JS 还是 CSS-Modules

        本文链接:https://www.haomeiwen.com/subject/guvvqftx.html