【JavaScript脚本宇宙】革新前端样式:CSS-in-JS库大比拼与最佳实践

本文主要是介绍【JavaScript脚本宇宙】革新前端样式:CSS-in-JS库大比拼与最佳实践,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

解锁响应式设计的潜力:使用CSS-in-JS库构建动态样式

前言

随着前端技术的发展,CSS-in-JS(CSS in JavaScript)逐渐得到开发者的青睐。它通过将CSS样式定义在JavaScript中,利用JavaScript的强大特性,实现了更灵活、动态的样式管理方式。本文将介绍几个流行的CSS-in-JS库,包括styled-components、Emotion、JSS、Linaria、Fela和Aphrodite。

欢迎订阅专栏:JavaScript脚本宇宙

文章目录

  • 解锁响应式设计的潜力:使用CSS-in-JS库构建动态样式
    • 前言
    • 1. styled-components:一个用于React的CSS-in-JS库
      • 1.1 概述
      • 1.2 安装与设置
        • 1.2.1 使用npm安装
        • 1.2.2 基本配置
      • 1.3 核心概念
        • 1.3.1 Tagged Template Literals
        • 1.3.2 自动生成类名
        • 1.3.3 主题支持
    • 2. Emotion: 一个灵活的CSS-in-JS库
      • 2.1 概述
      • 2.2 安装与设置
        • 2.2.1 使用npm或yarn安装
        • 2.2.2 配置Babel插件
      • 2.3 核心概念
    • 3. JSS:一种使用JavaScript编写样式的解决方案
      • 3.1 概述
      • 3.2 安装与设置
        • 3.2.1 使用npm安装
        • 3.2.2 创建JSS实例
      • 3.3 核心概念
        • 3.3.1 Styles对象
        • 3.3.2 动态样式
    • 4. Linaria:零运行时CSS-in-JS库
      • 4.1 概述
      • 4.2 安装与设置
        • 4.2.1 使用npm或yarn安装
        • 4.2.2 Babel插件配置
      • 4.3 核心概念
      • 4.3.1 Tagged Template Literals
        • 4.3.2 零运行时
        • 4.3.3 CSS提取
    • 5. Fela:基于插件机制的CSS-in-JS库
      • 5.1 概述
      • 5.2 安装与设置
        • 5.2.1 使用npm安装
        • 5.2.2 创建Renderer
      • 5.3 核心概念
        • 5.3.1 Renderer
        • 5.3.2 插件
        • 5.3.3 样式单元
      • 5.4 使用示例
    • 6. Aphrodite:Facebook出品的CSS-in-JS库
      • 6.1 概述
      • 6.2 安装与设置
        • 6.2.1 使用npm安装
        • 6.2.2 引入库
      • 6.3 核心概念
        • 6.3.1 StyleSheet.create
        • 6.3.2 css函数
    • 总结

1. styled-components:一个用于React的CSS-in-JS库

1.1 概述

styled-components是一个流行的CSS-in-JS库,用于React框架。它允许开发人员在组件内部直接编写CSS样式,并通过JavaScript对象或模板字符串进行样式化。styled-components还具备一些强大的功能,如自动生成类名、主题支持和服务器端渲染等。

1.2 安装与设置

1.2.1 使用npm安装

可以通过以下命令来安装styled-components:

npm install --save styled-components
1.2.2 基本配置

安装完成后,您可以在React组件中导入并使用styled-components。下面是一个基本示例:

import React from 'react';
import styled from 'styled-components';const Button = styled.button`background: blue;color: white;padding: 8px 16px;border: none;border-radius: 4px;cursor: pointer;
`;function App() {return (<div><Button>Click me</Button></div>);
}export default App;

在上面的示例中,我们导入了styled-components模块并将其作为styled函数使用。通过styled函数,我们可以将任何React组件转换为具有内联CSS样式的样式组件。在这个例子中,我们将标准的button元素包裹在styled函数中,为其提供了一些CSS属性。然后,我们可以在render函数中使用Button组件,就像使用其他React组件一样。

1.3 核心概念

1.3.1 Tagged Template Literals

styled-components使用Tagged Template Literals来定义组件的样式。这允许你使用模板字符串来定义CSS规则,并使用JavaScript变量来动态设置值。例如:

const Button = styled.button`color: ${props => props.theme.colors.primary};padding: 10px;border: none;cursor: pointer;
`;

