使用DIV+CSS结构的页面,文件大小要远远小于Table结构,在其他条件(网速、主机性能)相同的情况下,前者的载入时间和解析时间要快很多。这减小了搜索引擎网络蜘蛛抓取所需要的时间,很大程度上避免了由于页面布局抓取超时情况的出现。它可以很方便的绕过CSS,直接去抓取DIV中的内容,也就是说DIV+CSS架构对于搜索引擎更加友好。
另外,在对DIV进行命名时,取一些约定俗成的名字,通过这个名字来告诉搜索引擎这个DIV里面的内容。
下面是我们常用的一套命名规范:
CSS命名规范
一、文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
主 要 的:master.css;
布局排版:layout.css;
专栏样式:columns.css;
文字样式:font.css;
主题样式:themes.css;
二、常用类/ID命名规范
外 套: wrap
页 脚: footer
页 眉: header
主导航: mainNav
子导航: subnav
整个页面: content
商 标: label
标 题: title
主导航: mainNav(globalNav)
顶导航: topnav
边导航: sidebar
左导航: leftsideBar
右导航: rightsideBar
标 志: logo
标 语: banner
菜单内容1: menu1Content
菜单容量: menuContainer
菜 单: menu
子菜单: submenu
注释: note
容器: container
内容: content
搜索: search
登陆: login
功能区: shop(如购物车,收银台)
当前的: current
边导航图标:sidebarIcon
页 眉: header
内 容: content
容 器: container
页 脚: footer
标 题: title
标 志: logo
标签页: tab
侧 栏: sideBar
广 告: banner
导 航: nav
子导航: subNav
菜 单: menu
子菜单: subMenu
登录条: loginBar
搜 索: search
滚 动: scroll
小技巧: tips
加 入: joinus
指 南: guild
服 务: service
热 点: hot
新 闻: news
下 载: download
注 册: regsiter
状 态: status
按 钮: btn
投 票: vote
版 权: copyRight
文章列表: list
页面主体: main
提示信息: msg/manage
合作伙伴: partner
友情链接: friendLink
……
常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn