还记得我们为什么使用SCSS/LESS等CSS预处理器吗?我想很大一部分人是因为变量和嵌套语法。变量让我们可以很方便的去管理整个系统(网站)中的主题;嵌套语法则可以让我们更好的去组织和编写CSS代码,且让我们的样式文件有了最初始的命名空间或者说是作用域的概念(我们可以把某个模块的代码都放在一个唯一的container当中,这个container就是一个作用域)。至于如条件语句/函数这些特性,如果你不是去开发如Bootstrap/Element-ui 等这些库的样式,在常规的项目编程中通常用到的很少。

2016年12月8日,《CSS揭秘》的作者 Lea Verou 调研了使用 CSS 预处理器的首要原因(单选题),有 1838 个人参与了投票,最终并列第一的两个理由是嵌套和变量。她觉得是时候该重新考虑 CSS 原生嵌套的问题了。

2017年CSS变量(也称为自定义属性)的规范被W3C批准,目前几乎所有的现代浏览器都支持CSS变量。而事实上目前几乎所有主流的库都在使用CSS变量来管理主题。本站也在很早之前就使用了CSS变量。

本站使用的CSS变量
本站使用的CSS变量

2023年,W3C为我们带来了CSS嵌套的规范。且截止目前,这一规范已经被诸多浏览器所引入和支持。就我个人而言,我觉得该规范引入的还是晚了点😂。

css-nesting caniuse 2023年8月支持情况
css-nesting caniuse 2023年8月支持情况

CSS嵌套是什么

CSS嵌套模块定义了嵌套选择器的语法,提供了将一个样式规则嵌套在另一个样式规则中的能力,以提高样式表的模块化和可维护性。

在嵌套之前,子选择器都要重复的声明父选择器,层级越深,声明越多。导致的结果就是样式重复,分散且代码里大(浏览器也要多加载一些字节)。

.button {
  color: var(--theme-default);
}

.button.is-theme-primary {
  color: var(--theme-primary);
}

.button.is-theme-success {
  color: var(--theme-success);
}

.button.is-theme-error {
  color: var(--theme-error);
}

而有了嵌套,选择器可以继续并且可以将与其相关的样式规则分组到其中。

.button {
  color: var(--theme-default);
  &.is-theme-primary {
    color: var(--theme-primary);
  }
  &.is-theme-success {
    color: var(--theme-success);
  }
  &.is-theme-error {
    color: var(--theme-error);
  }
}

嵌套可以帮助我们更好的组织样式结构,减少重复选择器和最终文件的体积大小,同时还可以共同定位相关元素的样式规则。

如何使用

上面章节初步演示了CSS嵌套的使用方法,和SCSS等预处理大差不差。
嵌套规则可以使用嵌套选择器(&)来直接引用父规则的匹配元素,或者使用相对选择器语法指定“后代”以外的关系。

直接嵌套子选择器

.foo {
  color: red;
  .bar {
    color: blue;
  }
}

/* 相当于 */
.foo {
  color: red;
}
.foo .bar {
  color: blue;
}

直接引用父规则

.foo {
  color: red;
  &:hover {
    color: blue;
  }
}

/* 相当于 */
.foo {
  color: red;
}
.foo:hover {
  color: blue;
}
&和选择器之间无空格

本质上是用于覆盖原选择器的部分样式,比如给按钮添加不同的主题样式

/* --&和选择器之间无空格-- */
.foo {
  color: red;
  &.bar {
    color: blue;
  }
}

/* 相当于 */
.foo {
  color: red;
}
.foo.bar {
  color: blue;
}
/* html 这样使用 
<span class="foo">foo</span>
<span class="foo bar">foo bar</span>
*/
<style>
 :root {
  --theme-default: #222;
  --theme-primary: blue;
  --theme-success: green;
  --theme-error: red;
}
.button {
  color: var(--theme-default);
  &.is-theme-primary {
    color: var(--theme-primary);
  }
  &.is-theme-success {
    color: var(--theme-success);
  }
  &.is-theme-error {
    color: var(--theme-error);
  }
}
</style>

<button class="button">default</button>
<button class="button is-theme-primary">primary</button>
<button class="button is-theme-success">success</button>
<button class="button is-theme-error">error</button>
&和选择器之间有空格
/* --&和选择器之间有空格-- */
.foo {
  color: red;
  & .bar {
    color: blue;
  }
}

/* 相当于 */
.foo {
  color: red;
}
.foo .bar {
  color: blue;
}

⚠️这种规则无效

与SCSS/LESS等预处理器的异同

css嵌套模块和SCSS/LESS等预处理器的嵌套语法是相同的,也是不同的。

相同点

不同点

参考文档

-- EOF --

本文标题:浏览器环境下的文件读写

本文链接:https://smohan.net/blog/c1p2u9

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议,转载或使用请署名并注明出处。 相关说明 »

更多文章

评论 「 ... 」