50万奖金+官方证书,深圳国际金融科技大赛正式启动,点击报名 了解详情
写点什么

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

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

关注

评论

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

首轮Zepoch节点已售罄完结,你期待次轮吗?

鳄鱼视界

什么是数据产品经理?数据产品经理与传统产品经理有什么区别?

雨果

数据产品经理

测试需求平台5-Blueprint优化与首个vue页搭建

MegaQi

测试平台开发教程 10月月更

一文搞懂常见的网络I/O模型

闫同学

网络 网络io 10月月更

Serverless的应用场景

阿泽🧸

Serverless 10月月更

挑战30天学完 Python:Day4数据类型-字符串str

MegaQi

挑战30天学完Python 10月月更

Python进阶(二十三)Django使用pymysql连接MySQL数据库做增删改查

No Silver Bullet

Python django MySQL数据库 pymysql 10月月更

趣学前端」为什么有的页面背景颜色是渐变的

叶一一

CSS 前端 10月月更

【一Go到底】第十五天---continue快速入门

指剑

Go golang 10月月更

Go-Excelize API源码阅读(二十三)——SetDocProps、GetDocProps

Regan Yue

Go 开源 源码刨析 10月月更

【LeetCode】两个链表的第一个重合节点Java题解

Albert

算法 LeetCode 10月月更

Java三大特性(一)—封装

共饮一杯无

Java 面向对象 10月月更

大数据ELK(二十六):探索数据(Discovery)

Lansonli

discovery 10月月更

「趣学前端」日常浏览的页面为什么可以五颜六色

叶一一

CSS 前端 10月月更

cstdio的源码学习分析10-格式化输入输出函数fprintf---宏定义/辅助函数分析03

桑榆

源码刨析 10月月更 C++

Go-Excelize API源码阅读(二十二)——SetAppProps(appProperties *AppProperties)

Regan Yue

Go 开源 源码分析 Excelize 10月月更

「趣学前端」页面上吸顶的效果是怎么做到的

叶一一

CSS 前端 10月月更

「趣学前端」容器上的折角边框是图形吗?

叶一一

CSS 前端 10月月更

Python进阶(二十二)Python3使用PyMysql连接mysql数据库

No Silver Bullet

Python3 MySQL数据库 pymysql 10月月更

【从0到1学算法】5.Bubble Sort算法-下

Geek_65222d

10月月更

如何在高性能的前提下,降低数据库存储成本?

OceanBase 数据库

有人意图取代SQL,你同意吗?

雨果

sql

华为云从入门到实战 | 负载均衡服务原理

TiAmo

华为 云开发 10月月更

B类纯资金业务的资金安全保障

agnostic

资金安全 B类业务 纯资金业务

前端开发提效小技巧之业务功能篇

叶一一

前端 提高效率 10月月更

一个实际的例子学习 SAP BTP Java 应用的 @Before 注解使用方式

汪子熙

Java 云原生 Cloud SAP 10月月更

「趣学前端」box-shadow的多重用法

叶一一

CSS 前端 10月月更

一文搞懂Go整合captcha实现验证码功能

闫同学

Go Web 安全 10月月更

面试官:说说你对Node中的Stream的理解

CoderBin

面试 前端 Node 10月月更

浅谈etcd服务注册与发现

闫同学

Go 微服务 etcd 10月月更

Go-Excelize API源码阅读(二十一)——GetDefinedName()、DeleteDefinedName()

Regan Yue

Go 源码阅读 源码刨析 10月月更

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