您的位置:首页 > 运维架构 > 网站架构

css 网站内部优化之样式表(CSS)定义和命名规范

2013-11-22 10:46 513 查看
css 网站内部优化之样式表(CSS)定义和命名规范

SEO流程中对代码的优化是一个很关键的初级步骤,有必要对目前流行的CSS+DIV的命名规则规范化。

需要注意的是,在css文件里进行样式命名的时候,应尽量避免使用英文”_”作为分隔符,用英文”-”代替。

原因:搜索引擎(谷歌和百度)对英文”_”(下划线)的处理几乎相同,谷歌把它处理成空格符,类似程序中的NULL。而英文”-”(减号)则起着划分词语和短句的作用。例如关键词:madeinchina和made-in-china,谷歌认为第一个madeinchina是一个完整的词,而第二个made-in-china是由三个词组成。

命名的原则:按照意义最贴切的英文单词起名,并定义缩写的写法,如title缩写为tlt,同时在设计css样式表的时候,需要建立一个说明文档,把每次修改中加入的新的命名方式或缩写方式存入说明文档中,以保证其他程序人员对源码的理解,方便后期协同工作。

按照网站的内容和布局进行CSS命名定义。

页头 header
登录条 loginBar或lgnBar
标志 logo
侧栏 sideBar
广告 banner或ad
导航 nav
子导航 subNav
菜单 menu
子菜单 subMenu
搜索 search
滚动 scroll或scl
焦点 focus
文章 article或art
栏目 column
页码 pageList或pList
页面主体 main
内容 content或cont
标签页 tab
文章列表 list
提示信息 msg
小技巧 tips
栏目标题 title或tlt
加入 joinus
指南 guild或gld
服务 service
热点 recommend或hot
新闻 news
下载 download或dwn
注册 regsiter或reg
状态 status
按钮 btn
投票 vote
合作伙伴 partner
友情链接 friendLink或fLk
网站地图 sitemap
电子书 ebook
页脚 footer
版权 copyRight


CSS中对ID的命名(注意和上面的定义分开,对ID的定义原则上也可以采用和上面重复的定义法)

外 套 wrap
主导航 mainNav
子导航 subnav
页 脚 footer
整个页面 content
页 眉 header
页 脚 footer
商 标 label
标 题 title
主导航 mainNav或globalNav
顶导航 topnav
边导航 sidebar
左导航 leftsideBar或l-sideBar
右导航 rightsideBar或r-sideBar
旗 志 logo
标 语 banner
菜单内容1 menu1Content
菜单容量 menuContainer
子菜单 submenu
边导航图标 sidebarIcon
注释 note
面包屑 breadCrumb
容器 container
内容 content
搜索 search
登陆 login
功能区 shop
当前的 current

在编辑样式表时可用的注释(也可用在程序代码的说明中)
“
内容
”

样式文件命名
主要的 master.css
布局或版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: