眾所周知，CSS 僅支持多行注釋?zhuān)簿褪?**/注釋。

/* 這是CSS注釋 */
div{
  color: red;
}

習(xí)慣了 SCSS或者LESS這些預(yù)處理器的同學(xué)，肯定非常希望有雙斜杠注釋。

// SCSS注釋
div{
  color: red; // SCSS注釋
}

很明顯這種寫(xiě)法要比/**/簡(jiǎn)潔地多，那么，為啥官方遲遲不支持雙斜杠注釋呢？

下面就來(lái)探討一下這個(gè)問(wèn)題以及關(guān)于 CSS 語(yǔ)法的一些思考。

一、語(yǔ)法沖突

CSS 中大部分屬性和值都比較簡(jiǎn)單，乍一看，好像沒(méi)有什么語(yǔ)法有雙斜杠//，其實(shí)不然，只是非常少，但并不是沒(méi)有。

舉個(gè)例子，下面是border-image的一些寫(xiě)法

border-image - CSS: Cascading Style Sheets | MDN (mozilla.org)[1]。

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

看到第 4 種語(yǔ)法沒(méi)，出現(xiàn)了兩個(gè)斜杠，關(guān)鍵是，兩斜杠中間的width還可以省略，這一點(diǎn)從border-image的語(yǔ)法規(guī)范可以看出。

border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>

看到<'border-image-width'>后面的問(wèn)號(hào)沒(méi)？這個(gè)就表示可選的意思，所以理論上border-image可以有以下的寫(xiě)法。

border-image: 0//0;

這種寫(xiě)法其實(shí)等同于。

border-image-source: none;
border-image-slice: 0;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;

我們可以打開(kāi)控制臺(tái)來(lái)驗(yàn)證一下這個(gè)語(yǔ)法的合法性。

可以看到，這種寫(xiě)法完全是有效的（暫不考慮實(shí)際功能）。

所以，雙斜杠語(yǔ)法可能會(huì)造成語(yǔ)法沖突。

還有一個(gè)和border-image比較像的屬性，叫做-webkit-mask-box-image，也可以實(shí)現(xiàn)雙斜杠語(yǔ)法。

-webkit-mask-box-image - CSS: Cascading Style Sheets | MDN (mozilla.org)[2]。

-webkit-mask-box-image: 0//0;

目前我能想到的就這兩個(gè)，有知道其他的歡迎留言補(bǔ)充????。

不過(guò)這種畢竟是小部分，如果有新規(guī)范，也很容易規(guī)避這個(gè)問(wèn)題。更要命的其實(shí)是下面這個(gè)原因，如果要是支持了，可能會(huì)讓以前的CSS規(guī)范全部崩塌！

二、無(wú)法兼容現(xiàn)版本

為啥說(shuō)這個(gè)問(wèn)題更大呢？我們可以換個(gè)角度來(lái)思考，如果現(xiàn)在CSS支持了雙斜杠語(yǔ)法會(huì)怎么樣？

舉個(gè)例子：

<div>CSS COMMENT</div>

下面加了一行注釋

div{
  font-size: 30px; // 字號(hào)
  background-color: yellow;
  color: blue;
}

如果瀏覽器支持這個(gè)特性，那非常符合直覺(jué)，那如果瀏覽器不支持（現(xiàn)階段），你覺(jué)得最終的樣式是？

A. 30px字號(hào)，黃色背景，藍(lán)色文字
B. 30px字號(hào)，藍(lán)色文字
C. 黃色背景，藍(lán)色文字
D. 藍(lán)色文字
E. 全部不生效，默認(rèn)樣式

思考兩分鐘...

答案是 B，你猜對(duì)了嗎？

為啥會(huì)這樣呢？這要“歸功”于 CSS 強(qiáng)大且精準(zhǔn)的“容錯(cuò)”解析規(guī)則：

CSS 解析中并不存在換行規(guī)則，每個(gè)屬性和對(duì)應(yīng)值通過(guò)分號(hào);區(qū)分，在選擇器內(nèi)部，如果碰到非法語(yǔ)句，則會(huì)依次尋找到下一個(gè);為止，也可以通過(guò){}進(jìn)行分塊區(qū)分。

上面這一段是我自己總結(jié)的一套規(guī)則，可能還是有些不好理解，拿上面那個(gè)例子來(lái)說(shuō)，你可以把兩行連起來(lái)看，實(shí)際上等同于。

div{
  font-size: 30px; 
  // 字號(hào) background-color: yellow;
  color: blue;
}

也就是// 字號(hào) background-color當(dāng)成了一個(gè)新的屬性，但是這個(gè)屬性無(wú)效，所以最終的表現(xiàn)就是30px字號(hào)，藍(lán)色文字。

這樣就帶來(lái)了一個(gè)非常嚴(yán)重的問(wèn)題，在不支持注釋的瀏覽器上產(chǎn)生了不符合預(yù)期的解析錯(cuò)誤，也就是說(shuō)，一般的不兼容語(yǔ)法只是不起作用，但是這種注釋卻影響到了其他樣式，這才是最要不得的。

