写点什么

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

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

关注

评论

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

【圣诞节】会呼吸的玫瑰爱心代码 -李峋爱心续 动画演示思路 代码开源

非喵鱼

Java Python 程序员 前端 爱心代码

OpenTelemetry系列 (二)|初探OpenTelemetry

骑牛上青山

Java 调用链 OpenTelemetry 微服务调用链

React组件之间的通信方式总结(上)

beifeng1996

React

设计模式之美——单一职责(Single Responsibility Principle)

GalaxyCreater

设计模式

react源码中的协调与调度

flyzz177

React

前端二面常考面试题(必备)

loveX001

JavaScript

经常会采坑的javascript原型应试题

loveX001

JavaScript

前端面试什么样的回答才能让面试官满意

loveX001

JavaScript

react面试题合集

beifeng1996

React

记一次Mysql大数据分页优化问题

石臻臻的杂货铺

MySQL 数据库

从React源码分析看useEffect

flyzz177

React

用javascript分类刷leetcode3.动态规划(图文视频讲解)

js2030code

JavaScript LeetCode

架构实战 - 模块 2 作业

mm

微信朋友圈 #架构实战营

react源码中的fiber架构

flyzz177

React

开始用ChatGPT写作

SkyFire

ChatGPT

架构实战营模块二作业

张Dave

react源码中的hooks

flyzz177

React

前端工程师leetcode算法面试必备-二叉树深度广度遍历

js2030code

JavaScript LeetCode

软件质量问题造成损失高达 2.4 万亿美元!

SEAL安全

软件质量 漏洞管理 12 月 PK 榜 软件供应安全

React源码分析8-状态更新的优先级机制

flyzz177

React

React源码分析7-state计算流程和优先级

flyzz177

React

前端工程师leetcode算法面试必备-二叉树的构造和遍历

js2030code

算法 LeetCode

谈谈前端性能优化-面试版

loveX001

JavaScript

前端必会react面试题及答案

beifeng1996

React

云与开源,共植数字世界的根

Apache Flink

大数据 flink 实时计算

流处理基础概念-窗口与时间

穿过生命散发芬芳

流处理 12月月更

运维进阶训练营 -W07H

b1a2e1u1u

运维

异构混排在vivo互联网的技术实践

vivo互联网技术

算法 异构 混排

那些你不知道的 CSS 自定义形状网格布局 3

南城FE

CSS 前端 布局

0停机迁移Nacos?Java字节码技术来帮忙

华为云开发者联盟

Java 云计算 华为云 12 月 PK 榜

React组件之间的通信方式总结(下)

beifeng1996

React

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