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