html类,id命名规范

李鴻耀 2015-09-02

网页中使用规范的css和id命名原则,有利于提高团队效率,减少后期维护成本,良好的结构对SEO(搜索引擎优化)也有作用,是对代码的优化是一个很关键的步骤。

一、网页外层重要部分css样式命名:

外套wrap------------------用于最外层

头部header----------------用于头部

主要内容main------------用于主体内容(中部)

左侧main-left-------------左侧布局

右侧main-right-----------右侧布局

导航条nav-----------------网页菜单导航条

内容content---------------用于网页中部主体

底部footer-----------------用于底部

二、css/ID命名参考表

CSS样式命名说明

#wrapper页面外围控制整体布局宽度

#container或#content容器,用于最外层

#layout布局

#head,#header页头部分

#foot,#footer页脚部分

#nav主导航

#subnav二级导航

#menu菜单

#submenu子菜单

#sideBar侧栏

#sidebar_a,#sidebar_b左边栏或右边栏

#main页面主体

#tag标签

#msg#message提示信息

#tips小技巧

#vote投票

#friendlink友情连接

#title标题

#summary摘要

#loginbar登录条

#searchInput搜索输入框

#hot热门热点

#search搜索

#search_output搜索输出和搜索结果相似

#searchBar搜索条

#search_results搜索结果

#copyright版权信息

#branding商标

#logo网站LOGO标志

#siteinfo网站信息

#siteinfoLegal法律声明

#siteinfoCredits信誉

#joinus加入我们

#partner合作伙伴

#service服务

#regsiter注册

arr/arrow箭头

#guild指南

#sitemap网站地图

#list列表

#homepage首页

#subpage二级页面子页面

#tool,#toolbar工具条

#drop下拉

#dorpmenu下拉菜单

#status状态

#scroll滚动

.tab标签页

.left.right.center居左、中、右

.news新闻

.download下载

.banner广告条(顶部广告条)

电子贸易相关

.products产品

.products_prices产品价格

.products_description产品描述

.products_review产品评论

.editor_review编辑评论

.news_release最新产品

.publisher生产商

.screenshot缩略图

.faqs常见问题

.keyword关键词

.blog博客

.forum论坛

三、文件命名参考表

CSS文件命名说明

master.css,style.css主要的

module.css模块

base.css基本共用

layout.css布局,版面

themes.css主题

columns.css专栏

font.css文字、字体

forms.css表单

mend.css补丁

print.css打印

相关推荐

opspider / 0评论 2012-09-25