“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

你需要知道的 CSS-in-JS

  • 2017-11-26
  • 本文字数:5209 字

    阅读完需:约 17 分钟

什么是 CSS-in-JS?直接在.css 文件里写 CSS(CSS-in-CSS)不是挺好的吗,为什么还需要 CSS-in-JS?

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

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

什么是 CSS-in-JS

JSS 对 CSS 进行了抽象,使用了 JavaScript,以声明和可维护的方式来描述样式。它是一个高性能、运行在服务器端的运行时 JS 到 CSS 编译器。它的核心部分与框架无关,经过压缩后只有 6KB,并可以通过插件 API 的方式进行扩展。

需要注意的是,内联样式和 CSS-in-JS 是完全不一样的!

内联样式

复制代码
const textStyles = {
复制代码
   color: white,
复制代码
   backgroundColor: black
}
<p style={textStyles}>inline style!</p>

在浏览器里,样式属性会被附加到 DOM 节点上:

复制代码
<p style="color: white; backgrond-color: black;">inline style!</p>

CSS-in-JS

复制代码
import styled from 'styled-components';
const Text = styled.div`
复制代码
   color: white,
复制代码
   background: black
`
<Text>Hello CSS-in-JS</Text>

在浏览器里,样式类会被附加到 DOM 节点上:

复制代码
<style>
.hash136s21 {
复制代码
   background-color: black;
复制代码
   color: white;
}
</style>
<p class="hash136s21">Hello CSS-in-JS</p>

可以看出,CSS-in-JS 会附加整个

2017-11-26 18:004135
用户头像

发布了 322 篇内容, 共 133.6 次阅读, 收获喜欢 142 次。

关注

评论

发布
暂无评论
发现更多内容

易观千帆 | 2022年7月银行APP活跃用户规模盘点:江浙沪城商行表现亮眼

易观分析

App 金融 银行

Java培训学生可以学到哪些开发技术呢

小谷哥

Java之static关键字的应用【工具类、代码块和单例】

Fire_Shield

static 9月月更 实际应用

【微信小程序】页面导航详解

陈橘又青

9月月更

10CSS动画案例,学会了惊艳所有人

大师兄

CSS 前端 9月月更

ApacheCon Asia 2022 精彩回顾 | 如何让更多人从大数据中获益?

Apache DolphinScheduler

常见堡垒机小知识汇总-行云管家

行云管家

安全 IT 堡垒机 IT运维

过等保是浪费钱吗?一定要过等保吗?

行云管家

等级保护 过等保 等保2.0

年轻一代程序员:社牛、不卷、玩开源

腾源会

开源 腾源会

参加Java培训能学到开发技术吗?

小谷哥

JAVA开发培训哪家比较好

小谷哥

新书上市|一位家长的忠告:长大后不成才的孩子,父母都忽视了这个点!

图灵社区

育儿 教育 脑科学 基因

新书上市|一位家长的忠告:长大后不成才的孩子,父母都忽视了这个点!

图灵教育

育儿 教育 脑科学 基因

SQL为什么历经半个世纪却经久不衰?

雨果

sql

面了个阿里拿38k出来的,让我见识到了基础顶端

程序知音

Java java面试 后端技术 秋招 八股文

MobTech短信验证ApiCloud端SDK

MobTech袤博科技

API 短信验证

2022年8月中国网约车领域月度观察

易观分析

网约车

DataLeap的Catalog系统近实时消息同步能力优化

字节跳动数据平台

大数据 kafka 数据治理 实时同步 数据研发

限时开源!阿里P8架构师手写Spring全家桶核心知识学习笔记

了不起的程序猿

Java spring 编程 程序员 Spring全家桶

工赋开发者社区 | 从零开始的新跨平台浏览器:Ladybird 正式起飞

工赋开发者社区

区块链追溯:让冷链物流“热”起来!

旺链科技

区块链 产业区块链 企业号九月金秋榜 冷链物流

技术分享| 分布式系统中服务注册发现组件的原理及比较

anyRTC开发者

音视频 分布式系统

融云云盘,不止于存储

融云 RongCloud

云盘 云存储

信用卡市场发展洞察:浦大喜奔APP探索大零售融合经营体系

易观分析

金融 银行 信用卡

自学Java和java培训哪个好就业

小谷哥

如何选择靠谱的西安培训机构?

小谷哥

人工智能、机器学习与深度学习的区别在哪里?

Finovy Cloud

人工智能 深度学习

数据湖管理及优化

阿里云大数据AI技术

大数据 spark 数据湖 企业号九月金秋榜

Java进阶(二十八)SimpleDateFormat格式化日期问题

No Silver Bullet

Java 9月月更

QA如何高效参与技术设计评审

转转技术团队

质量管理 测试 技术设计质量把控

阿里巴巴“高并发”天花板教程《基础+实战+源码+面试+架构》

程序知音

Java 高并发 阿里 多线程与高并发 java架构

你需要知道的CSS-in-JS_语言 & 开发_Indrek Lasn_InfoQ精选文章