深入解析CSS中的自定义属性

下面的演示使用的是上面的代码自动构建的一个基本的网站布局，gutter的值跟随窗口的变化而变化，浏览器的支持自定义属性的话，效果屌屌的！

语境样式
语境样式（样式元素根据它出现在Dom）在CSS里是一个有争议的话题。 一方面，它是最受人尊敬的CSS开发者警告，另一方面，大多数人每天都还要用它。
下面例子显示了大部分人在CSS使用语境样式方法，使用子代选择器

CSS Code复制内容到剪贴板

/* Regular button styles. */  

.Button { }   

/* Button styles that are different when inside the header. */  

.Header .Button { }  

这种方法有很多问题，这种模式一个代码味道，它违反了 open/closed 软件开发原则；修改了一个封闭组件的实现细节

软件体 (类, 模块, 函数等) 扩展开放, 对修改关闭。
自定义属性的改变范围式定义组件是一个有趣的方式，用自定义属性，我们可以在第一次就写一个实际上是开放扩展的组件，这里有一个例子：

CSS Code复制内容到剪贴板

 .Button {   

  background: var(--Button-backgroundColor, #eee);   

  border: 1px solid var(--Button-borderColor, #333);   

  color: var(--Button-color, #333);   

  /* ... */  

}   

.Header {   

  --Button-backgroundColor: purple;   

  --Button-borderColor: transparent;   

  --Button-color: white;   

}  

这和子选择器之间的区别很微妙而且很重要。

当使用子选择器我们宣传在页眉按钮会这样，这样不同的按钮如何定义自己，这样的声明是独裁（借Harry’s 的词），很难撤销例外的情况，页眉的一个按钮不需要这样的方式。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!