初次使用情感的注意事项

在群里听大峰说Strikingly用的是情感解决方案，就一直关注着。之前查过一些CSSinJS的解决方案，看的情绪一般，不知道哪个更好：https://github.com/MicheleBer。..不过既然Strikingly有实战经验，而且是我当时为数不多的喜欢的，我觉得还是比较安全的。https://github.com/emotion-js...从写法上看，侵入性小，直接即className:importstyled,{css}from'react-emotion';constContainer=styled('div')`背景：#333;`constmyStyle=css`颜色：rebeccapurple;`constapp=()=>(HelloWorld

);然后生成的CSS根据hash的className进行包装，插入到中。这样一来，甚至可以在运行时进行热替换，当时没有问题。另外一个需要关注的方面是打包，就是把js中的CSS抽出来，重新改成CSS文件。emotion给出的解决方案是使用babel插件强制生成文件，然后用webpack打包：https://github.com/emotion-js...具体没看，但是在原则。最近整理了一个demo，完成了基本的开发打包功能：https://github.com/minimal-xy...有一些坑。比如打包过程中生成的css文件都写在src/下，连同源码一起写，有点脏。后来写了xarg命令行，打包完成后强行删除了。关于编辑器支持，我目前使用的是VSCode，需要语法高亮和自动提示，https://marketplace.visualstu...https://github.com/Microsoft/...注意后面的插件需要本地安装TypeScript，把版本切换到2.6.1+，我已经配置成功了。另外因为之前搭配了Prettier，自动格式化也做了。另一个担心是一些CSS兄弟元素/父子元素的选择关系，我没有深入研究这些问题。总的来说，我认为这是一个可靠的解决方案。待会儿等Strikingly分享。。。在issues上问了作者关于css抽取问题相关的内容，以及抽取情感到独立文件的细节。Use里面发现了一个问题，就是抽象之后丢失了一些样式。代码存在。问题是代码className的顺序不再影响样式。动态运行的情感会按照className的先后顺序处理样式的组合，抽取后不会生效。.维护组给出的解决方案是不提取...我觉得性能可以接受就可以了...但总归是个坑。