「译文」:CSS-in-JS 你所应该知道的一切

栏目: CSS · 发布时间: 5年前

内容简介:用组件的方式进行思考 - 你不再需要维护一堆样式表。 CSS-in-JS将CSS模型抽象到组件级别,而不是文档级别(模块化)。React 组件示例:你很可能听过像

用组件的方式进行思考 - 你不再需要维护一堆样式表。 CSS-in-JS将CSS模型抽象到组件级别,而不是文档级别(模块化)。

React 组件示例:

import React, { Component } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
    background: black
  `
const Title = styled.h1`
    background: white
  `
class App extends Component {
    render() {
        return (
          <Wrapper>
            <Title>Hello Styled Components!</Title>
          </Wrapper>
        )
    }
}

export default App
复制代码

你很可能听过像 CSS-in-JS , Styled Components , Radium , 和 Aphrodite ,你可以也会想,这和我有什么关系?我非常乐于写 CSS-in-CSS (纯.css文件)。

我来说一下这些为什么和你有关,希望至少能懂得概念,了解为什么和你有关。话虽如此,请随意使用CSS-in-CSS。你没有义务使用CSS-in-JS。无论什么最适合你,让你很爽,总是能够提供最好的解决方案!

CSS-in-JS是一个微妙而有争议的话题。 我主张开放的思想,并考虑这是否对你有意义。 问问自己,“它会改善我的工作流程吗?”最后,唯一重要的是使用能让你更快乐,更高效的工具。

我总是觉得难以维护一个巨大的样式表文件夹。 我想尝试不同的方法。 我见过很多人问是否有新的造型想法。 到目前为止,CSS-in-JS是最好的概念。

让我们一起看下CSS-in-JS:

「译文」:CSS-in-JS 你所应该知道的一切

中小型项目的 CSS

1.什么是CSS-in-JS?

JSS是一种比CSS更强大的抽象 。 它使用JavaScript作为语言以声明和可维护的方式描述样式。 它是一个高性能的JS到CSS编译器,它在运行时和服务器端工作。 这个核心库是低级别和框架无关的。 它大约是6KB(缩小和压缩),并且可以通过插件API进行扩展。 -来源

一定要铭记, 行内样式CSS-in-JS 完全不同,如下图所示:

1.1 行内样式如何工作?

在浏览器中,这将附加到DOM节点,如下所示:

<span style="color: green">inline style</span>
复制代码

1.2 CSS-in-JS如何工作?

在浏览器中,这将附加到DOM节点,如下所示:

<style>
.jss-xxx-green{
  color: green
}
</style>

<span class='jss-xxx-green'>inline style</span>
复制代码

1.3不同点:

看到细微的区别? CSS-in-JS 在DOM的顶部附加了一个 <style> 标记,而内联样式只是将属性附加到DOM节点。 为什么这很重要?

并非所有 CSS 功能都可以使用 JavaScript 事件处理程序。 许多伪选择器(如:disabled,:before,:nth-child)是不可能的,不支持样式化 htmlbody 标签等。

使用 CSS-in-JS ,您可以轻松获得 CSS 的所有功能。 由于生成了实际的 CSS ,因此您可以使用您能想到的每个媒体查询和伪选择器。 一些库(如 jss ,样式组件)甚至添加了对嵌套的整洁,非 CSS 原生特性的支持!

为什么我们不使用 CSS-in-CSS 并完成它?

虽然长期以来一直如此,但挑战在于现代网络是用组件而不是页面编写的。

CSS实际上从未实现过基于组件的方法。 CSS-in-JS 正好解决了这个问题。

2.使用 CSS-in-JS 有什么好处?

  • 组件化思考。你不再需要维护一堆样式表。 CSS-in-JS将CSS模型抽象到组件级别,而不是文档级别(模块化)。
  • CSS-in-JS 利用JavaScript生态系统的全部功能来增强CSS。
  • 真正的规则隔离。 范围选择器是不够的。 如果没有明确定义,CSS具有从父元素自动继承的属性。 感谢 jss-isolate 插件,JSS规则不会继承属性。
  • 范围选择器。 CSS只有一个全局命名空间。 在非平凡的应用程序中不可能避免选择器冲突。 命名约定(如 BEM )可能在一个项目中有所帮助,但在集成第三方代码时无效。 当JSS将JSON表示编译为CSS时,JSS默认生成 唯一的类名
  • 自动添加前缀。CSS规则自动以 provider 为前缀,因此您不必考虑它。
  • 代码共享。轻松地在JS和CSS之间共享常量和函数。
  • 只有屏幕上当前使用的样式位于DOM( react-jss )中。
  • 消除未使用代码
  • CSS单元测试

3.使用CSS-in-JS的缺点是什么?

  • 学习曲线
  • 新的依赖
  • 让新队友更难适应代码库。 不熟悉前端的人必须学习更多东西。
  • 挑战现状(不一定是骗局)。

优势明显超过了利弊 - 让我们给JS-in-JS一个机会!

4. 最受欢迎的 CSS-in-JS

所有流行的CSS-in-JS库的快速“Hello World”示例。 根据语法选择您最喜欢的一个。

「译文」:CSS-in-JS 你所应该知道的一切
  • Styled Components
  • JSS-React
  • Glamorous
  • Radium (Caveat: Uses Inline Styles)
  • Aphrodite
  • Styletron

这些是非常简单的示例,展示了核心功能。 所有库都包含更多功能,例如主题,动态道具,服务器端渲染等等。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程珠玑

编程珠玑

Jon Bentley / 人民邮电出版社 / 2006-11 / 28.0

《编程珠玑》第一版是我早期职业生涯中阅读过的对我影响较大的书籍之一,在书中首次接触到的很多观点都让我长期受益。作者在这一版本中做了重要更新,新增加的很多例子让我耳目一新。——Steve McConnell,《代码大全》作者  如果让程序员列举出他们喜欢的书籍,Jon Bentley的《编程珠玑》一定可以归于经典之列。如同精美的珍珠出自饱受沙砾折磨的牡蛎,程序员们的精彩设计也来源泉于曾经折磨他们的实......一起来看看 《编程珠玑》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码