請幫助改進我的CSS代碼

-1

我寫了一些css代碼，但被告知我需要改進/優化它們，有什麼想法嗎？謝謝！請幫助改進我的CSS代碼

 .box-popup { 
      opacity: 0; 
      position: absolute; 
      color: ‘#ccc’; 
      z-index: 1000; 
      top: -72px; 
      left: 165px; 
      width: 250px; 
      height: 200px; 
      background-color: ‘#ccc’; 
      padding: 30px 50px 40px 50px; 
      border-radius: 3px; 
      transition: opacity 400ms ease-in-out; 
      -moz-transition: opacity 400ms ease-in-out; 
      -webkit-transition: opacity 400ms ease-in-out; 
     }

來源

2016-02-29 Wang Pei The Dancer

'color'財產不應該有引號的顏色值。它應該是'color：＃ccc'。另外，您可以通過刪除空格來縮小CSS，或直接轉到[css-minifier]（https://cssminifier.com/）。 – sahil

如何「優化」你的CSS將在一定程度上取決於你的標記。該標記將確定任何可能已過時的CSS屬性。分享你的HTML。 – Chris

'#ccc'和#ccc有什麼區別？ –

這裏是審查代碼：（檢查意見）

.box-popup { 
     opacity: 0; 
     position: absolute; 
     color: #ccc; /* removed quotes */ 
     z-index: 1; /* try not to use higher z-index values unnecessarily */ 
     top: -72px; 
     left: 165px; 
     width: 250px; 
     height: 200px; 
     background-color: #ccc; /* removed quotes or use currentColor if the color is same as of color property */ 
     padding: 30px 50px 40px 50px; 
     border-radius: 3px; 
     transition: opacity .4s ease-in-out; /* used 'seconds' unit just to make it shorter */ 
     -moz-transition: opacity .4s ease-in-out; 
     -webkit-transition: opacity .4s ease-in-out; 
    }

來源

2016-02-29 08:03:59

謝謝格林先生！ –

哦，我試圖去掉這個位置：絕對的，它看起來不一樣，所以這裏的絕對控制是什麼？ –

@WangPeiTheDancer請閱讀[本]（https://developer.mozilla.org/en/docs/Web/CSS/position），你會更好地理解它。 –

除了已經說過的之外，我建議通過不使用像素而是使用％或em來使代碼響應/流體。雖然這不是必需的，但它會使頁面在必要時針對不同的屏幕尺寸進行優化。

來源

2016-02-29 07:50:52

請幫助改進我的CSS代碼

回答

相關問題