CSS样式过度约束

过度约束

什么是CSS 样式过度约束呢？

一、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