最佳实践

注释的写法

/* Footer */
内容区
/* End Footer */

CSS书写

• 布局定位属性

  • display

  • position

  • float

  • clear

  • visibility

  • overflow

• 盒子模型+背景

  • width
  • height
  • margin
  • padding
  • border
  • background

• 文本内容属性

  • color
  • font
  • text-decoration
  • text-align
  • vertical-align
  • line-height

• 点缀属性

  • content
  • cursor
  • border-radius
  • box-shadow
  • text-shadow
  • background:linear-gradient

注意： 开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个。

命名规范

• class 命名规则

  • 头：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

• id 的命名

  • 页面结构

    • 容器: container

    • 页头：header

    • 内容：content/container

    • 页面主体：main

    • 页尾：footer

    • 导航：nav

    • 侧栏：sidebar

    • 栏目：column

    • 页面外围控制整体布局宽度：wrapper

    • 左右中：left right center

  • 导航

    • 导航：nav
    • 主导航：mainbav
    • 子导航：subnav
    • 顶导航：topnav
    • 边导航：sidebar
    • 左导航：leftsidebar
    • 右导航：rightsidebar
    • 菜单：menu
    • 子菜单：submenu
    • 标题: title
    • 摘要: summary

  • 功能

    • 标志：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