• 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
    • 指南:guide
    • 服务:service
    • 注册:register
    • 状态:status
    • 投票:vote
    • 合作伙伴:partner

     

    注释的写法:

    /* Footer */

    内容区

    /* End Footer */

    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
    • 指南:guide
    • 服务: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
  • 相关阅读:
    hive 之only supports newline ' ' right now. Error encountered near token ''报错
    四、第三方图标库
    三、工具模块封装(二):封装mock模块
    三、工具模块封装(一):封装axios模块
    二、前端项目案例
    一、搭建前端开发环境(Vue+element)
    注册中心(Consul)
    系统服务监控(Spring Boot Admin)
    JWT
    Spring Security(四)
  • 原文地址:https://www.cnblogs.com/liulinjie/p/5776472.html
Copyright © 2020-2023  润新知