css中標籤，類名，id名的命名 語義化命名

做爲前端開發人，常常頭疼於雷鳴，標籤，id名的命名，不知道應該基於什麼原則。

原則：

2 當命名的時候，問本身，這個元素是要來作什麼？(根據使用目的).ad-banner

4 避免依靠位置和視覺效果命名。如.red-link #left-column

3 使用更加直觀的命名。

雖然#header 有點用location來命名，可是這基本都遵照，比用#branding更加直觀

若是我問 bob 這個類，id是作什麼的，他是否會自動知道

 

 

好處：

當你一個right-cloumn想移到左側時，就會引發混亂，若是用.sidebar 只需修改 .sidebar{ float:left }

 

常見命名

#header

#nav 

#main-content, #secondary-content

#footer

 

 

分析Bootstrap：

爲了製做不一樣的結構,涉及到結構化，如.btn-large .btn-small .span4 

.dropdown-menu .btn-primary是語義化命名。

這其中又涉及到模塊化，模塊化勢必會更加抽象，可能語義化就不必定好。

 

網友分析：

類名的半抽象化，對整個項目的模塊化是頗有必要的。標籤纔是語義化，類名是半抽象化。

 

更多資源：

一個各大網站命名統計 http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html