html/css书写注意事项

css写作注意事项：

1.属性写在一行内，属性之间，属性名和值之间，以及属性和“{}”之间要尽量减少空格，去掉最后一个“；”，例如：p{width:100px;height:100px}

2.书写顺序按照由外到内，由整体到细节书写，大致分为5组：

位置：position，left，right，float

盒模型属性：display，margin，padding，width，height，

边框与背景：border，background

段落与文本：font，color，line-height，text...

其他属性：overflow,,,,,

3.带有前缀的属性，单独一行进行缩进，是属性值垂直对齐，便于维护编辑

4.谨慎添加新的选择器的规则，尤其不可滥用id，尽量继承和复用已有的样式

5.最好使用具有语义化的classname和id

6。上下模块之间的间距统一使用下一个模块的margin-top

css命名中英文对照：

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

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

  nav 导航    mainbav 主导航   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     简体中文