弥合CSS和JavaScript之间的鸿沟：JS中的CSS

2021-06-29 04:00:01 javascript 阅读：653
在本文中，我们将深入探讨JS中CSS的概念。如果你已经熟悉了这个概念，你可能仍然喜欢在这个方法的哲学中漫步，你可能对下一篇文章更感兴趣。 Web开发是一个非常跨学科的领域。我们习惯于与多种语言密切合作。而且，随着开发web应用程序变得越来越普遍和细致入微，我们经常寻找创造性的方法来弥合这些语言之间的差距，使我们的开发环境和工作流程更简单、更高效。 最常见的例子通常是在使用模板语言时。例如，可以使用一种语言来生成更详细的语言（通常是HTML）的代码。这是前端框架的一个关键方面——操作HTML是什么样子的？这个领域最近的一个转折点是JSX，因为它不是一种真正的模板语言；它是JavaScript的语法扩展，它使使用HTML变得非常简洁。 Web应用程序经历了许多状态组合，单独管理内容常常很具挑战性。这就是为什么CSS有时会半途而废的原因——尽管通过不同的状态和媒体查询管理样式同样重要，也同样具有挑战性。在这个由两部分组成的系列文章中，我想将CSS放在聚光灯下，并探讨如何弥合CSS与JavaScript之间的差距。在本系列中，我将假设您使用的是一个模块绑定器，比如webpack。因此，我将在我的示例中使用React，但是相同或相似的原则适用于其他JavaScript框架，包括Vue。 CSS环境正在朝着许多方向发展，因为有许多挑战需要解决，而且没有\"正确\"的路径。我花了大量的精力尝试各种方法，主要是在个人项目上，所以本系列的目的仅仅是为了告诉大家，而不是在编写代码之前，先说明CSS的挑战，这是值得解释的。我将在本系列中讨论的是作用域、条件和动态样式以及可重用性。 h4>svg>scopingp>作用域是一个众所周知的CSS挑战，它是一个编写样式的想法，不会泄漏到组件之外，从而避免意想不到的副作用。我们希望在不影响创作经验的情况下达到理想的效果。 h4>svg>Conditional and dynamic stylesp>当前端应用程序的状态开始变得越来越高级时，CSS仍然是静态的。我们只能有条件地应用一组样式，如果一个按钮是primary，我们可能会应用class\"primary\"并在一个单独的CSS文件中定义它的样式来应用它在屏幕上的样子。有几个预定义的按钮变体是可以管理的，但是如果我们想有各种各样的按钮，比如为Twitter、Facebook、Pinterest定制的特定按钮，谁知道还有什么呢？我们真正想做的只是传递一种颜色并用CSS定义状态，比如悬停、聚焦、禁用等等。这被称为动态样式，因为我们不再在预定义的样式之间切换-我们不知道接下来会发生什么。为了解决这个问题，可能会想到内联样式，但它们不支持伪类、属性选择器、媒体查询等。 可重用性 重用规则集、媒体查询等是我最近很少提到的一个主题，因为它是由Sass等预处理器解决的。但我还是想在本系列中重温它。 我将在本系列的两个部分列出一些应对这些挑战的技巧及其局限性。没有哪种技术优于其他技术，它们甚至不是相互排斥的；您可以选择其中一种或将它们组合起来，这取决于您决定如何提高项目的质量。设置 我们将使用名为Photo的示例组件演示不同的样式设置技术。我们将呈现一个可能有圆角的响应图像，同时显示可选文本作为标题。它将这样使用： Before building the actual component, we\"ll abstract away the srcSet属性以保持示例代码简短。因此，让我们创建一个utils.js文件，其中包含两个实用程序，用于使用Cloudinary生成不同宽度的图像： import { Cloudinary } from \"cloudinary-core\"const = ({ publicId, width = ({ publicId, widths => `${getSrc({ publicId, width })} ${width}w`).join(\", \") 我们将Cloudinary实例设置为使用Cloudinary的演示云的名称，并使用其url方法根据指定的选项为图像publicId生成URL。我们只对修改这个组件的宽度感兴趣。 我们将分别对src和srcset属性使用这些实用程序： getSrc({ publicId: \"balloons\", width: 200 => \"https://res.cloudinary.com/demo/image/upload/c_scale,w_200/balloons 200w,https://res.cloudinary.com/demo/image/upload/c_scale,w_400/balloons 400w\" 如果您不熟悉srcset和sizes属性，我建议您先阅读一些关于响应图像的内容。这样，你就可以更轻松地跟随ng和供应商前缀。相反，astroturf是基于CSS模块构建的，具有有限的插值功能，鼓励使用CSS生态系统，而不是遵从JavaScript。 p>如果您想使用这两个库，我为它们构建了Gatsby插件： 对于熟悉的工具，如PostCSS，利纳里亚在幕后使用自定义属性（又称CSS变量），在使用这个库之前，一定要考虑到他们的浏览器支持，结论是CSS中的CSS是一个跨接CSS和JavaScript的多合一的样式解决方案。它们易于使用，并且包含有用的内置优化—但所有这些都是有代价的。最值得注意的是，通过在JS中使用CSS，我们基本上是从CSS生态系统中退出，并遵从JavaScript来解决我们的问题。 。与JS中的CSS相比，预处理工具的实际限制是什么？这将在本系列的下一部分中介绍， 文章系列： 1. JS中的CSS模块，PostCSS和CSS的未来， 2. ***31***中的30个***标记。首先使用这个概念的库之一是JSS。这里是使用其语法的示例：***32***object看起来像是用对象表示法编写的带有附加功能的CSS，比如传递一个函数来设置基于props的值。生成的类是唯一的，因此您不必担心它们与其他样式的冲突。换言之，您可以免费获得范围界定！这就是JS库中大多数CSS的工作原理，当然，我们会在特性和语法上做一些改动。您可以通过属性看到渲染图像的宽度从***33***开始，然后当视口宽度至少变成***34***时，宽度增加到***35***宽。我们生成了一个额外的***36***源来覆盖更大的屏幕密度：1x屏幕将使用***37***和***38***2x屏幕将使用***39***和***40***样式化组件是JS库中的另一个CSS，但是有一种更为熟悉的语法，它巧妙地使用标记模板文字而不是对象来看起来更像CSS：***41***和***42***只是为了样式的目的。这个库和其他许多库允许我们在一个动作中创建和设置它们的样式。我最喜欢这个语法的好处是它就像常规的CSS，减去插值。这意味着我们可以更容易地迁移CSS代码，并且可以使用现有的肌肉内存，而不必熟悉用对象语法编写CSS。请注意，我们可以在样式中插入几乎任何内容。这个具体的示例演示了如何将媒体查询保存在变量中并在多个位置重用它。响应图像是一个很好的用例，因为***43***属性基本上包含CSS，所以我们可以使用JavaScript使代码更干燥。假设我们决定在视觉上隐藏标题，但仍然可以让屏幕阅读器访问它。我知道实现这一点的更好方法是使用***44***属性，但是为了这个例子，让我们使用另一种方法。我们可以使用一个名为polished的样式混合库，它可以很好地与JS库中的CSS配合使用，这对我们的示例非常有用。这个库包含一个名为***45***的mixin，它做的正是我们想要的，我们可以通过插入它的返回值来使用它：***46***即使***47***输出一个对象，样式化组件库也知道如何将它作为样式插入。JS库中的CSS有许多高级功能，比如主题化、供应商前缀甚至内联关键的CSS，这使得完全停止编写CSS文件变得很容易。在这一点上，您可以开始了解为什么JS中的CSS成为一个诱人的概念。缺点和限制JS中CSS的明显缺点是它引入了一个运行时：样式需要通过JavaScript加载、解析和执行。JS库中CSS的作者正在添加各种智能优化，比如Babel插件，但是仍然存在一些运行时成本。还有一点很重要，就是这些库没有被postss解析，因为postss不是被设计用来进入运行时的。因此，许多人改用样式，因为它要快得多。这意味着我们很不幸不能使用postss插件。我要提到的最后一个缺点是工具。JS中的CSS正在以非常快的速度发展nd文本编辑器扩展、linter、代码格式化程序等需要跟上新特性的步伐才能保持标准。例如，人们在JS库中使用vscode扩展样式的组件来实现类似的CSS，比如emotion，尽管它们没有相同的特性。我甚至看到API对提议的特性的选择受到保留语法高亮的目标的影响！未来JS库中有两个新的CSS Linaria和astroturf，它们通过将CSS提取到文件中来管理零运行时。它们的API与样式化组件类似，但在功能和目标上有所不同。Linaria的目标是通过具有范围、嵌套和供应商前缀等内置功能，模仿JS库中CSS的API，如样式化组件。相反，astroturf是建立在CSS模块之上的，具有有限的插值功能，并且鼓励使用CSS生态系统而不是遵从JavaScript。p>I为两个库构建了Gatsby插件，如果您想使用它们：Gatsby plugin linariaGatsby plugin astroturf使用这些库：拥有实际的CSS文件意味着我们可以使用熟悉的工具处理它们，比如PostCSS利纳里亚在后台使用自定义属性（又称CSS变量），在使用这个库之前，一定要考虑到他们的浏览器支持。结论是，JS中的CSS是连接CSS和JavaScript之间鸿沟的一体式样式解决方案。它们易于使用，并且包含有用的内置优化，但所有这些都是有代价的。最值得注意的是，通过在JS中使用CSS，我们基本上是从CSS生态系统中退出，并遵从JavaScript来解决我们的问题。。与JS中的CSS相比，预处理工具的实际限制是什么？这将在本系列的下一部分中介绍。 3. 1x屏幕将使用***37***和***38*** 4. 2x屏幕将使用***39***和***40*** 5. Gatsby plugin astroturf 6. 使用这些库：拥有实际的CSS文件意味着我们可以使用熟悉的工具处理它们，比如PostCSS利纳里亚在后台使用自定义属性（又称CSS变量），在使用这个库之前，一定要考虑到他们的浏览器支持。结论是，JS中的CSS是连接CSS和JavaScript之间鸿沟的一体式样式解决方案。它们易于使用，并且包含有用的内置优化，但所有这些都是有代价的。最值得注意的是，通过在JS中使用CSS，我们基本上是从CSS生态系统中退出，并遵从JavaScript来解决我们的问题。。与JS中的CSS相比，预处理工具的实际限制是什么？这将在本系列的下一部分中介绍。 7. 拥有实际的CSS文件意味着我们可以使用熟悉的工具处理它们，比如PostCSS 8. 9. 利纳里亚在后台使用自定义属性（又称CSS变量），在使用这个库之前，一定要考虑到他们的浏览器支持。结论是，JS中的CSS是连接CSS和JavaScript之间鸿沟的一体式样式解决方案。它们易于使用，并且包含有用的内置优化，但所有这些都是有代价的。最值得注意的是，通过在JS中使用CSS，我们基本上是从CSS生态系统中退出，并遵从JavaScript来解决我们的问题。。与JS中的CSS相比，预处理工具的实际限制是什么？这将在本系列的下一部分中介绍。

