作为前端开发人,经常头疼于雷鸣,标签,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