css命名规则 网站设计及基本框架结构

一.网站设计及基本框架结构: 

 

1.    Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2.    Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3.    Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4.    Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5.   Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6.   Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7.    Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“。

 

二.需要注意的几点:

1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。

2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover   点击：click   已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

 

 三、常用命名汇总:

 

页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap

 

其他参考的命名规则
页头：header 
登录条：loginbar 
标志：logo 
侧栏：sidebar 
广告：banner 
导航：nav 
子导航：subnav 
菜单：menu 
子菜单：submenu 
搜索：search 
滚动：scroll 
页面主体：main 
内容：content 
标签页：tab 
文章列表：list 
提示信息：msg 
小技巧：tips 
栏目标题：title 
加入：joinus 
指南：guild 
服务：service 
热点：hot 
新闻：news 
下载：download 
注册：regsiter 
状态：status 
按钮：btn 
投票：vote 
合作伙伴：partner 
友情链接：friendlink 
页脚：footer 
版权：copyright

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

另外在编辑样式表时可用的注释可这样写：
<-- Footer --> 
内容区 
<-- End Footer -->

样式文件命名
主要的 master.css 
布局，版面 layout.css 
专栏 columns.css 
文字 font.css 
打印样式 print.css 
主题 themes.css

实例：
为同一开发，特设定CSS命名关键字如下：

容 器：container/box
头 部：header
主 导 航：mainNav
子 导 航：subNav
顶 导 航：topNav
网站标志：logo
大 广 告：banner
页面中部：mainBody
底 部：footer
菜 单：menu
菜单内容：menuContent
子 菜 单：subMenu
子菜单内容：subMenuContent
搜 索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标　 题：title
内 容：content
列 表：list
当前位置：currentPath
侧 边 栏：sidebar
图 标：icon
注 释：note
登 录：login
注 册：register
列 定 义：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)