HTML ID和CLASS命名最佳實踐

您好，感謝您花時間閱讀我的問題。我的問題與html最佳實踐有關。HTML ID和CLASS命名最佳實踐

我有一個HTML框架，看起來像這樣..

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Template</title> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <header> 
     </header> 
     <main> 
     </main> 
     <footer> 
     </footer> 
    </body> 
</html>

，我要開始添加HTML元素，我將在稍後選擇這些元素通過ID和CLASS CSS和JavaScript內。我的「最佳實踐」相關問題是...

ID和CLASS有相同的命名約定嗎？
建議的ID和CLASS屬性的最小和最大長度是多少？
爲什麼像facebook這樣的網站有ID和CLASS隨機數字和字母的屬性？
我應該使用camelcase嗎？
我應該使用下劃線還是數字？
我應該縮短詞的縮寫，如「細節」命名時變成「Det」嗎？
我應該給任何身體的孩子ID和CLASS屬性的元素？
我是否需要爲HEAD元素中的元素指定ID或CLASS屬性？

來源

2017-06-25 Kyle

有用的https://stackoverflow.com/questions/6028211/what-is-the-standard-naming-convention-for-html-css-ids-and-classes –

@PriyeshKumar，感謝您的鏈接。這回答了我的一些問題。 – Kyle

一些答案都是個人喜好：

待辦事項ID和CLASS具有相同的命名約定？

命名約定取決於您。

推薦的ID和CLASS屬性的最小和最大長度是多少？

據我所知，沒有這樣的建議。

爲什麼像facebook這樣的網站名稱ID和CLASS隨機數字和字母的屬性？

爲了避免意外重複和追蹤目的。

我應該使用camelCase嗎？

這是一個不錯的選擇。

我應該使用下劃線還是數字？

這些是更好的選擇。

我自己的系統（我不知道還有誰在使用）如下：

HTML - <div class="my-string"> [連字符]
CSS - .my-string [連字符]
使用Javascript - var myString = ''; [駝峯]
PHP - $My_String = ''; [下劃線]

通過對變量和類使用不同的語法，我避免混合不同類型的數據。

我應該縮短與像「細節」簡寫字變成「挪威」命名的時候？

你可以但我個人不會。但這取決於你。

我應該給任何身體的孩子ID和CLASS屬性的元素？

不知道我理解這個問題。

我是否需要爲HEAD元素中的元素指定ID或CLASS屬性？

不需要這個。

來源

2017-06-26 14:35:15 Rounin