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