CSS实践：增加CSS选择器优先级，全局调整盒子模型

增加CSS选择器优先级

在正常开发中，会有很多机会满足需要增加CSS选择器的场景。如何更好地实现，比如需要改进下面的CSS选择器优先级：

.bar { background: #DDD; }
复制代码

我想很多人会选择添加下一个方法：

.foo .bar { background: #DDD; }
复制代码

或者选择添加标签选择处理程序：

div.bar{ background: #DDD; }
复制代码

这不是最好的方法，因为以上方法会增加耦合性，降低可维护性。如果以后更改了父节点类的名称，或者更换了不同的标签，样式效果就会受到影响。

最好的方法

• 重复选择器本身

.bar.bar { background: #DDD; }
复制代码

• 使用现有的属性选择器

.bar[class] { background: #DDD; }
#bar[id] { background: #DDD; }
复制代码

这会在不增加链接的情况下提高优先级。

全局调整框模型

box-sizing的默认值为contentbox，也就是说指定内容框的宽度和高度只会表示内容框的大小。如果指定了 padding 或 border，则元素的宽度和高度将大于指定的宽度和高度。最愚蠢的方法是减少宽度或高度的值。这不是一个理想的方法，因为它是通过改变值来测试的，而且往往很难解释生成这个值的原因。 。

将box-sizing值设置为border-box，这样th属性将被设置为content 、填充和尺寸总和的边界，解决了上述问题。

.main{
    box-sizing: border-box
}
复制代码

这样，main 元素就可以按预期工作得更好，但其他元素也会发生同样的情况。然后将其设置为全局

*, 
::before,
::after{
    box-sizing: box;
}
复制代码

，这样您就可以为页面上的所有元素和伪元素设置border-box。

但是这仍然存在一些问题。现在很多公司使用带有样式的第三方组件，这会破坏其中一些布局，尤其是第三方组件在开发时css没有考虑到用户会改变盒子模型。

使用继承可以解决以上问题：

:root{
    box-sizing: border-box;
}

*, 
::before,
::after{
    box-sizing: inherit;
}
复制代码

盒模型通常不会继承，但使用inherit关键字会强制继承。如果需要，可以将第三方组件的顶级容器重置为 contentbox。这样组件内部元素就会继承盒模型：

.third-component{
    box-sizing: content-box;
}

作者：zhangwinwin