當包含許多類似的CSS屬性時，最佳做法是什麼？

-3

.options { 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    border: 3px solid black; 
    margin-left: 14%; 
    top: 0; 
} 

#opt1 { 
    margin-top: 5.4%; 
} 

#opt2 { 
    margin-top: 12.4%; 
} 

#opt3 { 
    margin-top: 19.4%; 
} 

#opt4 { 
    margin-top: 26.4%; 
} 

#opt5 { 
    margin-top: 33.4%; 
}

這是一個很大的代碼時，我真的只改變CSS的一個元素。在Javascript中這樣做會更好嗎？或者是CSS更好的運行它？我想堅持最佳實踐，但我不確定這是否是一種可接受的寫作方式，或者如果我應該改變某些內容。在此先感謝，我對此很新。

編輯：爲什麼downvotes？我說了一些非常愚蠢的話嗎？

編輯2：感謝您的解釋。

來源

2016-02-02 Allison Stafford

這並不完全清楚你的關注點在哪裏，而「如何做到最好......」無論如何都主要是基於意見的。 – deceze

樣式時，使用CSS是規則。 :)一些解釋在這裏很有用，答案可能取決於你試圖用代碼實現的內容。嘗試將HTML/CSS放在JSFiddle中：http://www.jsfiddle.net。當你給它一個標題，你可以在這裏分享鏈接，讓其他人看到 – pivemi

我想你得到了讚揚，因爲這個問題不能清楚地回答。最佳實踐取決於您的使用案例。 – Teetrinker

我不能完全肯定此代碼的問題是什麼，但假設#optX { margin-top .. }規則只適用於一個單一的元素不斷在頁面上，只是把它寫爲元素本身一次性內嵌樣式：

<div id="opt1" style="margin-top: 5.4%">

沒有理由把所有內容都放到一個外部CSS文件中，但它甚至不可重用。

來源

2016-02-02 15:30:02 deceze

內聯CSS？真？ Minify，Gzip等可以很好地壓縮OP中編寫的規則。但無論如何，這是一個基於意見的問題，並不在Stackoverflow的用法中。 –

*否*內聯CSS？真？它極大地簡化了代碼，並且如果有什麼對文件大小有正面影響的話（你可能會刪除一個id或class，並使外部CSS文件變小）。 - 在合適的地方使用內聯CSS是完全合理的。再一次，以任何一個方向教條都是沒有用的。 – deceze

根據你正在使用的應用程序，更容易維護一個CSS文件而不是各種網頁 –

沒有您的項目的上下文知識：你的方式沒問題。

我的情況下做的一樣，就是每個項目只使用一個線，使得代碼有點更具可讀性：

#opt1 { margin-top: 5.4%; } 
#opt2 { margin-top: 12.4%; } 
...

我看不出有任何理由要使用JavaScript造型您的項目。

內聯樣式是在另一個答案中提出的，如果有意義取決於您的項目：您是否需要其他事物（JS）的ID？你想在一個文件中使用所有的CSS代碼嗎？或者你的項目可以通過內聯CSS更易讀？

作爲結論：有幾行代碼沒有辦法，因爲每個元素都有另一個邊距值。不管該方法如何，你都必須以這種或那種形式編寫代碼。

來源

2016-02-02 16:03:31 Teetrinker

當包含許多類似的CSS屬性時，最佳做法是什麼？

回答

相關問題