Myth 6：有利于代码组织
但就本身而言，这并不是应用 styled-components 的好来由。
有些人告诉我他们爱好 styled-components，因为它可以绕揭捉?式和 JavaScript 在一个文件中。
我懂得同一组件有很多文件很烦，然则榜样式和标记塞进一个文件的办法很糟糕。如许不仅版本控制难以回溯，并且所有组件都须要滚动很长一段距离，而不是简单地点下按钮。
如不雅必定要把 CSS 和 JavaScript 放在一个文件中， 可以推敲应用 css-literal-loader。它可以在 build 时用 extract-text-webpack-plugin 提取 CSS，用标准 loader 设备处理 CSS。
Myth 7：DX 很便利，这对象太棒了!
- button {
- padding: 10px;
- }
- button.tomato-button {
- color: #f00;
- }
很明显你没用过 styled-components。
- 一旦样式写错了，全部 app 会崩溃，并输出长长的调用栈缺点(v2 更奇葩)。比拟之下，CSS “style error” 只是元素衬着地纰谬罢了。
- 元素没有 className，所声调试时不得不去比较 React 元素树和 DevTools DOM 树(v2 可以用 babel-plugin-styled-components 定位)。
- 没有语法检查(有一款 样式检查插件 正在开辟中)。
- 不合法的样式会被忽视(比如：clear: both; float left; color: #f00; 不会报 error 或 warning，只能祷告调试好运了，即使看了 styled-components 源码，照样花了我 15 分钟查看调用栈。最后我在聊天中把代码粘出来寻求赞助，才有人提示是少了:。你留意到了吗?)
- 支撑语法高亮、代码补全以及其它 IDE 细节的 IDE并不多。如不雅你在金融或当局机构工作，很可能无法应用 Atom IDE。
Myth 8：机能更好，bundle 更小
- 事实是，styled-components 无法提取静态 CSS 文件(比如应用 https://github.com/webpack-contrib/extract-text-webpack-plugin)。这意味着浏览器无法开端解释样式直到 styled-components 解析、加载到 DOM上。
- 缺乏文件分别意味着无法分开缓存 CSS 和 JavaScript。
- 所有样式化的组件都邑额外包装一层 HoC。这是不须要的机能损耗。因为类似的构造缺点，我终止了 https://github.com/gajus/react-css-modules(但创建了 https://github.com/gajus/babel-plugin-react-css-modules)。
- 因为 HOC，如不雅在办事端衬着，会导致标记文档大年夜很多。
- 有 keyframes， 我也不须要用动态样式值做动画。
Myth 9：它可以开辟响应式组件
这说的是根据情况给组件设制揭捉?式的才能，比如父容器偏移量、子元素数量等。
起首，styled-components 和响应式没什么关系。这已经超出了这个主题典范围。这种情况最好直接设置组件的 style，以避免额外的成本。
然则，元素萌芽是个有趣的问题，也逐渐成为 CSS 中的一个高热话题，主如果 EQCSS 等类似项目。元素萌芽和 @media queries 在语法上很类似，只是元素萌芽操作具体某些元素。
- <a href=http://developer.51cto.com/art/201707/"http://www.jobbole.com/members/feiguohai46">@element</a> {selector} and {condition} [ and {condition} ]* { {css} }
{selector} 是 CSS 选择器对应着一或多个元素。例如：#id 或 .class
推荐阅读
什么是电子政务电子政务是指当局经由过程信息通信技巧手段的密集性和计谋性应用组织公共治理的方法，旨在进步效力、加强当局的透明度、改良财务束缚、改进公共政策的质量和决定计划的科学>>>详细阅读
地址：http://www.17bianji.com/lsqh/36001.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示