CSS样式过度约束
2021-04-12 16:28
标签：body ado div 过多 red 决定 变化 避免 pre 什么是CSS 样式过度约束呢？ 代码不够精简，添加过多不必要的约束 例如： 相对定位元素（position: relative; ）的垂直位置由 top 和 bottom 决定，一般来说使用其中一个属性即可。 HTML CSS 过渡约束的代码： 好的简洁的代码 在正常开发中 HTML 和 CSS代码分开的。使用后代选择器CSS代码就会严重依附于HTML代码，当HTML代码结构结构发生变化时，CSS代码也得修改。这就会造成很麻烦的情况。 例如：这就是很麻烦的代码 使用简写属性可以使代码更加简洁，轻量 1、不简洁糟糕的代码 2、简洁的代码 1、多余重复的代码 2、简洁的代码 代码的易读性和易维护性有着直接关系。 1、不易读的代码 2、易读的代码 易读的代码 参考博客： https://www.xp.cn/b.php/78217.html CSS样式过度约束 标签：body ado div 过多 red 决定 变化 避免 pre 原文地址：https://www.cnblogs.com/nyw1983/p/12294325.html过度约束
一、CSS代码不够精简
div> 我是相对定位元素 div>
div{
position:relative;
bottom:100px;
top:-200px;
width: 200px;
height: 200px;
background-color:lightcoral;
} div{
position:relative;
top:-200px;
width: 200px;
height: 200px;
background-color:lightcoral;
}
二、使用后代选择器或是元素选择器
body div ul li { ... }
三、尽可能使用简写属性
.box{
border-top: 100px solid blue;
border-left:100px solid blue;
border-right:100px solid blue;
border-bottom:100px solid blue;
width:100px;
height:100px;
}
.box{
border:10px solid blue;
width:100px;
height:100px;
}
三、避免不必要重复
.box1{
color:red;
font-size:15px;
}
.box2{
color:red;
font-size:15px;
}
.box1,.box2{
color:red;
font-size:15px;
}
四、好的代码格式
.pre-round,.next-round,.middle-round { ... }
.pre-round,
.next-round,
.middle-round {
...
}
.round {
background-image:
linear-gradient(#000, #ccc),
linear-gradient(#ccc, #ddd);
box-shadow:
2px 2px 2px #000,
1px 4px 1px 1px #ddd inset;
}
上一篇：HTML5实现div拖拽