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属性中,会大量增加元素的内联样式,并且可能会有大量重复,不易阅读最终的页面代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/8874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于linux的进阶配置(mysql)你需要知道(1)-认识mysql

1、基本概念 数据库系统(DBS) 数据库管理系统(DBMS) :SQL server ,mysql 数据库管理员(DBA) 2、经典数据模型: 网状模型 层次模型 关系模型 3、主流的数据库: (1)SQL Server(微软公司产品) 面向Windows操作系统 简单、易用 (2)Oracle(甲骨文公司产品) 面向所有主…

Cesium 问题:billboard 加载未出来

文章目录 问题分析问题 接上篇 Cesium 展示——图标的依比例和不依比例缩放,使用加载 billboard 时,怀疑是路径的原因导致未加载成功 分析 原先

怎样把excel表格转换成图片格式?学会这3个Excel小技巧,表格操作不求人,工作效率翻倍

一,前言 excel是办公必备的表格处理软件,每个表格都包含大量的数据和函数逻辑关系,牵一发而动全身。传输excel表格时可以将文件转换成图片或者pdf,这样有利于传输,而且不会改变表格原有的格式。那么怎样才能把excel转…

精心操作MongoDB:删除数据库的关键步骤和重要事项

当你删除 MongoDB 数据库时,必须确保已经备份了数据并且确认删除操作不会对系统产生负面影响。下面是一个更详细的解释,以及示例代码、应用场景和注意事项。 如何删除数据库 使用命令行 在 MongoDB 的命令行界面中,使用 dropDatabase() 函…

设计必备!六款免费平面图设计软件大盘点

平面设计是一种迷人而多样化的艺术形式,它结合了颜色、形状、排版和创造力,通过图像和文本传达信息。市场上有各种各样的平面设计软件,选择合适的设计软件是成为优秀设计师的重要一步。为了降低软件成本,大多数设计师会优先使用免…

Python专题:六、循环语句(2)

for循环语句 列表可以简单的理解为: 顺序保存的若干元素 注释:变量largest,循环语句for,还有二层缩进八个空格 依次取出counts(列表)里的数字,并赋予给x,判断x和largest数值大小。如果x值更大,则赋值给largest 例:1加到100 range对象可遍历的,后面再讲,range(1…

鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程

一个.c源文件编译的整个过程如图. 编译过程要经过:源文件 --> 预处理 --> 编译(cc1) --> 汇编器(as) --> 链接器(ld) --> 可执行文件(PE/ELF) GCC GCC(GNU Compiler Collection,GNU编译器套件),官网:…

基于Spring Ai 快速创建一个AI会话

文章目录 1、创建SpringBoot项目2、引入依赖3、修改配置文件4、一个简单的会话 前期准备 在OpenAI 注册页面创建帐户并在API 密钥页面生成令牌。 Spring AI 项目定义了一个配置属性,您应该将其设置为从 openai.com 获取的spring.ai.openai.api-key值 代码托管于gite…

《深入Linux内核架构》第4章 进程虚拟内存(2)

目录 4.3 内存映射原理 4.4 数据结构 4.4.1 树和链表 4.4.2 虚拟内存区域VMA的表示 4.4.3 相关数据结构 本专栏文章将有70篇左右,欢迎关注,查看后续文章。 本节讲VMA结构体struct vm_area_struct和struct address_space。 4.3 内存映射原理 所有进…

自注意力架构大成者_Transformer(Pytorch 17)

1 模型简介 在上节比较了 卷积神经网络(CNN)、循环神经网络(RNN)和 自注意力(self‐attention)。值得注意的是, 自注意力同时具有并行计算和最短的最大路径长度这两个优势。因此,使…

【微机原理及接口技术】存储器

【微机原理及接口技术】存储器 文章目录 【微机原理及接口技术】存储器前言一、半导体存储器技术1.半导体存储器概述2.半导体存储器的分类3.半导体存储器芯片的结构 二、半导体存储器芯片1.RAM芯片2.ROM芯片 三、半导体存储器与CPU的连接1.存储芯片数据线的连接2.存储芯片地址线…

webrtc初步了解

WebRTC搭建点对点实时音视频对话,起始需要保证完成两点: 1.媒体协商,了解彼此支持的媒体格式。参与视频通讯的双方必须先交换SDP信息,交换SDP的过程。 2.网络协商,了解彼此的网络环境,找到一条相互通讯的链…

PanguSync大数据量初始化脚本

由于数据库增量同步软件PanguSync初始化最大超时时间为200s,如果数据量很大,初次部署时可能会超时,可以先停止任务,使用以下Sql语句进行初始化,以下语句可以分步执行,初始化完成后,后续无需再执行耗时的初始…

Linux学习之禁用防火墙

查看防火墙状态 systemctl status firewalld.service 第一行前面的圆圈是有颜色的就是开启状态 黑色的就是关闭状态 关闭防火墙 systemctl stop firewalld.service 输入密码认证 再次查看防火墙状态 systemctl status firewalld.service 第一行前面的圆圈变成黑色说明关闭…

ThreeJS:补间动画与Tween.JS

补间动画 补间动画指的是做FLASH动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动;插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的。 ——摘自《百度百科:补间动画_百度百科》 Tween.js Tween.js…

xCode升级后: Library ‘iconv2.4.0’ not found

报错信息: targets 选中 xxxNotification: Build Phases ——> Link Binary With Libraries 中,移除 libiconv.2.4.0.tbd libiconv.2.4.0.dylib 这两个库(只有一个的移除一个就好)。 然后重新添加 libiconv.tbd 修改完…

5G基础知识记录

5G接入网协议栈规范 [4G&5G专题-24]:架构-5G接入网协议栈规范 5G NR协议栈 5G NR协议栈及功能介绍 PDU会话 5G网络学习(三)——大白话讲解PDU会话(未完待续) NAS层 AS(接入层)和NAS(非接入层) RRC下的NAS层…

QT设计模式:桥接模式

基本概念 桥接模式是一种结构型设计模式,它将抽象部分与它的实现部分分离,使得它们可以独立地变化,而不会相互影响。 需要实现的结构如下: 抽象部分(Abstraction):定义了抽象类的接口&#x…

RT-Thread GD25Qxx驱动调试

目录 1. SPI Flash芯片1.1 GD25Q1281.2 硬件连接2. 添加drv_spi_gd25q128.c驱动文件2.1 Kconfig中添加配置选项2.2 添加drv_spi_gd25q128.c编译3. 封装gd25q128读写接口4. gd25q128 读写验证1. SPI Flash芯片 1.1 GD25Q128 GD25Q128ESIG 是一款由兆易创新(GigaDevice)公司生…

(代码以上传,超级详细)面试必备算法题----Leeecode290单词规律

文章目录 概要题目要求测试and提交结果技术细节 概要 来自Leecode ​ 代码已上传)仓库,需要测试实例和其他题型解决,可以去自行浏览 点击这里进入仓库领取代码喔!顺便点个star给原子加油吧! ​ 题目要求 使用哈希表 …