07｜组件样式：聊聊CSS-in-JS的特点和典型使用场景

作者回复: 你好，大海，你提的这个问题切中要害。我和我的同事们在使用emotion的初期也对这个问题很苦恼。但后来发现React Developer Tools从哪个版本开始就可以过滤组件树的组件了，这个问题就没再困扰过我们。 请在React Developer Tools的设置（小齿轮）中，切换到“组件”页签，在底部的“隐藏组件…”中新加两条规则：name: Emotion, name: Insertion，然后刷新页面，你的组件树就清净了。

作者回复: 你好，Custom_DOM，我非常能理解你对CSS-in-JS的看法。我自己也是从table到div+css、从BEM到SCSS一路写过来的，一直以来也认为HTML写结构、CSS写样式、JS写逻辑。 但当我熟悉React、习惯JSX语法后，我不再纠结是否一定要把HTML和JS隔离开——在前端组件开发这个领域里，HTML和JS只是具体的内部实现技术，在组件与组件之间、组件与整体应用之间起更关键作用的，还是“接口”。这层抽象隐藏了细节，更有利于复杂应用的开发。这个思路我在第13节课也有介绍。 那么，在前端组件这个体系下，我们该如何看待样式？它是组件接口的一部分，还是内部实现的一部分？ 然后就来到我在这节课开篇里提到的，CSS技术在前端组件开发中的不足：……领域不同，CSS（截止到目前标准化的）尚不具备现代前端组件化开发所需要的部分领域知识和能力，所以需要其他技术来补足。这些知识和能力主要包括四个方面： * 组件样式的作用域需要控制在组件级别； * 组件样式与组件需要在源码和构建层面建立更强的关联； * 组件样式需要响应组件数据变化； * 组件样式需要有以组件为单位的复用和扩展能力。 举个稍微具体的例子，当我们在组件树中使用了<KanbanCard />，如何能保证KanbanCard对应的CSS一定会被加载？（哪怕开发者忘记了） 另外，这节课主要还是介绍CSS-in-JS的概念和Emotion的基本使用，至于如何让组件和样式代码更整洁的最佳实践，在第12节课的重构中会涉及到，第24节课的项目中也会有例子。

作者回复: 你好，右耳漏风，emotion和styled-components都是很成熟的CSS-in-JS框架，在各类React应用项目中都有广泛使用。 说来我当时的选型，还是偏向我个人的taste。两者实现机制类似，都是动态生成class样式，然后在DOM中插入<style>，性能不会有太大差异。在我看来，styled-components中 styled.div 这样的API对React组件代码整体侵入性比较高，相较而言，emotion的css prop直接依附在了React内建的HTML元素tag上，侵入性低些，万一以后有整体剥离或替换CSS技术栈的需要，成本风险更加可控。 当然后来我被打脸了，styled-components从V4开始也利用babel plugin实现了 css prop，emotion也提供了styled API。

作者回复: 你好，（点），这是个好建议，谢谢。专栏编辑也和我做过相关的设计，会不定期安排课程加餐，里面会讨论留言区的热点问题和思考题。

作者回复: 你好，东方奇骥，虽然没机会在工作中使用，但我个人也很喜欢Svelte框架，它的API和用法都给我带来亲切感。其实这两年的主流框架之间都有互相借鉴一些别家的优点，比如JSX、虚拟DOM、组件组合和嵌套、利用编译工具等。 HTML、JS、CSS是写在一起或是分开来写，都有各自的利弊。但正因为这三个框架的用户基数大、社区活跃，每种写法均有一定的用户基础，所以无论哪种都算是开发者（或团队）的“taste”，无所谓优劣。 不过毕竟这个专栏是在讲React，我多少也为React澄清一下 :) 在React中，HTML、JS、CSS也可以分开来写： 1. 这节课里的emotion这项CSS-in-JS技术是独立于React以外的，也可以用于Vue框架；而React里也可以利用最基础的CSS Modules技术分开写独立的CSS文件； 2. 在React组件中，可以把多个Hooks抽取成自定义Hook写在独立的JS文件中，也可以把一些公共逻辑抽象成高阶组件，这样就可以得到尽可能“纯净”的JSX文件，这部分内容后面的课程会讲到； 3. 虽然很少见，但开发者也可以选择把React技术仅作为View来使用，将React的JSX和事件处理整合进其他JS框架，比如Backbone.js中：https://zh-hans.reactjs.org/docs/integrating-with-other-libraries.html#embedding-react-in-a-backbone-view 。

作者回复: 你好，杨永安，styled.button 是一个函数，后面跟着 ` ` 是前面讲到的“带标签的模版字符串”语法，可以认为是在调用 styled.button 函数，` ` 内是传给它的参数，而 styled.button 函数的返回值是一个类似这样的自定义组件： const Button = ({ cssStyles, children, ...restProps }) => { // 处理 cssStyles return ( <button className="动态生成的类名" {...restProps}> {children} </button> ); }; 请注意这段代码是根据我自己的理解拼出来的，肯定少了不少细节，但原理是类似的。 然后你就可以在其他JSX中使用这个Button组件了。

作者回复: 你好，大海，我很赞同你说的，本身css与js就是异构代码，尤其是在样式复杂的时候，css行数比较多，会影响代码可读性。 这节课的目标主要还是让大家了解CSS-in-JS的原理和用途。在后面的第12～13节课，我们会对oh-my-kanban项目做一次重构，那时会把css属性都抽取成独立的变量，提高可读性。敬请期待。

作者回复: 你好，超级读书郎，感谢你对这节课内容的认可。后面的课程也尽可能地为各类技术点加入了典型用例，希望能帮到大家。

作者回复: 你好，大海，感谢你的抓虫。抱歉这里由于录入问题丢失了字符，正确内容应为： css`args` 其中css是函数名，args可以是任意字符串或模版字面量。