css类名冲突-css in js

css in js

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

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

const styles = {
    backgroundColor: "#f40",
    color: "#fff",
    width: "400px",
    height: "500px",
    margin: "0 auto"
}

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

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

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

css in js的特点:

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

相关推荐

  1. css冲突-css in js

    2024-05-10 12:30:08       27 阅读
  2. html常用

    2024-05-10 12:30:08       61 阅读
  3. LESS mixin 生成 控制间距

    2024-05-10 12:30:08       51 阅读
  4. Spring Boot中处理同Bean冲突的解决办法

    2024-05-10 12:30:08       27 阅读
  5. CSS日常总结--CSS

    2024-05-10 12:30:08       90 阅读
  6. CSS逻辑组合伪

    2024-05-10 12:30:08       59 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-10 12:30:08       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-10 12:30:08       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-10 12:30:08       87 阅读
  4. Python语言-面向对象

    2024-05-10 12:30:08       96 阅读

热门阅读

  1. C++容器——set

    2024-05-10 12:30:08       28 阅读
  2. ubuntu22 安装ROS2

    2024-05-10 12:30:08       31 阅读
  3. 机器学习笔记-02

    2024-05-10 12:30:08       29 阅读
  4. Centos7.9搭建yum仓库

    2024-05-10 12:30:08       37 阅读
  5. C++面向对象学习笔记四

    2024-05-10 12:30:08       36 阅读
  6. Linux学习笔记2

    2024-05-10 12:30:08       29 阅读