共计 3648 个字符，预计需要花费 10 分钟才能阅读完成。
欢送关注我的公众号：前端侦探
家喻户晓，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)
/* 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)
-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 当前也不会有双斜杠正文的规定。另外，本文的很多观点和论断都是演绎总结而来，并没有查究官网材料，可能有少许不精确或者有误的中央，欢送评论区赐教。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探