為啥CSS不會支持雙斜杠( // )注釋？
眾所周知，CSS 僅支持多行注釋，也就是/**/注釋。
/* 這是CSS注釋 */
div{
color: red;
}習慣了 SCSS或者LESS這些預處理器的同學，肯定非常希望有雙斜杠注釋。
// SCSS注釋
div{
color: red; // SCSS注釋
}很明顯這種寫法要比/**/簡潔地多，那么，為啥官方遲遲不支持雙斜杠注釋呢？
下面就來探討一下這個問題以及關于 CSS 語法的一些思考。
一、語法沖突
CSS 中大部分屬性和值都比較簡單，乍一看，好像沒有什么語法有雙斜杠//，其實不然，只是非常少，但并不是沒有。
舉個例子，下面是border-image的一些寫法
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 種語法沒，出現了兩個斜杠，關鍵是，兩斜杠中間的width還可以省略，這一點從border-image的語法規范可以看出。
border-image =
<'border-image-source'> ||
<'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
<'border-image-repeat'>看到<'border-image-width'>后面的問號沒？這個就表示可選的意思，所以理論上border-image可以有以下的寫法。
border-image: 0//0;這種寫法其實等同于。
border-image-source: none;
border-image-slice: 0;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;我們可以打開控制臺來驗證一下這個語法的合法性。
可以看到，這種寫法完全是有效的（暫不考慮實際功能）。
所以，雙斜杠語法可能會造成語法沖突。
還有一個和border-image比較像的屬性，叫做-webkit-mask-box-image，也可以實現雙斜杠語法。
-webkit-mask-box-image - CSS: Cascading Style Sheets | MDN (mozilla.org)[2]。
-webkit-mask-box-image: 0//0;目前我能想到的就這兩個，有知道其他的歡迎留言補充????。
不過這種畢竟是小部分，如果有新規范，也很容易規避這個問題。更要命的其實是下面這個原因，如果要是支持了，可能會讓以前的CSS規范全部崩塌！
二、無法兼容現版本
為啥說這個問題更大呢？我們可以換個角度來思考，如果現在CSS支持了雙斜杠語法會怎么樣？
舉個例子：
<div>CSS COMMENT</div>下面加了一行注釋
div{
font-size: 30px; // 字號
background-color: yellow;
color: blue;
}如果瀏覽器支持這個特性，那非常符合直覺，那如果瀏覽器不支持（現階段），你覺得最終的樣式是？
A. 30px字號，黃色背景，藍色文字
B. 30px字號，藍色文字
C. 黃色背景，藍色文字
D. 藍色文字
E. 全部不生效，默認樣式思考兩分鐘...
答案是 B，你猜對了嗎？
為啥會這樣呢？這要“歸功”于 CSS 強大且精準的“容錯”解析規則：
CSS 解析中并不存在換行規則，每個屬性和對應值通過分號;區分，在選擇器內部，如果碰到非法語句，則會依次尋找到下一個;為止，也可以通過{}進行分塊區分。
上面這一段是我自己總結的一套規則，可能還是有些不好理解，拿上面那個例子來說，你可以把兩行連起來看，實際上等同于。
div{
font-size: 30px;
// 字號 background-color: yellow;
color: blue;
}也就是// 字號 background-color當成了一個新的屬性，但是這個屬性無效，所以最終的表現就是30px字號，藍色文字。
這樣就帶來了一個非常嚴重的問題，在不支持注釋的瀏覽器上產生了不符合預期的解析錯誤，也就是說，一般的不兼容語法只是不起作用，但是這種注釋卻影響到了其他樣式，這才是最要不得的。
三、注釋的其他寫法
再來看一些常見的注釋寫法，看看有什么副作用。
<div>CSS COMMENT</div>首先是最常見的注釋。
div{
// font-size: 30px;
background-color: yellow;
color: blue;
}這種寫法其實是符合預期的，在目前階段也是可以正常解析，因為//會向后找到第一個;，也就是整行// font-size: 30px;無效。
然后是這種注釋。
div{
// 標題
font-size: 30px;
background-color: yellow;
color: blue;
}根據前面的分析，其實可以等同于。
div{
// 標題 font-size: 30px;
background-color: yellow;
color: blue;
}所以第一行就無效了，結果和前面一致。
如果需要不影響現有樣式，可以在后面加上;，直接終止解析，如下：
div{
// 標題;
font-size: 30px;
background-color: yellow;
color: blue;
}然后是選擇器外面的寫法。
<div>CSS COMMENT</div>
<p>CSS COMMENT</p>// 標題
div{
font-size: 30px;
background-color: yellow;
color: blue;
}
p{
color: red
}這種會如何解析呢？
其實你可以將這個注釋想象成一個選擇器，也就是和下面的div連起來了。
// 標題 div{
font-size: 30px;
background-color: yellow;
color: blue;
}
p{
color: red
}由于并不存在// 標題 div這樣的選擇器，并且也不是一個合法的選擇器（斜杠需要轉義），所以整個DIV樣式完全無效，但并不影響后面選擇器（p）的樣式。
如果需要不影響現有樣式，需要在后面加上{}，告訴瀏覽器這是一個區塊，如下：
// 標題{}
div{
font-size: 30px;
background-color: yellow;
color: blue;
}
p{
color: red
}四、CSS 語法其實從未改變
CSS 發展這么多年，各種屬性和新特性層出不窮，其實最核心的語法規則從未改變過，這也是設計之初就決定好的。
像之前出現的CSS變量。
:root{
--c: red;
}本質上其實就是一個特殊的屬性，即便舊瀏覽器不支持也不會有其他影響，就相當于不存在一樣。
這也是為啥 CSS 為何不能像 SASS 那樣直接將語法放在最外層，就像這樣。
--c: red;
div{
color: var(--c)
}如果按照 CSS 的解析規則，必然導致連同下面的 div樣式整體失效。
還有一些@符號的新語法，例如@property。
@property --speed{
syntax: '<number>';
inherits: false;
initial-value: 0;
}其實從結構上來講，和@font-face并沒有什么區別。
@font-face {
font-family: "Trickster";
src: xxx;
}或者說也滿足下面這種更通用格式。
選擇器 {
屬性1: 值；
屬性2: 值；
}所以即使不支持，也不會影響其他 CSS 語句。再想想看，有什么新特性會讓其他樣式“掛掉”？
五、最后總結一下
這下大概能明白為啥不支持雙斜杠語法了吧，以上就是關于CSS語法的一些思考了，相信大家對 CSS 的語法又有了一個新的認識，下面總結一下
- 有部分屬性值會出現雙斜杠語法，比如border-image、-webkit-mask-box-image。
- 不支持雙斜杠注釋最主要的原因是無法兼容現版本，會對現有 CSS 帶來副作用。
- 為了兼容現有版本，CSS 新特性不能影響其他 CSS 語句，語法規則也從未改變過。
可以肯定地說，CSS 以后也不會有雙斜杠注釋的規則。另外，本文的很多觀點和結論都是歸納總結而來，并沒有追究官方資料，可能有少許不準確或者有誤的地方。
