前端

已经很久没有关注CSS本身的发展了，看到一篇国外的文章介绍了CSS Nesting特性，感觉挺有意思的。 CSS Nesting模块定义了一种用于嵌套选择器的语法，提供了将一个样式规则嵌套在另一个样式规则内部的能力，子规则的选择器相对于父规则的选择器。 CSS Nesting与CSS预处理器（如Sass）不同，它是由浏览器解析的，而不是由CSS预处理器预先编译的。 CSS Nesting有助于提高CSS样式表的可读性、模块化和可维护性。它还可能有助于减小CSS文件的大小，从而减少用户下载的数据量。 我们都使用过Sass，Less这些CSS预处理工具，写CSS非常的舒服，用多了之后你可能已经忘记了原始的CSS如何写的，这些CSS预处理工具极大的提升了前端的开发效率和体验。 浏览器支持情况 使用Can I use网站查看哪些浏览器支持了CSS Nesting的特性 我们可以看到Firefox是支持得相对较好的，在多个版本都添加了CSS Nesting的支持，其次是Safari的技术预览版，其他浏览器也在跟进，像Chrome、Edge、Opera都已经部分支持CSS Nesting的功能。 CSS Nesting应用 Sep 20, 2023年9月20号，Safari Technology Preview 179发布了一个对CSS Nesting的更新，添加了对新的“宽松解析行为”的支持。这意味着你不再需要担心每个嵌套选择器是否以符号开头。它意味着现在像这样的嵌套CSS将正常工作： article { h1 { font-size: 1.8rem; } } 上面的代码等同于 article h1 { font-size: 1.8rem; } 而在之前的版本当中， h1 标签前面必须有一个符号出现才可以实现嵌套的特性 /* 更早的版本 */ article { & h1 { font-size: 1.8rem; } } 现在已经完全不需要前置的符号了，这里的符号指的是+ > ~ 等。 官方的草案给出了CSS Nesting的语法： main { div { ... } .bar { ... } #baz { ...} :has(p) { ... } ::backdrop { ... } [lang|="zh"] { ... } * { ... } + article { ... } > p { ... } ~ main { ... } } 一些例子 让我们来看一些例子，以更好的展示CSS Nesting的工作。 ...

在开始之前，我们做一些前提设置，这个极简框架的目标是让我们避免去写一些常规的html和JavaScript代码，比如： <p id="cool-para"></p> <script> const coolPara = 'Lorem ipsum.'; const el = document.getElementById('cool-para'); el.innerText = coolPara; </script> 这个极简框架是让我们可以写一些神奇的HTML和JavaScript，就像Vue一样： <script setup> const coolPara = 'Lorem ipsum.'; </script> <template> <p>{{ coolPara }}</p> </template> 或者像React一样： export default function Para() { const coolPara = 'Lorem ipsum'; return <p>{ coolPara }</p>; } 这样的一个框架的好处是显而易见的，写代码的时候问题要记住多章节的内置变量和方法是困难的，如document、innerText、getElementById，而且也不利于软件的扩展。 我们的极简框架有两个特点：响应式和组合式。 响应式 在Vue和React代码中，数据和UI元素的显示内容有一个绑定，只要我们修改了数据，html元素的innerText值就会自动进行更新。这被称作响应式（Reactivity） 组合式 可以定义一个组件并重复使用它，而无需每次使用到它的时候还要再次定义它，这被称为可组合性。普通的HTML + JavaScript并不具备这个特性。因此，下面的代码并没有达到预期效果（仅仅是做了定义而，这有点类似Web Components的做法）： <!-- Defining the component --> <component name="cool-para"> <p> <content /> </p> </component> <!-- Using the component --> <cool-para>Lorem ipsum.</cool-para> 响应式和组合式是现代前端框架的两个主要特性，例如Vue, React等待。 要利用这些抽象概念（例如框架和库），我们需要先学习很多特定的概念。当这些东西以某种神奇的方式运作时，我们还要处理它们可能产生的问题。更不用说，我们还要处理一大堆容易出错的依赖关系。 但事实上，使用现代 Web API 来实现这两件事并不困难。而且，在大多数情况下，我们可能并不需要大而全的框架及其纷繁复杂的特性… 响应式（Reactivity） 一个句话解释响应式就是：当数据更新时，自动更新 UI。 ...