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