CSS 的介绍 CSS（层叠样式表）是一种用来为结构化文档添加样式的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。...为了加快那些已经确认没有问题的特性的标准化速度，W3C 的 CSS Working Group(CSS 工作组) 作出了一项被称为 Beijing doctrine 的决定，将 CSS 划分为许多小组件...它允许使用JavaScript以声明性和可维护的方式描述样式，从而将 CSS 抽象到组件级别本身。...使用 CSS-in-JS 的优点 组件化思考模式，不再需要维护一堆样式表。CSS-in-JS 将 CSS 模型抽象到组件级别，而不是文档级别（模块化）。...CSS-in-JS 的实现方案，单独发布了 Material-UI 组件中使用的样式方案 —— @material-ui/styles。
这解决了大型应用程序中充斥着未被检测到的过时样式规则的问题。但这样的应用程序下载和执行都比较笨重，对用户体验有负面影响。 将 CSS 规则的作用域严格限定到相关的组件就很难会无意影响到其他组件的样式。...如果没有组件作用域，CSS 的级联和专一性规则可能会导致不相关组件的样式定义发生渗透。 最后，使用完备的图灵语言，如 JavaScript，开发人员可以完全自由地表达组件样式和组件逻辑之间的关系。...Magura提到，Emotion的GitHub项目中记录的相当多的问题都与服务器端渲染有关（例如React 18的流、规则插入顺序）。...CSS-in-JS指的是通过JavaScript生成CSS规则，而不是在外部CSS文件中定义样式。...运行时CSS-in-JS库，如Emotion或styles-component，在运行时动态修改样式，例如将样式标签注入文档。零运行时CSS-in-JS是一种在构建时提取所有CSS的模式。
Ant Design Ant Design是阿里巴巴团队出品的ReactUI组件库。有自己独特的设计风格和理念。非常符合国人的审美需求。并且在支付宝、蚂蚁金服等多个阿里项目中投入使用。...Material-UI 一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。Material-UI 组件是独立工作的。...它们是自我支持的，并只要注入而且仅注入它们需要显示的样式。 他们不依赖任何全局的样式表，如 normalize.css。...Material-UI首先是移动开发的，我们首先为移动设备编写代码，然后根据需要使用CSS媒体查询扩展组件。 要确保所有设备的正确渲染和触摸缩放，请将响应式视口元标记添加到 元素。...React-Bootstrap 是可重用的前端组件库。与 Twitter Bootstrap 一致外观与感受，但通过 Facebook 的 React.js 框架获得更清爽的代码。
这种方法的主要思想是「将组件的样式与组件本身紧密耦合在一起，以提高可维护性、可读性和复用性」。CSS-in-JS 有许多不同的库和工具，每个都有自己的语法和特性，但核心思想是相似的。...使用CSS模块创建「可移植」和「可重用」的CSS文件。不再需要担心规则会影响其他组件的样式或选择器名称冲突。 尽管项目复杂，但CSS模块可以使我们的代码看起来整洁，以便其他开发人员可以阅读和理解它。...缺点： 在将样式集成到项目中时，必须将样式包含为带有点号或方括号表示法的对象。 与Styled Components不同，CSS模块不接受props。 那么，为什么要使用CSS模块呢？...在将CSS模块集成到我们的React项目中时，我们必须指定类，「就像在标准JavaScript中使用点符号或方括号语法访问对象的属性一样」。...模块的样式表导入到组件中，最好在[classes]或[styles]前缀下导入它。
打包后的代码体积问题。如果不用任何的 CSS 工程化方案，所有的 CSS 代码都将打包到产物中，即使有部分样式并没有在代码中使用，导致产物体积过大。...这些方案各自定义了一套语法，让 CSS 也能使用嵌套规则，甚至能像编程语言一样定义变量、写条件判断和循环语句，大大增强了样式语言的灵活性，解决原生 CSS 的开发体验问题。...你可能会注意到，每次要使用$theme-color属性的时候我们都需要手动引入variable.scss文件，那有没有自动引入的方案呢？...接下来我们将这两个方案分别接入到 Vite 中，在实际的项目中你只需要使用其中一种就可以了。...，说明样式已经正常生效除了本身的原子化 CSS 能力，Windi CSS 还有一些非常好用的高级功能，在此我给大家推荐自己常用的两个能力: attributify 和 shortcuts。
最后通过 StyleSheet 对象将样式规则插入到 DOM 中 image.png stylis是一个 3kb 的轻量的 CSS 预处理器, styled-components 所有的 CSS 特性都依赖于它...，并调用 StyleSheet 将生成的样表注入到文档中 StyleSheet: 负责管理已生成的样式表, 并注入到文档中 styled-components 性能优化建议 styled-components...每次渲染都会重新计算 cssRule，并进行 hash 计算出 className，如果已经对应的 className 还没插入到样式表中，则使用 stylis 进行预处理，并插入到样式表中; 另外...---- 技术地图 CSS 相关 @emotion/unitless 判断属性值是否需要单位 css-to-react-native 将 css 转换为 ReactNative style 属性 ✨stylis...轻量的 CSS 预处理器 React 相关 @emotion/is-prop-valid 判断是否是合法的 DOM 属性 hoist-non-react-statics 提升React组件的静态属性，
在样式中使用 JS 常量的能力在某些情况下可以降低重复，因为同一个常量不需要同时定义为CSS变量和 JS 常量。...许多Web开发者，包括我自己，一般会社区中最热门的新趋势。...不使用 Emotion，对 Member Browser 进行测试 为了了解这种昂贵的渲染有多少是由Emotion造成的，我使用Sass Modules而不是Emotion重写了Member Browser...虽然不是世界末日，但确实不那么方便了。...虽然我自己没有使用过任何编译时的CSS-in-JS库，但我仍然认为它们与Sass模块相比有缺点。
接下来，我来和大家分享一下这篇Why We're Breaking Up with CSS-in-JS 嗨，我是 Sam,来自Spot的软件工程师，也是广泛使用的 React CSS-in-JS 库 Emotion...本文将深入探讨最初吸引我使用 CSS-in-JS 的原因，以及我(和 Spot 团队其他成员)决定抛弃它的原因。 我们将简要概述 CSS-in-JS 以及它的优缺点。...如果MyComponent渲染频繁(如每次键盘输入都渲染),重复序列化可能具有很高的性能成本。 一种更高效的方法是将样式移到组件外部，这样序列化只在模块加载时执行一次，而不是每次渲染时都执行。...我已经使用 Bootstrap 多年了，所以我们选择了 Bootstrap。我们需要定制这些类以适应现有的样式系统，所以我把 Bootstrap 源代码相关部分拷到了项目中。...尽管我自己没有使用过任何编译时 CSS-in-JS 库，但我认为与 Sass Modules 相比它们仍有劣势。
在我毕业后，参与了一个项目，此时命运的齿轮转动了，前端就是用React，后端用的是Java。然后，你没看错，我们当时都是全栈开发，前后端都是自己来弄。...由于CSS语言的自身特点(凌乱且不好进行管理)，导致一些项目中由于不合理使用，到时乱像丛生。 天下苦CSS久矣。于是，奋起反抗。出现了很多优秀的方案。 解决方案 1....Emotion Emotion[15] 是另一个关注性能和灵活性的 CSS-in-JS 库。它提供了多种方式来定义和应用样式到 React 组件，包括字符串和对象样式。...Emotion 以其可预测性和适用于使用 JavaScript 编写不同 CSS 样式而闻名。它提供了一个与框架无关的方法，使其适用于各种 JavaScript 框架。...Recharts[27] 是一个使用 React 构建的可组合图表库。它提供了一个简单且灵活的 API，用于创建各种类型的图表，非常适合将数据可视化添加到 React 项目中。
但 React 在这一年中所取得最重要的成就不是它推出的新特性，而是修改了它的开源协议：BSD 协议 -> MIT 协议。...包管理器 Bower市场占有率持续下降，它的最后一次发布在2016年11月，之后官方正式推荐用户使用 NPM 用于管理前端项目中的软件包。...另一方面，在 2017 年，主要的进步来自 CSS-in-JS 的明显改进与采用，其中所有样式都是通过代码而不是样式表进行构建的。目前还不清楚这是否将成为前端社区的最终方向，但这是目前最新的方法。...注：评论中有同学谈到 PostCSS 是后处理器，根据定义，CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的预处理器，它属于广义上的 CSS 预处理器。...像 Gatsby这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。
CSS 权重也不是什么问题，因为我们使用的是最简单的类选择器。 我们现在通过 html 标签来添加样式，发现了一些有趣的事儿： 我们增加新功能的时候，样式表的增长减缓了。...此时，你可能想知道为什么要使用原子 CSS 而不是 Tailwind CSS?强制执行原子 CSS 规则的一个规则，一个类名，有什么好处?你最终会得到更大的 html 标签和更烦人的命名约定吗?...在规则冲突的情况下，生效的不是标签上 class attribute 中的最后一个类，而是样式表中最后插入的规则。...以这张图为例，我们期望的是书写在后的 blue 类覆盖前面的类，但实际上 CSS 会以样式表中的顺序来决定优先级，最后我们看到的是红色的文字。...它基于一些约定创造出一些原子规则，在 emotion 中使用它试试： import styled from '@emotion/styled'; import { typography, space,
CSS 权重也不是什么问题，因为我们使用的是最简单的类选择器。 我们现在通过 html 标签来添加样式，发现了一些有趣的事儿： 我们增加新功能的时候，样式表的增长减缓了。...此时，你可能想知道为什么要使用原子 CSS 而不是 Tailwind CSS?强制执行原子 CSS 规则的一个规则，一个类名，有什么好处?你最终会得到更大的 html 标签和更烦人的命名约定吗?...在规则冲突的情况下，生效的不是标签上 class attribute 中的最后一个类，而是样式表中最后插入的规则。 ?...以这张图为例，我们期望的是书写在后的 blue 类覆盖前面的类，但实际上 CSS 会以样式表中的顺序来决定优先级，最后我们看到的是红色的文字。...它基于一些约定创造出一些原子规则，在 emotion 中使用它试试： import styled from '@emotion/styled'; import { typography, space,
仅仅两年之后，开发团队又推出了 Angular 2，基于新的范式对原始库进行全面重写。但包括我自己在内，不少开发者都不愿修改现有应用来适应新的设计思路。...于是在新项目中，Angular.js 不再作为优先选项，市面上其他出色的框架开始迎来自己的机会空间。 2015 年，我们开始在前端开发中使用 React。...例如，React Context 就是管理依赖项注入的绝佳方案。...如果没有 React Context，那服务端组件就需要单独的依赖项注入容器（Dependency Injection Container，类似 Angular 的办法）。...因此，对于 React 是否将迎来自己的“Angular.js 时刻”这个问题，答案显然是否定的。但如果大家现在起打算新开一个项目，那会如何选择？
⑤ 响应设计 5.1 响应式设计推荐遵循的原则 5.2 媒体查询的使用 CSS 媒体查询是一种可以根据设备类型或屏幕尺寸等特征，为不同的设备或尺寸定义不同的规则和样式表的技术。...当浏览器宽度小于 768px 时，第一个媒体查询将应用规则集中的样式，而当浏览器宽度大于或等于 768px 时，第二个媒体查询将应用规则集中的样式。...这些插件可以改变CSS规则或者生成新的CSS规则。 将处理完毕的CSS代码重新生成成普通的CSS文件，可以是通过压缩、格式化等方式。...PostCSS与其他CSS预处理器如Sass和Less的不同之处在于，PostCSS不需要创建自己的语言或者语法，而是可以直接使用CSS原生的语法和属性。...6.3.2 CSS in JS CSS in JS是一种利用JavaScript代码定义CSS样式的技术，而不是将样式定义在单独的CSS文件中。
引言 CSS预编译是一项前端开发中常用的技术，它旨在解决传统CSS的一些限制和不足，如缺乏变量、嵌套、代码复用等。...本文将深入探讨CSS预编译的定义、优势、不同的预编译器、基本语法和最佳实践，以及如何在项目中使用它来改进样式开发流程。 1....1.2 CSS预编译的定义 CSS预编译是一种将高级CSS代码转换为浏览器可识别的标准CSS的过程，它引入了变量、嵌套、函数、混合等功能，以提高样式表的可读性和可维护性。 2....5.3 模块化 将样式表分解为模块，每个模块负责一个独立的组件或部分。 6. 如何开始使用CSS预编译器 6.1 安装与配置 根据选择的CSS预编译器，安装相应的编译器和构建工具，并进行配置。...6.2 转换和编译 编写预编译的样式文件，并使用编译工具将其转换为标准的CSS文件。 6.3 集成到项目中 将编译后的CSS文件集成到项目中，并更新HTML文件中的引用。
其他第三方库推荐： Emotion JSS Radium Styled-components 我并不完全赞成使用 CSS-in-JS，但我不得不说，其中一些库增加了对在某些情况下可能会有用的功能支持...在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...通过这种方式，你可以保留 Aphrodite(或 styled-components) 的优点，并使用 JSS 的所有特性和 插件，从 规则缓存 到 规则隔离，以及主题，主题包，以下是它提供的高阶组件：...中的一切都是全局的，使用 CSS-in-JS 的目的之一是消除全局样式定义。...=='production'），有三个方法： suppressStyleInjection：它阻止样式被注入到DOM中，当你想要在没有DOM的情况下测试Aphrodite 组件的输出时非常有用。
其他第三方库推荐： Emotion JSS Radium Styled-components 我并不完全赞成使用 CSS-in-JS，但我不得不说，其中一些库增加了对在某些情况下可能会有用的功能支持...在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...通过这种方式，您可以保留 Aphrodite(或 styled-components) 的优点，并使用 JSS 的所有特性和 插件，从 规则缓存 到 规则隔离，以及主题，主题包，以下是它提供的高阶组件：...中的一切都是全局的，使用 CSS-in-JS 的目的之一是消除全局样式定义。...=='production'），有三个方法： suppressStyleInjection：它阻止样式被注入到DOM中，当你想要在没有DOM的情况下测试Aphrodite 组件的输出时非常有用。
我将所有全局样式保存在一个单独的文件中（尤其是在使用预处理器时），但你也可以将其放在 CSS 文件的顶部，然后专注于为站点的特定组件、元素或部分设置特定样式。...3、模块化你的代码风格 你不需要将所有 CSS 捆绑在一个文件中，除非它会被使用。如果用户登陆主页，则只需要包含该页面的样式即可，不需要其他内容。我将样式表分为基本样式和非基本样式。...你可以创建自己的Javascript CSS加载器，也可以通过在页面中包含样式表时使用标记来延迟非关键CSS。...important 如果你正在使用 Bootstrap 并且真的想覆盖一个样式，你将需要使用 !important 标志，但同样，你为什么首先使用 Bootstrap？ 如果你发现自己需要使用 !...此规则有例外，但始终确保采用的结构不违反任何 HTML 语义规则。 首先，编写 HTML 时要考虑内容，而不是样式。比添加 CSS 并在出于样式原因更改 HTML 之前尽力而为。
} } 我们需要为项目中添加一些样式，此时就需要使用样式相关的加载器，这边使用 scss,安装命令如下： npm install --save-dev style-loader css-loader...sass-loader node-sass style-loader 通过注入 标签将 CSS 添加到 DOM 中 css-loader css-loader用于将 css 文件打包到...js中, 常常配合 style-loader 一起使用，将 css 文件打包并插入到页面中 sass-loader 加载 SASS/SCSS 文件 node-sass 将 SCSS 文件编译为 CSS...npm run webpack npm start 使用 Webpack 和 Babel 项目将 Material Design 加到我们的新 React 项目中 正如在这篇文章的开头讲的，我们不会讲...我们不需要 Material Dashboard React 包中的所有依赖项，因为我们使用 Webpack 构建了自己的服务器。 除了产品本身，我们还添加了其他样式加载器。
除了工具还需要阅读代码，查看使用的插件在项目中的场景，综合考虑解决办法 打包体积优化 安装 webpack-bundle-analyzer 会弹出一个网页来显示项目打包后的体积大小，根据打包提及来优化...例如我们要将项目中的react-dom和@material-ui/xxx相关内容分包出去 创建 webpack.dll.config,js用来写分包的配置文件 const path = require(.../dll/common-manifest.json') //对应生成的manifest文件路径 }), // 将生成的dll文件拷贝到打包生成的目录 new CopyWebpackPlugin...js压缩 mini-css-extract-plugin 分离样式文件，将ss提取为单独文件 DefinePlugin 定义全局常量，应用：在不用环境下引入不通的配置 speed-measure-webpack-plugin...文件中可以引入 style-loader 将css文件注入到index.html中的style标签上 less-loader 处理less代码 sass-loader 处理sass代码 babel-loader
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
