如何擺脫重複的語句行

Question

我有css文件，但它很醜，因爲它複製了幾行語句。我想知道有一種方法可以在一個地方收集所有重複的陳述，而其他人會使用它。

我的CSS

#cont-link{ 
    width:11%; 
    float:right; 
    right:240px; 
} 

#cont-twi{ 
    width:11%; 
    float:right; 
    right:180px; 
} 

#cont-goo{ 
    width:11%; 
    float:right; 
    right:120px; 
} 

#cont-fac{ 
    width:11%; 
    float:right; 
    right:60px; 
} 

#cont-dat{ 
    width:11%; 
    float:right; 
    right:0px; 
} 

正如你所看到的，每個ID的前兩行具有相同的語句。我怎樣才能擺脫重複？

Answer 1

您可以將它們全部組合到一個選擇器中，並使用right的每個特定選擇器。

#cont-link, #cont-twi, #cont-goo, #cont-fac, #cont-dat{ 
    width:11%; 
    float:right; 
} 
#cont-link {right: 240px;} /* etc */ 

Answer 2

您可以將公共屬性提取到單獨的塊中。

#cont-link, #cont-twi, #cont-goo{ 
    width:11%; 
    float:right; 
} 

#cont-link{ 
    right:240px; 
} 

#cont-twi{ 
    right:180px; 
} 

#cont-goo{ 
    right:120px; 
} 

或者，您可以使用CSS擴展語言，如SASS或LESS。

Answer 3

您可以在所有元素中包含通用參數，然後爲每個id指定不同的參數。

#cont-link, #cont-twi, #cont-goo, #cont-fac, #cont-dat{ 
    width:11%; 
    float:right; 
} 

#cont-link{ 
    right:240px; 
} 

#cont-twi{ 
    right:180px; 
} 

#cont-goo{ 
    right:120px; 
} 

#cont-fac{ 
    right:60px; 
} 

#cont-dat{ 
    right:0px; 
} 

或者你可以使用一些一個CSS擴展語言的例如SASS或Less

Answer 4

您可以創建像什麼Scimonster說，也可以創建一個更加新的類，並將其應用，無論你使用的是像下面。在這個概念中，你必須同時應用班級和身份證。

.commonstyle 
{ 
    width:11%; 
    float:right; 
} 
#cont-link{ 
    right:240px; 
} 

#cont-twi{ 
    right:180px; 
} 

#cont-goo{ 
    right:120px; 
} 

#cont-fac{ 
    right:60px; 
} 

#cont-dat{ 
    right:0px; 
}