CSS 命名规范及标题供参考与学习

一、CSS 命名规范 
  XHTML-CSS写作建议 

  • 所有的xhtml代码小写

  • 属性的值一定要用双引号("")括起来,且一定要有值

  • 每个标签都要有开始和结束,且要有正确的层次

  • 元素要有结束的tag或于开始的tag后加上"/"

  • 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、

      border等 

  • <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引

      擎的查询。 

  • 给每一个表格和表单加上一个唯一的、结构标记id

  • 给重要的区块加上注释,如: <!--注释-->

  • 图片加上alt标签

  • 所有的标签必须进行合理的嵌套

  • 根元素前必须有元素,宣告使用那一种DTD


      namespace

CSS样式表规范: 

  • id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词

      首个字母大写,如:newRelease(最新产品/new+Release) 

  • CSS样式表各区块用注释说明

  • 尽量使用英文命名原则

  • 不用加中杠和下划线

  • 尽量不缩写,除非一看就明白的单词

CSS命名规范这段时间由于工作的需要对CSS的命名做了一些研究,主要是想让作出的

文档等规范,更能让人看懂和读懂。


DIV CSS名称 说明
网站公用相关
Container div #container 容器
Header or banner div #header 页头部分
Main or global navigation div #mainNav 主导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏
Main div #main 页面主体
Content div #content 内容部分
The main content area #contentMain 主要内容区域
Footer div #footer 页脚部分
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Sub-navigation list #subNav 二级导航
Search input #searchInput 搜索输入框
Search output #searchOutput 搜索输出和搜索结果相似
Search #search 搜索
Search results #searchResults 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #brandingLogo LOGO
Site information #siteinfo 网站信息
Copyright information etc. #siteinfoLegal 法律声明
Designer or other credits #siteinfoCredits 信誉
Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴
Services #service 服务
Regsiter #regsiter 注册
Status #status 状态
电子贸易相关
Products .products 产品
Products prices .productsPrices 产品价格
Products description .productsDescription 产品描述
Products review .productsReview 产品评论
Editor‘s review .editorReview 编辑评论
New release .newsRelease 最新产品
Publisher .publisher 生产商
Screen shot .screenshot 缩略图
FAQ .faqs 常见问题
Keyword .keyword 关键词
Blog .blog 博客
Forum .forum 论坛


二、CSS 命名标准


(一)常用的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

  (二)注释的写法:

  /* 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进制代码,如

  
1
2
3
4
5
  .red { color: red; }
 
.f60 { color: #f60; }
 
.ff8600 { color: #ff8600; }

 

  (2)字体大小,直接使用"font+字体大小"作为名称,如

  
1
2
3
   .font12px { font-size: 12px; }
 
.font9pt {font-size: 9pt; }

 

  (3)对齐样式,使用对齐目标的英文名称,如

  
1
2
3
   .left { float:left; }
 
.bottom { float:right; }

 

  (4)标题栏样式,使用"类别+功能"的方式命名,如

1
2
3
   .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

 

CSS 命名规范及标题供参考与学习

上一篇:如何进行Linux操作系统的安全合规性检查和加固?


下一篇:asp.net页面与页面之间参数传递