用可重用的JavaScript函数管理CSS中的状态

在CSS中，确定最有效的状态管理方法是一个具有挑战性的问题，但是谢天谢地，有许多基于OOCSS的方法提供了一些好的解决方案。文章系列：1. 使用可重用的JavaScript函数在CSS中管理状态（您在这里！）我最喜欢的是CSS（Scalable and modular architecture for CSS），它包含有状态类。引用smass自己的文档，有状态类是：状态是扩展和覆盖所有其他样式的东西。例如，手风琴部分可能处于折叠或展开状态。消息可能处于成功或错误状态。状态通常作为布局规则应用于同一元素，或作...

日期：2021-06-24 10:00:02 浏览：855

使用JavaScript获取CSS自定义属性值

下面是安迪Bell的一个巧妙的技巧，他使用CSS自定义属性来检查是否使用JavaScript支持特定的CSS功能。基本上，他使用的功能是CSS必须检查特定属性的浏览器支持，设置一个返回值0或1（布尔值！）然后通知JavaScript根据该值执行。下面是他的示例：.my-component {--supports-scroll-snap: 0;}@supports (scroll-snap-type: x mandatory) {.my-component {--supports-scroll-snap: 1...

日期：2021-06-24 10:03:07 浏览：575

弥合CSS和JavaScript之间的鸿沟：JS中的CSS

在本文中，我们将深入探讨JS中CSS的概念。如果你已经熟悉了这个概念，你可能仍然喜欢在这个方法的哲学中漫步，你可能对下一篇文章更感兴趣。Web开发是一个非常跨学科的领域。我们习惯于与多种语言密切合作。而且，随着开发web应用程序变得越来越普遍和细致入微，我们经常寻找创造性的方法来弥合这些语言之间的差距，使我们的开发环境和工作流程更简单、更高效。最常见的例子通常是在使用模板语言时。例如，可以使用一种语言来生成更详细的语言（通常是HTML）的代码。这是前端框架的一个关键方面——操作HTML是什么样子的？这个领域...

日期：2021-06-29 04:00:01 浏览：653

WordPress用Javascript获取和修改Gutenberg post内容

你好，几个星期以来，我一直在用插件修改帖子内容。上下文：翻译插件。获取标题、摘录和内容，通过API进行翻译，并使用生成的字符串更新标题、摘录和内容。翻译不涉及&lt；–wp xxxx–&gt；标记（它们在源代码和结果HTML代码中）标题很简单：wp.data.dispatch( \"core/editor\" ).editPost( { title: new_title} )摘录很简单：wp.data.dispatch( \"core/editor\" ).editPost( { excerpt: new_...

日期：2021-07-01 16:00:03 浏览：825

为什么我要用JavaScript编写CSS

我永远不会告诉你用CSS（或一些语法预处理器）来写CSS是个坏主意。我认为你完全可以在没有任何工具的情况下完成工作。但是，我也认为用JavaScript编写CSS是一个好主意，对于那些用JavaScript构建所有组件的代码库中的基于组件的样式，Max Stoiber在本文中关注的是用JavaScript编写CSS的原因，而不是如何用JavaScript编写CSS。有一个原因引起了我的强烈共鸣，那就是信心。这就是造型自信对我的意义。团队中的任何人都可以设计一个组件的样式，而不必担心意外的副作用。没有压力来设...

日期：2021-07-03 15:00:02 浏览：899

WordPress中的表情符号——注入css和javascript

坦率地说，在核心中包含emoji支持的决定是一个糟糕的决定。据我所知，wordpress从来没有自动向DOM中注入额外的css和js来支持一些看似琐碎的、坦率地说是可选的东西。这为今后的wordpress发布树立了一个坏的先例。怎样才能阻止wordpress向DOM注入我们不想加载的其他资产呢？是的，你可以禁用它们，但不应该反过来吗？你不应该启用它们吗？根据定义，这是特征膨胀(https://en.wikipedia.org/wiki/Softwareu bloat)而核心决策者应该谨慎行事，否则他们可能会...

日期：2021-07-05 08:00:03 浏览：869

通过JavaScript获取CSS旋转值

aditya的一条评论：有没有方法[通过JavaScript]获得元素旋转的角度？似乎是一个合理的要求。因此，我们有一些HTML:And it\"s rotated through CSS:#i-am-rotated {-webkit-transform: rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);}我们的目标是通过JavaScript从该元素获得数字\"...

日期：2021-07-08 07:00:04 浏览：677

WordPress自定义程序中Javascript单击/更改事件的行为不一致

我注意到4.4-b4中有一个奇怪的行为，它与在自定义程序中单击小部件按钮触发的更改事件有关。这是一个带有当前版本（4.3.1）中测试小部件的动画Gif，预期的行为是：https://dl.dropbox.com/s/mime1qqemk3a2c4/wp431.gif和另一个Gif，在版本4.4-b4中显示问题：https://dl.dropbox.com/s/xki1ye0op9mqsq8/wp44b4.gif点击最终会影响其他元素，而没有明显的原因。测试小部件中使用的JS代码非常简单，要点如下：https...

日期：2021-07-14 12:00:03 浏览：833

WordPressJavascript不工作

我是一个新手，正在将一个静态html网站转换成wordpress。除了javascript之外，大多数事情似乎都进展顺利。有猫头鹰旋转木马和放大滑块插件，是不工作的，并与下拉菜单项上的悬停相同。我正在使用它将javascript排列在函数页上。...

日期：2021-07-24 19:00:03 浏览：902

弥合CSS和JavaScript之间的鸿沟：CSS模块、PostCSS和CSS的未来

在这个由两部分组成的系列文章的前一篇文章中，我们探讨了JS环境中的CSS，我们不仅意识到JS中的CSS可以生成关键样式，而且有些库甚至没有运行时。我们看到通过添加巧妙的优化可以显著改善用户体验，这也是本系列关注开发者体验（创作风格的体验）的原因，我们将从我们现有的例子中重构Photo组件来探索\"纯ol\"CSS的工具。争议和热剧其中一个最著名的CSS辩论是语言是否按原样运行良好。我认为这场辩论之所以能够继续下去，是因为双方都有一些道理。例如，虽然CSS最初的设计初衷是设计文档的样式，而不是应用程序的组件，...

日期：2021-07-30 01:00:03 浏览：855