在这篇文章中，我们仔细研究了前台开发中的一项前沿技术：在JavaScript文件中用CSS。

JS中的CSS是一种相对较新的技术，它允许开发人员直接在JavaScript代码中编写CSS代码，而不是用单独的CSS文件。

主要好处是：

1. 死代码/规则和树震： 通过用JavaScript工具，您能轻松检测未用的CSS规则并将其从捆绑中删除。
2. CSS隔离： CSS类名称是动态生成的; 它们通常比常规CSS更小，更孤立。
3. 下载大小： 小型CSS名称和CSS在应使用程序捆绑中的嵌入导致更少的网络请求。
4. JavaScript的灵活性：虽然存在多种工具（SASS， Less等）来更有效地编写CSS，但没有任何东西能打败完整编程语言的力量！
5. 代码共享： 所有代码都位于同一位置，因而您能轻松共享CSS和应使用程序代码之间的颜色和大小等常数。
6. 静态分析： 用标准JavaScript工具能确保没有用无效的CSS规则或者值。

在JS中用CSS显然不是处理所有性可以问题的方法，并且有许多开发人员严厉批评了它背后的概念，例如，像这样的帖子 。还有几种处理方案能通过简单的CSS代码实现重要的性可以优势，例如 CSS板块。与往常一样，作为开发人员，我们只要选择最适合产品要求和团队偏好的工具和技术。

在本文中，我们将演示如何在React应使用程序中用JS接受CSS。

在JS工具中选择一个CSS

JS工具中有几个开源CSS。看着像一个非穷尽示例列表 这个 有二十多个选项。

所有的工具提供的功可以差不多，大部分时间都是框架不可知的，所以选择真的取决于你。

在我们的例子中，我们希望选择易于在堆栈中引入的工具，而不需要太复杂。因而，所有用 高阶组件 （HOC）方法的工具都被排除在外。

HOC用开发人员将组件传递给添加新功可以的功可以的想法。而后用结果代替原始组件。

同样，我们希望取得的好处之一是静态类型分析，因而也会排除用ES6模板文字编写CSS的工具。只有将CSS接受为Javascript对象的工具才被考虑列入。

在JS工具的所有现有CSS中，我们选择 TypeStyle 的起因如下：

1. 它用普通的JavaScript编写代码，而不是强制用JavaScript模板等。
2. 它有完整的TypeScript类型。对于支持它的编辑器，如Visual Studio Code，它能在开发时进行完整的静态分析和未用的代码检测。
3. 它与框架无关，能很容易地嵌入到大多数框架中，而不会从根本上改变您编写应使用程序的方式。
4. 它有使用于媒体查询，颜色和动画的实使用程序和相关软件包。
5. 因为规则会附加到

   通使用规则和高级媒体查询

   TypeStyle还允许您用自己设置选择器定义规则。这些规则会立即应使用于文档，并且不会生成类名称。

   假设我们想要在页面的中心显示我们的微调。我们利使用 CSS Flexbox 板块，这个任务很简单。

   typestyle.cssRule('html, body', {

   display: 'flex',

   alignItems: 'center',

   justifyContent: 'center',

   minHeight: percent(100),

   fontSize: '10pt' // This sets 1rem = 10px

   })

   回到媒体查询，在与他们合作时需要考虑少量事情。尽管CSS应使用于顶部，但TypeStyle规则不是。无碰撞类名通常确保这不是问题，但针对相同类的媒体查询可可以会显示少量意外行为。

   以这个样式表为例：

   div {

   color: black;

   }

   @media (max-width: 600px) {

   div {

   color: red;

   }

   }

   @media (max-width: 400px) {

   div {

   color: yellow;

   }

   }

   将其应使用于文档时，媒体查询将自上而下执行，因而，当窗口大小低于400像素时，div文本颜色为黄色。

   用TypeStyle时，通常将上面的样式表转换为以下定义：

   const divClassName = style(

   {

   color: 'black'

   },

   media({maxWidth: 600}, {

   color: 'red'

   }),

   media({maxWidth: 400}, {

   color: 'yellow'

   })

   )

   TypeStyle不保证类的生成顺序（尤其是由于这依赖于JS引擎），所以我们需要调整媒体查询以避免产生歧义。

   上面的代码能这样修复：

   const divClassName = style(

   {

   color: 'black'

   },

   media({maxWidth: 600, minWidth: 401}, {

   color: 'red'

   }),

   media({maxWidth: 400}, {

   color: 'yellow'

   })

   )

   服务器端呈现和关键CSS

   TypeStyle使服务器端渲染（SSR）非常简单。核心思想是，一旦您在某个变量中准备好了服务器生成的HTML，即可以调使用该getStyle函数以刷新所有已用的样式。

   这也有利于确保在响应中只发送用的CSS规则 - 这就是所谓的 关键CSS。

   以下是如何在服务器上用React和TypeStyle生成完整HTML页面的简单示例：

   app.get('/', function (req, res) {

   const body = ReactDOMServer.renderToStaticMarkup()

   const html = ReactDOMServer.renderToStaticMarkup(

   )

   res.send(html);

   });

   老化性可以的缺点和改进

   在代码中嵌入TypeStyle当然有其缺点。特别是，这两个新库的添加使PWA应使用代码大小添加了大约15KB。

   好消息是，当这些额外的数据加载时，应使用程序和使用户交互根本没有被阻止。该应使用程序已经在服务器上呈现，并且所有需要的CSS已经在具备HTML页面的设施上着陆; 因而浏览器拥有呈现网页所需的一切。

   此外，关于添加 - 在快速网络环境中，这些额外数据几乎不可感知，在慢速或者不可靠网络上，它会在第一次渲染时间上取得巨大收益。

   这是用纯CSS的原始分支上的页面加载的原始性可以。

   

   通过用TypeStyle，我们几乎能将慢速3G网络上的初次渲染时间缩短50％。

   

   要概述TypeStyle如何在有限的情况下提供帮助，我们用webpagetest用的配置文件设置，在不同的移动网络条件下运行相同的比较 ：

   

   正如您从下面的图表中看到的，在每个网络请求非常昂贵的较慢网络中，这些好处更加显著。即便在大多数高性可以网络中，在JS技术中用CSS进行嵌入，第一次渲染时间也会缩短100ms。

   

   在所有情况下，JS中的CSS最多添加100ms第一个互动。如前所述，假如我们查看使用户转换率的增长，初次呈现时间的减少使其能接受。

   

   结论

   PWA的引入彻底改变了我们开发应使用程序的方式。移动设施现在可以够以几年前甚至无法想象的方式离线存储信息。

   PWA详情了在无情的网络环境中提供内容服务的各种新方法。我们不可以不记得，首先需要一个网络来加载缓存。每个应使用程序都是不同的，引入服务工作者能让开发人员提供能更好地适应特定使用例的自己设置缓存策略。

   在这篇文章中，我们概述了如何在JS中用CSS能帮助减少应使用程序大小以及初次加载它所需的网络请求数量。尽管这种技术不是所有现代Web应使用程序性可以问题的灵丹妙药，但它会导致第一次渲染时间的显着缩短。