css in js 的核心思想就是: 用一个js对象,来描述样式,而不是css样式表

    例如下面一个对象就是一个用于描述样式的对象

    1. const  styles={
    2.     background:'#f40',
    3.   color:'#fff',
    4.   width:'400px',
    5.   height:'500px',
    6.   margin:'0 auto'
    7. }

    由于这样的描述方式根本不存在类名,自然不会有类名冲突

    至于如何把样式应用到页面上,不是它关心的事情,你可使用任何技术,任何框架,任何方式将它应用到界面上

    后续学习react,vue都支持css in js,可以非常轻松用到界面上

    css in js 特点:

    • 绝无冲突的可能: 由于根本不存在类名,所以绝不可能出现冲突
    • 更加灵活: 可以充分利用js语言的灵活特点,用各种招式来处理样式
    • 应用面更广: 只要支持js语言,就可以支持css in js,因此,在一些用js处理开发移动端应用的时候非常好用,因为只有移动端有可能不支持css
    • 书写不变: 书写样式,特别是公共的样式,处理起来不是很方便
    • 在页面中增加了大量的冗余内容: 在页面处理css in js 时,往往将样式加入到元素的style的属性中去,会有大量增加元素的内联样式,并且会有大量的重复,不已阅读最终的页面代码