写点什么

你需要知道的 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:004702
用户头像

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

关注

评论

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

滴滴最看重的SpringCloud手册曾被疯狂转载,现在学还有用吗?

Java~~~

Java 架构 面试 微服务 Spring Cloud

让GitHub炸锅的深入理解MySQL实战手册,竟出自阿里云“藏经阁”

Java~~~

Java MySQL 数据库 架构 面试

在职字节师兄分享出了这份数据结构手册,LeetCode现已开放下载

Java~~~

Java 架构 面试 算法 刷题

Java多线程:从基本概念到避坑指南

Java 架构 后端 JVM 计算机

三顾茅庐,七面阿里,25k*16offer,还原我的大厂面经

Java 程序员 面试 后端 计算机

分布式消息流平台:不要只想着Kafka,还有Pulsar

华为云开发者联盟

kafka 云原生 pulsar 消息 分布式消息流平台

TDSQL云时代,我们需要怎样的数据库?

腾讯云数据库

数据库 tdsql

求阿里大神整理的分布式核心笔记出炉了,GitHub刚发布就标星85k

Java~~~

Java 负载均衡 架构 面试 分布式

爆赞!GitHub上首本IntelliJ IDEA操作手册,标星果然百万名不虚传

Java~~~

Java 架构 面试 IDEA 架构师

腾讯云数据库TDSQL:分布式数据库,你真的了解吗?

腾讯云数据库

数据库 tdsql

实时消息RTM| 多活架构中的数据一致性问题

anyRTC开发者

音视频 WebRTC 数据一致性 实时消息 数据容灾

Alibaba新产!Spring+SpringBoot+SpringCloud全家桶进阶小册

Java~~~

Java spring 架构 面试 Spring Boot

操作系统的IO模型

Java 程序员 架构 操作系统 计算机

TDSQL演进三部曲

腾讯云数据库

tdsql #数据库

如何实现 Android 短视频跨页面的流畅续播?

阿里云CloudImagine

android App 音视频 Video播放器 APP开发

Alibaba内部的10w字Java高频面试手册遭人恶意在牛客网开源下载?

Java~~~

Java 架构 面试 JVM 多线程

Elasticsearch可观测最佳实践分享!3分钟带你快速入门!

观测云

elasticsearch

不吹不黑!阿里新产微服务架构进阶笔记我粉了!理论实战齐飞

Java 程序员 架构 面试 微服务

实用?HUAWEI高工总结出15W字的图解计算机操作系统指南手册

Java~~~

Java 架构 面试 TCP 网络协议

33张图解析ReentrantReadWriteLock源码

程序猿阿星

源码分析 读写锁 ReentrantReadWriteLock 源码解读

出自清华大神之手的JVM实战手册,刚上架GitHub点赞就达到85k

Java~~~

Java 架构 面试 JVM 多线程

GitHub经典教材!阿里P8的这份SpringBoot精髓到底厉害在哪里?

Java~~~

Java 架构 面试 微服务 Spring Boot

有人在恶意提权吗?

BUG侦探

Linux 主机安全 提权

腾讯云TDSQL:真正面向金融行业的典型场景

腾讯云数据库

数据库 tdsql

在FL Studio中如何使用混音器的效果

懒得勤快

GitHub上火了这份堪称神级的SpringBoot手册,竟出自滴滴之手

Java~~~

Java spring 架构 面试 Spring Boot

腾讯云TDSQL,从数据库巨人身上撕开一道口子

腾讯云数据库

数据库 tdsql

实战 实时物体检测YOLOv3 CNN卷积神经网络John 易筋 ARTS 打卡 Week 63

John(易筋)

ARTS 打卡计划

一文详述如何卸载SQL Server 2019及其 DBMS

Regan Yue

数据库 SQL语言 9月日更

Github星标百万!终于有人将Spring技术精髓收录成册

Java 编程 程序员 架构 面试

从动物科学到乐队鼓手,腾讯技术小哥的开源人生

腾源会

腾讯云 开源

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