这个例子创建了一个名为Button的新组件,该组件是带有一些CSS样式的button元素。${props => props.theme.colors.primary}部分使用了JavaScript变量来动态设置color属性。

1.3.2 自动生成类名

styled-components会自动为每个组件生成唯一的类名,这使得样式变得更加具体和可预测。由于这些类名是根据组件的名称和样式自动生成的,因此它们在组件之间总是唯一的,并且不会干扰其他样式。

1.3.3 主题支持

styled-components还具有内置的主题支持,允许你创建一组一致的样式应用于整个应用程序。你可以使用ThemeProvider组件来定义主题,并在组件上使用props.theme访问它。例如:

import { ThemeProvider } from 'styled-components';const theme = {colors: {primary: '#ff0000',secondary: '#00ff00'},fontSizes: {small: '12px',medium: '16px',large: '24px'}
};function App() {return (<ThemeProvider theme={theme}><YourApp /></ThemeProvider>);
}

您可以在官方文档中了解更多关于标签模板字面量的内容。

2. Emotion: 一个灵活的CSS-in-JS库

Emotion是一个基于JavaScript的CSS-in-JS库,它提供了一种将样式和组件紧密结合的方式。它使用简单的API来定义和修改组件的样式,并且能够自动处理样式冲突和优化代码。

2.1 概述

Emotion是一个非常流行和灵活的CSS-in-JS库,它可以很容易地与你的React应用程序集成。它支持静态样式、动态样式和主题,并且提供了出色的性能和开发体验。

2.2 安装与设置

2.2.1 使用npm或yarn安装

你可以使用npm或者yarn来安装Emotion:

# using npm
npm install @emotion/css @emotion/react# using yarn
yarn add @emotion/css @emotion/react
2.2.2 配置Babel插件

在你的项目中使用Emotion,你需要配置Babel插件来支持CSS-in-JS语法。你可以使用以下命令来安装相应的Babel插件:

npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @emotion/babel-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader

然后在你的.babelrc文件中添加以下代码:

{"plugins": ["@emotion/babel-plugin"]
}

最后,将你的.js文件改为.jsx扩展名,以便Babel能够正确处理它们。

2.3 核心概念

Emotion的核心概念是css函数和styled函数,它们允许你在组件内部编写样式,并将其应用于DOM元素。此外,Emotion还支持主题机制,允许你在应用程序中共享和更改样式变量。

3. JSS:一种使用JavaScript编写样式的解决方案

JSS(Javascript Style Sheets)是一种使用JavaScript编写样式的解决方案,它允许你使用JavaScript来定义和修改CSS样式。JSS由Facebook创建,并被广泛应用于React应用程序中。

3.1 概述

JSS的主要目标是提供一种灵活、高效的样式管理解决方案,同时避免了传统CSS的局限性。使用JSS,你可以将样式定义为JavaScript对象,并与组件代码一起组织和维护。这样可以更好地实现样式与组件逻辑的解耦,提高代码的可维护性和重用性。

3.2 安装与设置

要开始使用JSS,首先需要通过npm安装所需的包。

3.2.1 使用npm安装
npm install --save jss
3.2.2 创建JSS实例

创建一个JSS实例是使用JSS的第一步。通常,我们会创建一个名为jss的变量来保存这个实例,以便在应用中共享和使用。

下面是一个基本的示例:

import JSS from 'jss';const jss = new JSS(); // 创建一个JSS实例

在实际应用中,我们通常会在项目的入口文件中创建一个JSS实例,并导出它以供其他组件使用。

3.3 核心概念

要理解和掌握JSS的工作原理,需要熟悉以下几个核心概念:

  • Styles对象:表示一组CSS样式的定义。在JSS中,样式被定义为JavaScript对象,其中属性名对应于CSS属性名,属性值对应于CSS属性值。例如:
const styles = {color: 'red', // CSS中的color属性fontSize: '16px' // CSS中的font-size属性
};
  • 动态样式:JSS允许你根据组件状态或用户交互动态地更新样式。你可以使用函数作为样式属性的值,该函数将被调用并返回当前状态下的样式值。例如:
