Manbetx体育客户端:你需要知道的CSS-in-JS

日期:2018-01-09 / 人气: / 来源:未知

  Manbetx体育客户端:Werner Vogels脑中的未来世界@AWS re:Invent 2017;阿里巴巴正式开源其自研容器技术Pouch;从CQS到CQRS;为什么说 Service Mesh 是微服务发展到今天的必然产物?中小型研发团队架构实践:电商如何做企业总体架构?

  本期主要内容:Werner Vogels脑中的未来世界@AWS re:Invent 2017;阿里巴巴正式开源其自研容器技术Pouch;从CQS到CQRS;为什么说 Service Mesh 是微服务发展到今天的必然产物?中小型研发团队架构实践:电商如何做企业总体架构?

  为什么我们需要一款分布式数据库?如何定义分布式数据库?从零构建一款分布式数据库会碰到哪些挑战?如果从头再来,我们是否能做出更好的选择?这些问题,对于阿里云表格存储团队来说,在持续的思考并在实际工作中不断的论证。今天,我们希望对过去的工作做一个总结,将我们学到的经验分享给大家。这个分享中主要覆盖分布式数据库的核心要素及其在表格存储中的实现,并会讨论产品和服务的区别,自动化运维的挑战等。

  本期主要内容:Werner Vogels脑中的未来世界@AWS re:Invent 2017;阿里巴巴正式开源其自研容器技术Pouch;从CQS到CQRS;为什么说 Service Mesh 是微服务发展到今天的必然产物?中小型研发团队架构实践:电商如何做企业总体架构?

  本期主要内容:Werner Vogels脑中的未来世界@AWS re:Invent 2017;阿里巴巴正式开源其自研容器技术Pouch;从CQS到CQRS;为什么说 Service Mesh 是微服务发展到今天的必然产物?中小型研发团队架构实践:电商如何做企业总体架构?

  亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知。

  说到这里,不得不提到组件化。因为有了组件化概念,就不再需要维护一大堆杂乱的样式。CSS-in-JS在组件层面(而不是文档层面)对CSS进行了抽象。在项目中维护一个巨大的样式文件夹实在是一件让人感到头疼的事情,很多人不禁感叹,是否还有其他更好的办法?不用说,CSS-in-JS在目前看来就是一个最佳解决方案。

  当然,要继续使用CSS-in-CSS还是转向CSS-in-JS完全取决于开发者自己,最关键的是选择合适的工具来改进开发工作流,在提升生产力的同时也让开发变得更有趣。

  可以看出,CSS-in-JS会附加整个style标签的内容,而内联样式只会把属性附加到DOM节点上。

  并不是所有的CSS特性在JavaScript里都有与之对应的事件处理器,很多伪类选择器(如:disabled、:before、:nth-child)是不受支持的,当然也不支持在html和body标签上应用样式。

  而CSS-in-JS可以发挥CSS所有的特性,因为它会生成实际的CSS,这也就可以使用任意的选择器。一些包(如jss、styled-components)甚至支持嵌套!

  面向组件不再需要维护一大堆乱糟糟的样式,CSS-in-JS在组件层面(而不是文档层面)对CSS进行了抽象。

  CSS-in-JS利用JavaScript生态系统的强大能力来增强CSS。

  “真正的规则隔离”对选择器定义作用域还远远不够。如果没有显式定义,CSS的属性就会自动继承自父元素,而使用jss-isolate插件就可以防止JSS规则继承属性。

  选择器作用域CSS只有一个全局的命名空间,所以是无法避免出现选择器冲突的。或许BEM这样的命名规范对单个项目来说能起到作用,但要与第三方代码集成时就不一定了。JSS在将JSON编译成CSS时会自动生成唯一的类名。

  浏览器引擎前缀CSS规则自动添加了浏览器引擎前缀。

  代码共享在JS和CSS之间共享常量和函数。

  给InfoQ中文站投稿或者参与内容翻译工作,请邮件至也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

  我们理解您使用ad blocker的初衷,但为了保证InfoQ能够继续以免费方式为您服务,我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单,感谢您的理解与支持。

作者:-1


现在致电 0898-68898911 OR 查看更多联系方式 →

Go To Top 回顶部