• web前端命名规范


    下面是常见的命名参考规范:

    主体

      头部: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

      标签页:tab

      文章列表:list

      提示信息:msg

      小技巧:tips

      栏目标题:title

      加入:join

      指南:guild

      服务:service

      注册:regsiter

      状态:status

      投票:vote

      合作伙伴:partner

     

    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.尽量不缩写,除非一看就明白的单词,如:wrapper可以写成wrap。

      5.css文件命名规范:

        主要的 master.css;

        模块 module.css;

        基本共用 base.css;

        布局,版面layout.css;

        主题 themes.css;

        专栏 columns.css;

        文字 font.css;

        表单 forms.css;

        补丁 mend.css;

        打印print.css

    -THE END-

  • 相关阅读:
    xcode command line 安装
    Android 报错:error: too many padding sections on bottom border
    一文深入浅出理解国产开源木兰许可系列协议
    SpringBoot接口 如何生成接口文档之非侵入方式(通过注释生成)SmartDoc?
    SpringBoot接口 如何优雅的对接口返回内容统一封装?
    SpringBoot数据库管理 用flyway对数据库管理和迁移
    SpringBoot接口 如何优雅的写Controller并统一异常处理?
    SpringBoot开发 什么是热部署和热加载?devtool的原理是什么?
    SpringBoot接口 如何优雅的对参数进行校验?
    SpringBoot接口 如何生成接口文档之Swagger技术栈?
  • 原文地址:https://www.cnblogs.com/menggirl23/p/12012351.html
Copyright © 2020-2023  润新知