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

2021-07-30 01:00:03 javascript 阅读：855
在这个由两部分组成的系列文章的前一篇文章中，我们探讨了JS环境中的CSS，我们不仅意识到JS中的CSS可以生成关键样式，而且有些库甚至没有运行时。我们看到通过添加巧妙的优化可以显著改善用户体验，这也是本系列关注开发者体验（创作风格的体验）的原因，我们将从我们现有的例子中重构Photo组件来探索\"纯ol\"CSS的工具。 争议和热剧 其中一个最著名的CSS辩论是语言是否按原样运行良好。我认为这场辩论之所以能够继续下去，是因为双方都有一些道理。例如，虽然CSS最初的设计初衷是设计文档的样式，而不是应用程序的组件，但未来的CSS特性也确实会极大地改变这一点，很多CSS的错误都源于把设计当作一种事后诸葛亮的想法，而不是花时间去正确地学习它或者雇佣一个擅长它的人。 我不认为CSS工具本身就是争议的根源；我们可能至少在某种程度上总是会使用它们。但JS中的CSS等方法不同，它们用客户端JavaScript弥补了CSS的缺点。然而，JS中的CSS并不是这里唯一的方法；它只是最新的方法。还记得我们以前对预处理器（比如Sass）有过类似的争论吗？Sass有一些特性，比如mixin，它们不基于任何CSS建议（更不用说整个缩进语法）。然而，Sass诞生于一个完全不同的时代，已经到了一个将其纳入辩论中不再公平的地步，因为辩论本身已经发生了变化，所以我们开始批评JS中的CSS，因为它是一个更容易的目标。 我认为我们应该使用一些工具，让我们今天使用建议的语法。让我们用JavaScript承诺作为类比。Internet Explorer不支持此功能，因此许多人为它添加了polyfill。polyfills的意义在于，通过用补丁替换本机浏览器实现，我们可以假装到处都支持该功能。用工具传输新语法也是一样，比如Babel。我们今天可以使用它，因为代码将被编译成一种更老的、受良好支持的语法。这是一个很好的方法，因为它使我们能够在使用JavaScript的同时，利用JavaScript的未来功能，就像CSS这样的预处理工具，推动CSS向前发展。 CSS预处理程序，因此值得在JS对话中更详细地讨论它们，以及它们如何适应CSS。我们有CSS，Less和PostCSS（除其他外），它们可以为我们的CSS代码注入各种新特性。 对于我们的例子，我们只关心嵌套，这是预处理器最常见和最强大的特性之一。我建议使用postss，因为它可以让我们对正在添加的特性进行细粒度的控制，这正是我们在本例中所需要的。我们将要使用的PostCSS插件是PostCSS嵌套，因为它遵循本地CSS嵌套的实际建议。 使用我们的编译工具webpack的PostCSS的最佳方法是在配置中的CSS加载程序之后添加PostCSS加载程序。在css loader之后添加loader时，重要的是在css loader选项中说明它们，将importLoaders设置为后续的loader的数量，在本例中是1： {test: /.css$/,use: [\"style-loader\",{loader: \"css-loader\",options: {importLoaders: 1,},},\"postcss-loader\",],} 这可以确保从其他CSS文件导入的CSS文件也将使用postcss加载程序进行处理。 在设置postcss加载程序之后，我们将安装postcss嵌套并将其包含在postcss配置中： yarn add postcss-nesting 有许多配置postcss的方法。在本例中，我们将在项目的根目录下添加一个postcss.config.js文件： Now, we can write a CSS file for our Photo组件。让我们称之为Photo.css： .photo {width: 200px;&.rounded {border-radius: 1rem;}}@media (min-width: 30rem) {.photo {width: 400px;}} 让我们也添加一个名为utils.css的文件，其中包含一个用于可视化隐藏元素的类，正如我们在本系列的第一部分所述： .visuallyHidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;} 因为我们的组件依赖于此实用程序，让我们通过在顶部添加一个@import语句来包含utils.css到Photo.css： @import url(\"utils.css\"); 这将确保webpack需要utils.css，感谢css loader。我们可以把utils.css放在任何我们想要的地方并调整@import路径。在这个特殊的例子中，它是Photo.css的一个兄弟。接下来，让我们将Photo.css导入到我们的JavaScript文件中，并使用类来设计我们的组件： import React from \"react\"import { getSrc, getSrcSet } from \"./utils\"import \"./Photo.css\"const => = {rounded: false,}export default Photo 虽然这样做可行，但我们的类名太简单了，它们肯定会与其他与.photo类完全无关的类名发生冲突。解决这个问题的方法之一是使用命名方法，l

用可重用的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 浏览：574

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

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

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

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 浏览：824

为什么我要用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 浏览：868

通过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 浏览：676

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 浏览：901

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

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

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