• 关于团队合作的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

    注释的写法:

    /*内容 begin */

    内容区

    /*内容 end */

    id的命名:

    (1)页面结构

    • 容器: container
    • 页头:header
    • 内容:content/container
    • 页面主体:main
    • 页尾:footer
    • 导航:nav
    • 侧栏:sidebar
    • 栏目:column
    • 页面外围控制整体布局宽度:wrapper
    • 左右中:left right center

    (2)导航

    • 导航:nav
    • 主导航:mainnav
    • 子导航: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
  • 相关阅读:
    final关键字
    海思NB-IOT的SDK看门狗的使用
    IAR环境下编译CC2640入门开发
    股票操作记录180613(2)
    股票操作笔记18年6月13(1)
    PyYAML学习第一篇
    片仔癀犯过的错误
    2018年5月份片仔癀最佳演员奖
    2018-05-22两只垃圾基金南方产业活力000955和鹏华全球高收益债券000290
    linux c编程:网络编程
  • 原文地址:https://www.cnblogs.com/chaoming/p/2989182.html
Copyright © 2020-2023  润新知