JS类型检查中的CSS

作者 : 开心源码 本文共4561个字,预计阅读时间需要12分钟 发布时间: 2022-05-11 共78人阅读

在这篇文章中,我们仔细研究了前台开发中的一项前沿技术:在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. 因为规则会附加到 页面中的某个 页面上,所以在服务器端渲染(即所谓的关键路径)中生成最少的CSS 是自动的。

要查看它的实际操作,请查看我们的React PWA应使用程序。nearForm 最近在这篇博文中写到了它 。您能在https://hackernews.nearform.com上看到该应使用程序的实际操作, 并查看GitHub上的 源代码。

如何用TypeStyle在JS中编写CSS

在JS中编写CSS的核心思想是你调使用传递CSS规则的样式函数。函数的返回值是您能在需要时用的类名称。

生成的类名称就像 f14svl5e。该名称(实际上是传递属性的散列)是从您传入的规则中生成的。没有碰撞。此外,调使用此函数会自动将此规则附加到要注册的规则列表。

要开始,我们来定义我们的规则。我们在React中用TypeStyle创立一个微调器:

const React = require('react')

const { style, media, keyframes } = require('typestyle')

const { px, rem, percent } = require('csx')

const green = rgb(0, 255, 0).darken(0.2).toString()

const animation = keyframes({

[percent(0)]: {

transform: 'rotate(0deg)'

},

[percent(100)]: {

transform: 'rotate(720deg)'

}

});

const spinnerContainerClassName = style({

width: rem(10),

height: rem(10)

})

const spinnerClassName = style(

{

stroke: green,

strokeWidth: 3,

strokeDasharray: percent(300),

strokeLinecap: 'round',

strokeDashoffset: 100,

fill: 'transparent',

animation: `${animation} 2s linear infinite`,

transformOrigin: 'center'

},

media({maxWidth: px(300)}, {

animationDuration: '0.5s'

})

)

function Spinner() {

return (

)

}

class TodoApp extends React.Component {

render() {

return (

)

}

}

ReactDOM.render(, document.body)

在这个例子中,我们演示了您通常用的大部分功可以。

首先,我们用csxTypeStyle的相同开发人员定义了一种颜色 ,它是一个实使用程序包。

而后我们定义动画制作微调器的规则。在这种情况下,我们利使用升级的Javascript语法和计算密钥的概念。这些值只是CSS规则,所需的唯一更改是重命名其中的所有属性 camelCase。

keyframes 函数再一次 返回一个字符串 – 我们不关心它是什么,我们只要将它传递给样式就可。

而后我们定义这个例子所需的两个类:一个使用于SVG本身,另一个使用于旋转的内部圆。在后者中,我们重使用动画名称; 这在所有生成的样式中都是唯一的,所以不会发生碰撞。

我们还用该media 功可以定义了媒体查询 。这将媒体查询作为第一个参数,将规则对象作为第二个参数。为了测试它,只要使窗口变小并且旋转速度添加。

最后,我们将返回的值作为类名称传递给className 属性的值, 我们完成了!

一旦应使用程序被加载并且 style 函数被评估,TypeStyle 在文档头中创立一个 标签并在其中附加所有规则。

这是生成的代码:

这是添加的 元素:

@keyframes fyn2kv5{0%{transform:rotate(0deg)}100%{transform:rotate(720deg)}}.f1f6g1bb{height:10rem;width:10rem}.f1wqo8mf{animation:fyn2kv5 2s linear infinite;fill:transparent;stroke:rgb(0,153,0);stroke-dasharray:300%;stroke-dashoffset:100;stroke-linecap:round;stroke-width:3;transform-origin:center}@media (max-width: 300px){.f1wqo8mf{animation-duration:0.5s}}

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

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(

SSR

{getStyles()}

)

res.send(html);

});

老化性可以的缺点和改进

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

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

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

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

JS类型检查中的CSS

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS类型检查中的CSS

发表回复