前端代码指南(二)
前端代码指南(一)
[前端代码指南(二)](javascript:void(0)😉
前端代码指南(三)
CSS
分号
分号是CSS语句的分离器,请把它放在句尾。
/* 糟糕的 */
div {
color: red
}
/* 推荐的 */
div {
color: red;
}
盒模型
最理想的情况是盒模型在整个文档是一样的。全局设置* { box-sizing:border-box;}是可以的,但最好不要在特定的元素上改变默认的盒模型。
/* 糟糕的 */
div {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
/* 推荐的 */
div {
padding: 10px;
}
文档流
不要改变一个元素的默认样式,尽可能保持元素在自然的文档流中。例如,删除图像下面的空白不应该改变其默认显示:
/* 糟糕的 */
img {
display: block;
}
/* 推荐的 */
img {
vertical-align: middle;
}
同样的,尽可能不要使元素脱离文档流
/* 糟糕的 */
div {
width: 100px;
position: absolute;
right: 0;
}
/* 推荐的 */
div {
width: 100px;
margin-left: auto;
}
定位
css有很多方法来定位元素,但是最好不要使用下面的属性/值
display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;
选择器
减少选择器与DOM的耦合度。当你的选择器匹配的元素超过3层结构(伪类、后代或兄弟元素)。考虑添加一个类来匹配你想要的元素吧
/* 糟糕的 */
div:first-of-type :last-child > p ~ *
/* 推荐的 */
div:first-of-type .info
避免过载你的选择器
/* 糟糕的 */
img[src$=svg], ul > li:first-child {
opacity: 0;
}
/* 推荐的 */
[src$=svg], ul > :first-child {
opacity: 0;
}
特性
不要让属性值和选择器难以被覆盖(应该是指优先级不要过高),减少使用id和!important的使用
/* 糟糕的 */
.bar {
color: green !important;
}
.foo {
color: red;
}
/* 推荐的 */
.foo.bar {
color: green;
}
.foo {
color: red;
}
覆盖
覆盖样式会导致选择器和调试变得困难,请尽量避免
/* 糟糕的 */
li {
visibility: hidden;
}
li:first-child {
visibility: visible;
}
/* 推荐的 */
li + li {
visibility: hidden;
}
继承
不要重复书写可以继承的样式。
/* 糟糕的 */
div h1, div p {
text-shadow: 0 1px 0 #fff;
}
/* 推荐的 */
div {
text-shadow: 0 1px 0 #fff;
}
简洁
保持你的代码简洁,尽量使用简写属性,避免使用多个属性。
/* 糟糕的 */
div {
transition: all 1s;
top: 50%;
margin-top: -10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
/* 推荐的 */
div {
transition: 1s;
top: calc(50% - 10px);
padding: 5px 10px 20px;
}
语言
英文优于数学表达式
/* 糟糕的 */
:nth-child(2n + 1) {
transform: rotate(360deg);
}
/* 推荐的 */
:nth-child(odd) {
transform: rotate(1turn);
}
前缀
积极删除过时的前缀。
/* 糟糕的 */
div {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
}
/* 推荐的 */
div {
-webkit-transform: scale(2);
transform: scale(2);
transition: 1s;
}
动画
animations
和transitions
,优先选择transitions
。除了 opacity
和 transform
属性,其他属性避免使用animations
。
/* 糟糕的 */
div:hover {
animation: move 1s forwards;
}
@keyframes move {
100% {
margin-left: 100px;
}
}
/* 推荐的 */
div:hover {
transition: 1s;
transform: translateX(100px);
}
单位
不要对不需要使用单位的值使用单位;如果你要使用相对单位最好使用rem
;使用秒而不是毫秒
/* 糟糕的 */
div {
margin: 0px;
font-size: .9em;
line-height: 22px;
transition: 500ms;
}
/* 推荐的 */
div {
margin: 0;
font-size: .9rem;
line-height: 1.5;
transition: .5s;
}
颜色
如果你需要使用透明度,请使用rgba
/* 糟糕的 */
div {
color: hsl(103, 54%, 43%);
}
/* 推荐的 */
div {
color: #5a3;
}
绘制
如果资源文件可以轻易在css中绘制出来,就避免HTTP请求来加载
/* 糟糕的 */
div::before {
content: url(white-circle.svg);
}
/* 推荐的 */
div::before {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
}
Hacks
尽量不要使用Hacks
/* 糟糕的 */
div {
// position: relative;
transform: translateZ(0);
}
/* 推荐的 */
div {
/* position: relative; */
will-change: transform;
}
如果觉得本文不错的话,帮忙点击下面的推荐哦
>>>>点击阅读原文
如果觉得本文不错的话,帮忙点击下面的推荐哦,文章未经说明,均为原创,转载请注明出处,谢谢!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 本地部署 DeepSeek:小白也能轻松搞定!
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)