首页 > 编程语言 >【JavaScript脚本宇宙】革新前端样式:CSS-in-JS库大比拼与最佳实践

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

时间:2024-06-22 20:32:03浏览次数:24  
标签:npm 插件 样式 JavaScript JS styled 大比拼 CSS

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

前言

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

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

文章目录

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的关键帧动画支持,每个库都提供了不同的解决方案来满足各种需求。

标签:npm,插件,样式,JavaScript,JS,styled,大比拼,CSS
From: https://blog.csdn.net/qq_42531954/article/details/139887486

相关文章

  • Javascript 教程
     JavaScript 输出使用 window.alert() 弹出警告框<!DOCTYPEhtml><html><head><metacharset="UTF-8"> <title>使用window.alert()弹出警告框</title></head><body> <script>window.alert(&qu......
  • 基于JSP的交通事故档案管理系统
    开头语:你好,我是计算机学长猫哥,如果你对系统有更多的期待或建议,欢迎随时联系我。开发语言:Java数据库:MySQL技术:JSP+Java工具:ECLIPSE、Tomcat系统展示首页管理员界面用户注册界面事故信息管理摘要随着科技的不断进步,交通事故档案管理系统的开发变得尤为重要。......
  • 基于JSP技术的家用电器销售网站
    开头语:你好呀,我是计算机学长猫哥!如果有相关需求,文末可以找到我的联系方式。开发语言:Java数据库:MySQL技术:JSP+Java工具:ECLIPSE、MySQL数据库管理工具、Tomcat系统展示首页用户个人中心订单评价管理商品信息管理摘要家用电器销售网站的开发是为了适应信息化......
  • drogon orm分页问题,req->getJsonObject()为空会导致Segmentation fault
    2024年6月22日17:14:12req->getJsonObject()获取json数据的时候,如果没有提前判断if(req->getJsonObject()==nullptr){throwstd::invalid_argument("参数json不能为空");}autojsonPtr=req->getJsonObject();官方文档:h......
  • fastjson
    fastjson一、fastjson简介fastjson是java的一个库,可以将java对象转化为json格式的字符串,也可以将json格式的字符串转化为java对象提供了toJSONString()和parseObject()方法来将Java对象与JSON相互转换。调用toJSONString方法即可将对象转换成JSON字符串,parseObject......
  • 什么是json?json可以存放在哪几种数据类型?在什么时候用?
    JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于语言的文本格式来存储和表示数据。它使得人们可以很容易地阅读和写入数据,同时也使得机器可以解析和生成数据。JSON可以存放以下几种数据类型:1.字......
  • excel 转json 工具、json检测工具(来自个人学习,编写,自己使用工具)
    推荐一款自己编写的一款软件,excel转json工具(绿色、纯净、免费、共享);因为游戏需要将excel或其它表格转成json工具,以供cocoscreator使用,其它一些工具的比较:1.cocoscreator插件,也有免费的,但主要是效率低,如果excels文件多的时候,转换时间特别的长,无法接受。就是入口方便自......
  • JS箭头函数
    箭头函数箭头函数是ES6中引入的一种新的函数定义语法,它提供了一种更简洁、更直观的方式来定义函数。下面是箭头函数的详细说明:基本语法://没有参数的箭头函数constfunc1=()=>{ //函数体};​//单个参数的箭头函数constfunc2=param=>{ //函数体};​......
  • three.js 第六节 - 纹理以及贴图【.hdr文件(hdr贴图)】- 色彩空间
    素材这是素材更多素材、案例、项目好几个G一共,加我q178373168,60大洋拿走源码源码//@ts-nocheck//引入three.jsimport*asTHREEfrom'three'//导入轨道控制器import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'//导入lil.gui......
  • three.js 第八节 - gltf加载器、解码器
    //@ts-nocheck//引入three.jsimport*asTHREEfrom'three'//导入轨道控制器import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'//导入hdr加载器(专门加载hdr的)import{RGBELoader}from'three/examples/jsm/loaders/RGBELoad......