css - 命名规范

css文件分类

1、公共型：标签重置、默认设置、通用样式

2、特殊型：特殊布局、特殊模块、特殊皮肤

css文件引用顺序

1、公共

2、主体

3、皮肤及其他模块

常用文件名

master.css or index.css or main.css  主要的

module.css  模块

base.css or global.css  基本公用

layout.css  布局

themes.css  主题

skin.css  换肤

column.css  栏目

font.css  文本、字体

forms.css  表单

mend.css  补丁

print.css  打印

css内部引用顺序

1、样式重置和主体样式

2、统一的背景和字体、功能型样式clearfix

3、布局(grid) (.g-)：头部、主体、主栏、侧栏、尾部等

4、模块(module) (.m-)：导航、登录、注册、列表、评论、搜索

5、元件(unit) (.u-)：按钮、输入框、图标

6、功能(function) (.f-)：特殊用途css，如隐藏元素

7、皮肤(skin) (.s-)：文字颜色、背景、边框

8、状态(.z-)：只能组合使用或作为后代元素

css命名规范

1、所有命名全部小写且用英文命名

2、颜色值和字符集大写

2、分类命名，如：.g-

3、使用缩写，如：nav、btn

4、使用class命名，确定不复用的样式用id命名

5、使用语义的命名，不使用单个字母命名

6、使用-或者_连接命名，如：header-banner、header_banner

常用命名

布局(.g-)

文档  document  doc

头部  head  hd

主体  body  bd

尾部  foot  ft

主栏  main  mn

主栏容器  maincontains  mnc

侧栏  side  sd

侧栏容器  sidecontains  sdc

盒容器  wrap  wp

模块(.m-)、元件(.u-)

导航  navigator  nav

子导航  subnavigator  snav

面包屑  crumb  crm

菜单  menu

选项卡  tab

标题区  head/title  hd/tt

内容区  body/content  bd/ct

列表  list

表格  table  tb

表单  form  fm

热点  hot

排行  top

登录  login

标志  logo

广告  banner

搜索  search

幻灯  slide

提示  tips

帮助  help

新闻  news

下载  download

注册  register

投票  vote

版权  copyright

结果  result

标题  title

按钮  button  btn

输入  input  ipt

功能(.f-)

浮动清除  clearfix  cf

向左浮动  floatleft  fl

向右浮动  floatright  fr

内联块级  inlineblock  ib

文本居中  textaligncenter  tac

文本居右  textalignright  tar

文本居左  textalignleft  tal

垂直居中  verticalalignmiddle  vam

溢出隐藏  overflowhidden  oh

完全消失  displaynone  dn

字体大小  fontsize  fs

字体粗细  fontweight  fw

皮肤(.s-)

字体颜色  fontcolor  fc

背景  background  bg

背景颜色  backgroundcolor  bgc

背景图片  backgroundimage  bgi

背景定位  backgroundposition  bgp

边框颜色  bordercolor  bdc

状态(.z-)

选中  selected  sel

当前  current  crt

显示  show

隐藏  hide

打开  open

关闭  close

出错  error  err

不可用  disabled  dis