const styles = {color: (props) => props.color, // 根据props中的color属性动态设置color样式fontSize: (props) => props.size, // 根据props中的size属性动态设置font-size样式
};
  • 插件系统:JSS具有强大的插件系统,允许你扩展其功能以满足特定的需求。插件可以执行各种任务,例如添加新功能、改善性能、提供语法糖等。一些常用的JSS插件包括jss-nestedjss-vendor-prefixerjss-camel-case等。
3.3.1 Styles对象

在JSS中,样式被定义为一个JavaScript对象,其中包含类名和对应的样式规则。每个属性代表一个类名,属性值可以是另一个包含样式规则的对象。以下是一个简单的样式示例:

const styles = {button: {color: 'red','&:hover': {color: 'blue'}},input: {fontSize: '14px'}
};

这个示例中定义了两个类 buttoninput,分别包含了一些样式规则。注意,可以使用 & 符号来表示父选择器。

3.3.2 动态样式

JSS支持动态地更新样式,这意味着可以根据某些状态或条件来改变元素的样式。只需要返回一个函数,该函数接收到当前组件的状态作为参数后返回样式对象即可。以下是一个示例:

const styles = {button: (props) => ({color: props.color,'&:hover': {color: props.color === 'red' ? 'blue' : 'red'}})
};

4. Linaria:零运行时CSS-in-JS库

Linaria是一个基于Tagged Template Literals的CSS-in-JS库,它具有以下特点:

  • 在编译时将CSS提取到单独的文件中,从而实现真正的零运行时。
  • 支持CSS预处理,如Sass和Less。
  • 良好的开发体验,包括自动完成、类型检查和样式linting。

4.1 概述

Linaria是一个基于Tagged Template Literals的CSS-in-JS库,它允许你使用JavaScript来定义和修改CSS样式。与传统的CSS-in-JS库不同,Linaria在编译时将CSS提取到单独的文件中,从而实现真正的零运行时。这意味着你的应用程序将不再需要在运行时加载任何CSS-in-JS库的代码或依赖项。

Linaria还支持CSS预处理,如Sass和Less,这可以让你更方便地使用这些语言来定义和修改CSS样式。此外,Linaria还提供了一些其他的功能,如自动完成、类型检查和样式linting,以帮助你更好地编写和维护CSS-in-JS代码。

4.2 安装与设置

要使用Linaria,你需要在你的项目中安装并配置它。下面是一些有关如何安装和设置Linaria的基本步骤。

4.2.1 使用npm或yarn安装

首先,你需要使用npm或yarn安装Linaria。可以使用以下命令进行安装:

npm install --save-dev linaria

或者:

yarn add --dev linaria
4.2.2 Babel插件配置

接下来,你需要配置Babel插件以启用Linaria。在你的Babel配置文件中,添加以下行:

{"plugins": ["linaria/babel"]
}

这将告诉Babel在编译过程中使用Linaria的插件来提取CSS样式。

4.3 核心概念

Linaria是基于Tagged Template Literals的CSS-in-JS库,它具有以下核心概念:

4.3.1 Tagged Template Literals

Linaria使用Tagged Template Literals来定义样式并与JavaScript组件紧密耦合。以下是一个示例:

import React from 'react';
import { styled } from 'linaria/react';const Button = styled.button`background: blue;color: white;padding: 10px;border-radius: 5px;
`;

在这个例子中,我们使用styled函数来定义一个带有自定义样式的按钮组件。 styled函数返回一个具有指定标签(这里是button)的新组件,并将所有属性直接传递给底层组件。这种语法允许我们轻松地将样式与组件定义组合在一起,而不需要显式地创建单独的样式对象或类名。

4.3.2 零运行时

Linaria的主要特点是其零运行时架构。这意味着在运行时不需要进行样式注入或更新。相反,所有的样式都是在构建时进行提取和捆绑的。这样可以提高应用程序的性能,并减少对客户端资源的需求。

4.3.3 CSS提取

Linaria会将所有标记的模板字面量中的CSS提取到单独的文件中。然后,它会将提取的CSS与相应的组件关联起来,并在适当的时机将其注入到DOM中。这使你可以轻松地使用模块化的CSS,而无需手动管理样式的注入和更新。

5. Fela:基于插件机制的CSS-in-JS库

Fela是一个基于插件机制的CSS-in-JS库,它允许你使用JavaScript来定义和修改CSS样式。Fela通过插件机制,为开发者提供了高度的灵活性和可扩展性。

5.1 概述

