8个有点优秀的CSS实践，要把事情简单化的感悟分享

Git小发明

已于 2024-04-10 00:52:24 修改

阅读量1k

点赞数 18

分类专栏： 2024年程序员学习文章标签： css 前端

于 2024-04-10 00:52:22 首次发布

本文链接：https://blog.csdn.net/m0_56169789/article/details/137574010

版权

2024年程序员学习专栏收录该内容

286 篇文章 0 订阅

订阅专栏

本文探讨了CSS中的最佳实践，如避免耦合的重复选择器、使用box-sizing属性管理盒模型、延迟下拉菜单的实现、视口单位的字号设置和占位符交互的设计。作者还分享了前端学习资源和面试题，以及鼓励加入技术交流社群以共同成长。

摘要由CSDN通过智能技术生成

我相信不少人会选择增加嵌套的方法：

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

或者选择增加一个标签选择器：

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

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

最佳方法

重复选择器自身

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

借助存在的属性选择器

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

这样即提高了优先级，又不会增加耦合度。

全局调整盒模型

box-sizing的默认值是content-box，这意味着指定的宽高都只会设置内容盒子的大小。如果设置了内边距或者边框都会使该元素宽高大于指定的宽高值。最笨的办法就是减少width或height的值，这不是一个理想的办法，因为这是通过改值试出来的，而且往往难以解释这个值生成的原因。

设置box-sizing值为border-box，这样height和width属性会设置为内容、内边距以及边框的大小总和，这就解决了上述问题。

.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关键字会强制继承。可以在必要时选中第三方组件的顶级容器，将其恢复为content-box。这样组件的内部元素就会继承该盒模型:

.third-component{
box-sizing: content-box;
}
复制代码

hover伪类与延时实现下拉列表

实现一个鼠标经过按钮来展示下拉菜单的交互效果：

菜单

苹果
葡萄
香蕉
橙子

复制代码

目标是鼠标经过按钮时，下拉菜单展示。css代码很简单：

.btn:hover + .panel, .panel:hover{
visibility: visible
}
.panel{
visibility: hidden;
width: 100px;
height: 200px;
background: #DDD;
}
.panel-item{
width: 100%;
height: 50px;
list-style: none;
line-height: 50px;
}
复制代码