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