专注前端,专注网页设计制作 - (网页制作/模板制作/设计) QQ:755150799 织梦模板 | 网页特效 | 网站模板 | 建站教程 | TOP排行榜 | Tag标签 | 联系我们
当前位置: 网站首页 > 建站教程 > Div+Css教程 > >

常用的CSS命名规则

时间:2014-03-05来源:学技巧网站制作 作者:学技巧 阅读: 次 【 点评一下


web标准化设计:常用的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进制代码,如
  .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
CSS常用命名收录备用 CSS命名规则
CSS常用命名收录备用,CSS命名规则与技巧探讨
默认分类   2008-12-10 14:53    阅读25    评论0
字号: 大大 中中 小小
1、布局常用CSS命名:
名称 描述 名称 描述
warp/warpper 外套(整体布局) content 容器
main 页面主体 content/container 内容块
site 站点 layout 布局
column 栏 sidebar 侧栏
nav 导航 center 中
left 左 right 右
1.1、结构化命名小技巧:
结构化命名方法一般根据文档结构的描述来命名,如:
id = "mainmenu"
id = "sub_menu"
id = "main-content"
上面的代码中,这3种名称都是根据文档结构进行描述命名的,分别表示主菜单、次菜单和主要内容块,当我们看到这样的样式时就能清楚的知道样式所对应的元素,即使版块和元素的位置或排列顺序改变了却仍然不会影响样式与元素之间的对应关系,从而达到符合XHTML结构化的要求。
2、模块常用CSS命名:
名称 描述 名称 描述
header 页头 footer 页脚
logo 标志 banner 广告
login 登录 loginbar 登录条
regsiter 注册 search 搜索
subnav 子导航 tab 标签页/标签
menu 菜单 submenu 子菜单
scroll 滚动 hot 热点
vote 投票 list 文章列表
news 新闻 download 下载
guild 指南 service 服务
joinus 加入 partner 合作伙伴
friendlink 友情链接: copyright 版权
shop 购物车(功能区) source 资源
map 网站地图 homepage 首页
3、导航常用CSS命名:
名称 描述 名称 描述
nav
导航外套 mainbav 主导航
subnav 子导航 sidebar 边导航
topnav 顶导航 sidebaricon 边导航图标
leftsidebar 左导航 rightsidebar 右导航
menucontainer 菜单容器 dropmunu 下拉菜单
menu 菜单 submenu 子菜单
4、类常用CSS命名:  
名称 描述 名称 描述
title 标题 summary 摘要
status 状态 spce 特别
label 标签 current 当前
msg 提示信息 tips 小技巧
submit 提交按钮 btn 按钮
icon 图标 note 注释
red 红色 textbox 文本框
drop 下拉 form 表单
breadcrumb 导航提示 crumb 导航
count 统计 cor/corner 转角/圆角
scroll 滚动  
4.1、CLASS 命名小技巧(语义化命名):
(1)颜色:使用颜色的名称或者16进制代码,如:
.blue { color: blue; }
.f80 { color: #f80; }
.f3f3f3 { color: #f3f3f3; }
(2)字体大小,直接使用"font+字体大小"作为名称,如:
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如:
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如:
.barnews { }
.barproduct { }
5、文件常用命名:
名称 描述 名称 描述
master.css 主要文件 base.css 基本共用
layout.css 布局,版面 module.css 模块
themes.css 主题 columns.css 专栏
font.css 文字 mend.css 补丁
forms.css 表单 print.css 打印
6、注释的写法:
/* Header */
相关代码信息
/* End Header */
/* Warp */
相关代码信息
/* End Warp */
/* Footer */
相关代码信息
/* End Footer */  
7、CSS命名规则:
1.区分大小写:建议全部使用小写字母,单词首字母例外;
2.命名合法:一般要求以字母开头,后面可跟数字、下划线、连字符、和特殊字符,但建议尽量使用英文字母,而适当使用下划线和连接线;
3.尽量不要缩写,除非是约定俗成的缩写单词,要保证看得明白,否则尽量别使用;
4.CSS命名要词必达意,名称要反映用途和相关信息,同时也要简短,不要符加任何冗余信息。


分享到:
  • 用微信  “扫一扫”

    将文章分享到朋友圈。

    关注公众号:xue-jiqiao

本文版权归原作者所有,转载请注明原文来源出处,学技巧网站制作感谢您的支持!