三、注釋的其他寫(xiě)法

再來(lái)看一些常見(jiàn)的注釋寫(xiě)法，看看有什么副作用。

<div>CSS COMMENT</div>

首先是最常見(jiàn)的注釋。

div{
  // font-size: 30px; 
  background-color: yellow;
  color: blue;
}

這種寫(xiě)法其實(shí)是符合預(yù)期的，在目前階段也是可以正常解析，因?yàn)?/會(huì)向后找到第一個(gè);，也就是整行// font-size: 30px;無(wú)效。

然后是這種注釋。

div{
  // 標(biāo)題
  font-size: 30px; 
  background-color: yellow;
  color: blue;
}

根據(jù)前面的分析，其實(shí)可以等同于。

div{
  // 標(biāo)題 font-size: 30px; 
  background-color: yellow;
  color: blue;
}

所以第一行就無(wú)效了，結(jié)果和前面一致。

如果需要不影響現(xiàn)有樣式，可以在后面加上;，直接終止解析，如下：

div{
  // 標(biāo)題;
  font-size: 30px; 
  background-color: yellow;
  color: blue;
}

然后是選擇器外面的寫(xiě)法。

<div>CSS COMMENT</div>
<p>CSS COMMENT</p>

// 標(biāo)題 
div{
  font-size: 30px; 
  background-color: yellow;
  color: blue;
}
p{
  color: red
}

這種會(huì)如何解析呢？

其實(shí)你可以將這個(gè)注釋想象成一個(gè)選擇器，也就是和下面的div連起來(lái)了。

// 標(biāo)題 div{
  font-size: 30px; 
  background-color: yellow;
  color: blue;
}
p{
  color: red
}

由于并不存在// 標(biāo)題 div這樣的選擇器，并且也不是一個(gè)合法的選擇器（斜杠需要轉(zhuǎn)義），所以整個(gè)DIV樣式完全無(wú)效，但并不影響后面選擇器（p）的樣式。

如果需要不影響現(xiàn)有樣式，需要在后面加上{}，告訴瀏覽器這是一個(gè)區(qū)塊，如下：

// 標(biāo)題{}
div{
  font-size: 30px; 
  background-color: yellow;
  color: blue;
}
p{
  color: red
}

四、CSS 語(yǔ)法其實(shí)從未改變

CSS 發(fā)展這么多年，各種屬性和新特性層出不窮，其實(shí)最核心的語(yǔ)法規(guī)則從未改變過(guò)，這也是設(shè)計(jì)之初就決定好的。

像之前出現(xiàn)的CSS變量。

:root{
  --c: red;
}

本質(zhì)上其實(shí)就是一個(gè)特殊的屬性，即便舊瀏覽器不支持也不會(huì)有其他影響，就相當(dāng)于不存在一樣。

這也是為啥 CSS 為何不能像 SASS 那樣直接將語(yǔ)法放在最外層，就像這樣。

--c: red;
div{
  color: var(--c)
}

如果按照 CSS 的解析規(guī)則，必然導(dǎo)致連同下面的 div樣式整體失效。

還有一些@符號(hào)的新語(yǔ)法，例如@property。

@property --speed{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

其實(shí)從結(jié)構(gòu)上來(lái)講，和@font-face并沒(méi)有什么區(qū)別。

@font-face {
  font-family: "Trickster";
  src: xxx;
}

或者說(shuō)也滿(mǎn)足下面這種更通用格式。

選擇器 {
  屬性1: 值；
  屬性2: 值；
}

所以即使不支持，也不會(huì)影響其他 CSS 語(yǔ)句。再想想看，有什么新特性會(huì)讓其他樣式“掛掉”？

五、最后總結(jié)一下

這下大概能明白為啥不支持雙斜杠語(yǔ)法了吧，以上就是關(guān)于CSS語(yǔ)法的一些思考了，相信大家對(duì) CSS 的語(yǔ)法又有了一個(gè)新的認(rèn)識(shí)，下面總結(jié)一下

1. 有部分屬性值會(huì)出現(xiàn)雙斜杠語(yǔ)法，比如border-image、-webkit-mask-box-image。
2. 不支持雙斜杠注釋最主要的原因是無(wú)法兼容現(xiàn)版本，會(huì)對(duì)現(xiàn)有 CSS 帶來(lái)副作用。
3. 為了兼容現(xiàn)有版本，CSS 新特性不能影響其他 CSS 語(yǔ)句，語(yǔ)法規(guī)則也從未改變過(guò)。

可以肯定地說(shuō)，CSS 以后也不會(huì)有雙斜杠注釋的規(guī)則。另外，本文的很多觀點(diǎn)和結(jié)論都是歸納總結(jié)而來(lái)，并沒(méi)有追究官方資料，可能有少許不準(zhǔn)確或者有誤的地方。