Fela将样式定义为JavaScript对象,这使得样式可以在运行时动态地创建和修改。Fela的核心概念包括Renderer、插件和样式单元。通过这些概念,Fela可以与其他库(如React)结合使用,以实现组件化的风格。

5.2 安装与设置

5.2.1 使用npm安装

首先,通过npm安装Fela:

npm install fela --save
5.2.2 创建Renderer

创建一个renderer是使用Fela的第一步。renderer是一个用于管理样式和插件的对象。下面是一个基本的renderer配置:

import { createRenderer } from 'fela';
import fallbackPlugin from 'fela-plugin-fallback';
import prefixer from 'fela-plugin-prefixer';const renderer = createRenderer({plugins: [fallbackPlugin(), prefixer()],
});

在上面的例子中,我们使用了两个插件:fela-plugin-fallbackfela-plugin-prefixer。这些插件添加了浏览器兼容性支持,使我们的样式可以在不同的浏览器上正常工作。

5.3 核心概念

5.3.1 Renderer

renderer是用于管理样式和插件的对象。它包含了有关当前样式的信息,并提供了将样式呈现为CSS的接口。renderer还负责执行插件,这些插件可以修改样式或添加额外的功能。

5.3.2 插件

插件是Fela的核心功能之一。插件是函数,可用于在样式对象上执行转换操作。插件可以是异步的,也可以是同步的,并且可以接收任意数量的参数。Fela有许多内置的插件,也有大量的第三方插件可供使用。

5.3.3 样式单元

样式单元是Fela用于表示单个样式集合的概念。样式单元是由create方法生成的对象,它接受一个包含属性和值的对象作为参数。样式单元有自己的唯一类名和CSS属性字符串,可以通过toString方法访问。

5.4 使用示例

以下是一些使用Fela的示例:

6. Aphrodite:Facebook出品的CSS-in-JS库

Aphrodite是Facebook开源的一个轻量级CSS-in-JS库,它可以帮助我们在JavaScript中声明样式,并将其应用于DOM节点。与传统的CSS相比,它在样式的组织和管理上更加灵活和方便。

6.1 概述

Aphrodite的主要特点包括:

  • 使用JavaScript来定义样式,可以更方便地组织和管理样式。
  • 通过StyleSheet.create()函数将样式对象转换为可复用的类名,并在组件中应用。
  • 自动添加前缀和压缩样式,提高代码的兼容性和效率。
  • 支持媒体查询、关键帧动画等高级特性。

6.2 安装与设置

6.2.1 使用npm安装

首先,我们需要使用npm安装Aphrodite库:

npm install aphrodite --save
6.2.2 引入库

然后,在我们的JavaScript文件中引入Aphrodite库:

import { StyleSheet, css } from 'aphrodite';

这将使我们能够使用Aphrodite提供的核心功能,例如StyleSheet.create()css()函数。

6.3 核心概念

下面我们来介绍Aphrodite的核心概念。

6.3.1 StyleSheet.create

StyleSheet.create方法用于创建一个包含多个样式的样式表。它接受一个对象作为参数,其中每个键表示一个类名,对应的值是一个样式对象。StyleSheet.create方法会返回一个新的对象,其中包含生成的类名和原始样式对象。

以下是一个示例:

import { StyleSheet, create } from 'aphrodite';const styles = StyleSheet.create({button: {backgroundColor: 'blue',color: 'white',padding: '10px',borderRadius: '5px',},container: {textAlign: 'center',},
});
6.3.2 css函数

css()函数用于将样式应用于DOM节点。它接受一个或多个样式规则(或它们的类名)作为参数,并返回一个字符串。我们可以将此字符串用作HTML元素的类属性。例如:

const styles = StyleSheet.create({button: {backgroundColor: 'blue',color: 'white'},activeButton: {backgroundColor: 'red'}
});function Button() {return <button className={css(styles.button)}>Click me</button>;
}

总结

通过本文的介绍,您将了解到CSS-in-JS的基本原理和应用场景,并且能够根据具体需求选择合适的库进行开发。无论是styled-components的易用性、Emotion的灵活性,还是JSS的可扩展性、Linaria的零运行时特性、Fela的插件机制,以及Aphrodite的关键帧动画支持,每个库都提供了不同的解决方案来满足各种需求。

这篇关于【JavaScript脚本宇宙】革新前端样式:CSS-in-JS库大比拼与最佳实践的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1085578

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M