AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

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

关注

评论

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

深思考联合昇腾推出AI智慧病理“慧眼”计划

极客天地

运维训练营第14周作业

好吃不贵

「 代码性能优化 」作为一名Java程序员,你真的了解 synchronized 吗?(一)

小刘学编程

Java 性能优化 synchronized java锁

模块六作业

张贺

嵌入式ARM设计编程(二) 字符串拷贝

timerring

arm

研发提效:服务端技术方案模板参考

邴越

技术方案 模版

Python 内置界面开发框架 Tkinter入门篇 丙

eng八戒

Python GUI tkinter

EasyRecovery2023新版本有哪些新功能?

茶色酒

EasyRecovery EasyRecovery15 easyrecovery2023

Python 内置界面开发框架 Tkinter入门篇 丁

eng八戒

Python GUI tkinter

前端开发技术培训机构怎么选好?

小谷哥

软件测试 | App结构概述

测吧(北京)科技有限公司

测试

无需依赖Docker环境制作镜像

tiandizhiguai

Docker k8s

「 代码性能优化 」java高级程序员必知必会的55个代码性能优化技巧

小刘学编程

Java 性能优化 高级程序员 代码技巧

「 数据结构与算法 」如何系统性的学习数据结构与算法

小刘学编程

Java 学习路线 数据结构与算法

「 Java开发规范 」10人小团队Java开发规范参考这篇就够了

小刘学编程

Java 数据库规范 代码规范 项目规范

「 代码性能优化 」作为一名Java程序员,你真的了解 synchronized 吗?(三)

小刘学编程

Java 性能优化 synchronized java锁

CleanMyMacX4.12.5中文版苹果电脑管家

茶色酒

CleanMyMacX4.12.5

极客时间运维进阶训练营第十四周作业

9527

2023-02-15:商场中有一展柜A,其大小固定,现已被不同的商品摆满, 商家提供了一些新商品B,需要对A中的部分商品进行更新替换, B中的商品可以自由使用,也就是可以用B中的任何商品替换A中的任何

福大大架构师每日一题

算法 rust 福大大

自媒体营销或已死,内容营销为何越来越难做?

石头IT视角

GuitarPro2024免费版吉他打谱工具

茶色酒

GuitarPro

我不想再传递 nameof 了

newbe36524

C# Docker Kubernetes

「 前端开发规范 」10人小团队前端开发规范参考这篇就够了

小刘学编程

前端 统一代码规范 高效协同

「 代码性能优化 」作为一名Java程序员,你真的了解 synchronized 吗?(二)

小刘学编程

Java 性能优化 synchronized java锁

【Java基础】常用序列化技术与方式

No8g攻城狮

通信协议 网络通信协议

面试必问:JVM 如何确定死亡对象?

王磊

java面试

Flink X Hologres 构建企业级 Streaming Warehouse

Apache Flink

大数据 flink 实时计算

【2023年最新】轻松搞定MySQL数据库迁移

NineData

MySQL 数据库迁移 数据复制 数据迁移 SqlServer

「 技术文章翻译 」jasypt-spring-boot敏感信息加密解密利器使用指南

小刘学编程

加密解密 springboot jasypt

「 代码性能优化 」作为一名Java程序员,你真的会写for循环吗?

小刘学编程

Java 性能优化 for循环 技巧总结

ChatGPT这波热潮会不会让我失业?

eng八戒

人工智能 AI 聊天机器人 openai ChatGPT

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