css规范


分类


通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类。

命名


使用类选择器,放弃ID选择器

- 若根据某组元素需定义类的额外属性. 给元素添加 `data-v-ID`属性, 并使用`.class[data-v-ID]`代替id选择器.

使用 `-` 分隔符

- 既是前缀分隔符, 又是扩展分隔符

使用前缀分类

- `字母-` 的前缀来分类css. 建议单个字母, 尽量短;

后代选择器

- 约定不以字母+"-"为前缀且长度需大于2
- 场景: .btn-box 按钮设置颜色 `.btn-box .act` 后代.act类不能有前缀, 即`.btn-box .btn-act`这样是错误的.
- 后代选择器不要在页面布局中使用,因为污染的可能性较大;
.前缀-模块 .属性的方式, 要注意属性是否单独设置了全局样式.

防止污染和被污染

- 采用统一前缀. 以类继承的方式. 例如`ui btn box`, 通过`ui` 全局前缀来隔离. `.ui.btn.box{}`

推荐语义

布局(.g-)
语义 命名 缩写
文档 doc doc
头部 head hd
主体 body bd
尾部 foot ft
主栏 main mn
主栏子容器 mainc mnc
侧栏 side sd
侧栏子容器 sidec sdc
盒容器 wrap/box wrap/box
模块(.m-)、元件(.u-)
导航 nav nav
子导航 subnav snav
面包屑 crumb crm
菜单 menu menu
选项卡 tab tab
标题区 head/title hd/tt
内容区 body/content bd/ct
列表 list lst
表格 table tb
表单 form fm
热点 hot hot
排行 top top
登录 login log
标志 logo logo
广告 advertise ad
搜索 search sch
幻灯 slide sld
提示 tips tips
帮助 help help
新闻 news news
下载 download dld
注册 regist reg
投票 vote vote
版权 copyright cprt
结果 result rst
标题 title tt
按钮 button btn
输入 input ipt
模块(.m-)、元件(.u-)
浮动清除 clearboth cb
向左浮动 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 show
隐藏 hide hide
打开 open open
关闭 close close
出错 error err
不可用 disabled dis

命名推荐

  current 当前    hover 悬停    selected 挑选   disabled 禁用   focus 得到焦点    blur 失去焦点   checked 勾选    success 成功    error 出错

  header(hd) 头部   content(cnt) 内容   title(tit) 标题   item 项目(条)    cell 单元   image/pic(img) 图片   text(txt) 文字    top 顶部    scrubber 时序菜单

  nav 导航    mainnav 主导航   subnav 子导航    topnav 顶部导航   breadcrumb 面包屑导航

  flink 友情链接    footer 尾    copyright 版权

  menu 菜单   submenu 子菜单   dropdown 下拉菜单

  searchBar 搜索条   search 搜索条    searchTxt 搜索框   searchBtn 搜索按钮    search_key 搜索词

  member 会员   ucenter 用户中心    loginBar 登陆条    login 登录    loginBtn 登录按钮   regsiter 注册按钮   btn-regsiter注册按钮    name 用户名    password 密码   nickname 昵称   mobilephone/mobile 手机    telephone/tel 电话   defaultavatar 默认头像

  hot 热点    news 新闻   banner/AD 广告    download 下载

  content 内容    title 标题    summary 摘要    time 时间

  share 分享    digg 顶    like 喜欢

  list 列表   pList 图片列表    tList 文字列表    tpList 图文列表

  table 表格    row 行   column 列    gutter 间隔   viewport 视口

  tab 标签    tags 标签   scroll 滚动 

  sidebar 侧边栏   column 栏目   section 区块    msg 提示信息    status 状态   vote 投票   tips 小技巧    guild 指南    note 注释

  icon- 图标    btn- 按钮

  goods 商品    goodsList 商品列表    goodsDetail 商品详情    goodsInfo 商品信息

  tuan 团购   tuanList 团购列表   tuanDetail  团购详情    tuanInfo 团购信息

  transition 动画   shadow 阴影   fade 淡入淡出   flip 翻页效    slide 滑动    slideup 上滑动   slidedown 下滑动   turn 翻页   horizontal 水平   vertical 垂直   collapsible 折叠    corners 拐角    flow 流    reverse 反向    pop 弹窗

  count 总数/计数   plus 加号/正   minus 减号/负    controlgroup 控制组
			

html命名推荐

 default/index.html    首页
  404.html              404错误页
  print.html            打印页
  header.html           页头
  footer.html           页脚
  sitemap.html          网站地图
  passport.html         通行证
  rank.html             排行榜
  roll.html             滚动新闻

  solution.html         解决方案
  joinus.html           加入我们
  partner.html          合作伙伴
  service.html          服务
  aboutus.html          关于我们
  contact.html          联系我们
  company.html          公司介绍
  organization.html     组织结构
  culture.html          企业文化
  strategy.html         发展策略
  honor.html            公司荣誉
  aptitudes.html        企业资质
  events.html           大事记
  business.html         商务合作
  contract.html         服务条款
  privacy.html          隐私声明
  CSR.html              企业社会责任

  news-开头.html         新闻相关
  article-开头.html      资讯相关
  picture-开头.html      图片相关
  photo-开头.html        相册相关
  product-开头.html      产品相关
  goods-开头.html        商品相关
  system-开头.html       系统相关
  tag-开头.html          tag相关
  brand-开头.html        品牌相关
  help-开头.html         帮助相关
  member-开头.html       会员相关
  search-开头.html       搜索相关
			

文件夹命名推荐

 admin     后台管理
  app       应用
  article   资讯
  common    公共
  config    配置
  data      数据
  digg      顶
  en-us     英文
  extend    延伸
  install   安装
  Lang      语言包
  Lib       库
  mall      商城
  picture   组图
  product   商品
  search    搜索
  section   区块
  shop      商店
  static    静态
  system    系统
  templates 模版
  tuan      团购
  ucenter   用户中心
  upload    上传
  video     视频
  vote      投票
  zh_tw     繁体中文
  zh-cn     简体中文