THERE IS NO END TO LEARNING

DIV+CSS命名规则规范

虽然DIV+CSS的命名并没有太严格的规则规范,只要是以英文字母组合都是可以识别的,但我们在网站制作完成后难免会需要修改,或者其它的同事或朋友需要对网站进行SEO等工作,所以在网站制作的时候最好还是有简单明了的单词、词组作为名称,以便于自己及别人的工作。

常用的CSS命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

———————————————–
1.样式命名
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footet
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current

2.另外在编辑样式表时可用的注释可这样写:
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
———————————————————-
(二)注释的写法:
/* Footer */
内容区
/* End Footer */

(三)id的命名:

(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar

菜单:menu
子菜单:submenu
标题: title
摘要: summary

(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop

标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll

标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note

指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

++++++++++++++++
reset.css —处理重置
type.css —处理排版
grid.css —处理布局
widgets.css —处理小零件(widgets),如tab菜单、下拉菜单、以及“更多”按钮
base.css —包含所有的其他样式表文件,以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架.

作者:小落
原文地址:http://laixueping.com/seo-wzjs/338.html

点赞
  1. doureme说道:

    这些都是要求的。

  2. 东东说道:

    团队合作的时候这是很重要的哦。

  3. 雷依依说道:

    太详细了!博主的css分类很细致

  4. 古美人说道:

    呵呵 我做沙发舒服舒服呵呵

发表评论

电子邮件地址不会被公开。 必填项已用*标注