美文网首页
前端命名规范与代码规范(一)

前端命名规范与代码规范(一)

作者: 65_刘璐 | 来源:发表于2018-07-10 13:45 被阅读105次

HTML与CSS命名规范

1.所有命名都使用英文小写

2.命名用引号包裹

3.用中横线连接

4.命名体现功能,不涉及表现样式(颜色、字体、边框、背景等)

QQ截图20180710115024.png

常用id的命名:

(1)页面结构

  • 容器: container

  • 页头:header

  • 内容:content/container

  • 页面主体:main

  • 页尾:footer

  • 导航:nav

  • 侧栏:sidebar

  • 栏目:column

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

  • 左右中:left right center

(2)导航

  • 导航:nav

  • 主导航:mainbav

  • 子导航: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

CSS书写规范

  • css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin & padding & float(包括clear) & position(相应的 top,right,bottom,left) & display & visibility & overflow等; 自身属性主要包括: width & height & background & border; 文本属性主要包括: font & color & text-align & text-decoration & text-indent等;其他属性包括: list-style(列表样式) & vertical-vlign & cursor & z-index(层叠顺序) & zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

JS命名规范

  • js命名比较简单,现在大部分使用的是小驼峰和下划线命名。

  • jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;

  • 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

  • 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

Javascrip规范可以参照eslint的规范

相关文章

  • 前端命名规范与代码规范(一)

    HTML与CSS命名规范 1.所有命名都使用英文小写 2.命名用引号包裹 3.用中横线连接 4.命名体现功能,不涉...

  • Android开发中的优化方案

    一、命名规范 代码规范先从命名规范开始,Android的命名规范主要涉及:Java源代码,xml文件,图片资源。 ...

  • 前端代码规范

    前端代码规范 1. 命名规范 1.1 项目文件命名 采用英文小写,以中划线分隔 'school-system' 1...

  • [知识点滴]Div+CSS命名规范大全

    Div+CSS命名规范(前端web开发命名规范)Div+CSS命名规范(一)窗体头:header内容:conten...

  • 前端开发规范(通用)

    前端开发规范—通用 规范的目的是为了编写高质量的代码,提升协作效率,降低沟通成本。 一、编程规约 (一)命名规范 ...

  • vue开发规范梳理

    为了前端代码形成统一的风格,制定该代码规范(该规范部分参照VUE官网介绍的风格指南以及常用的规范) 1.文件夹命名...

  • 乐乎项目优化

    编程: 1、代码规范。架构规范、文件组织规范、命名规范、代码逻辑规范、资源存放。 一、使用cocoapod 二、代...

  • 代码规范

    代码规范 1. 概述 欢迎使用前端代码规范, 这里借鉴、引用的是京东前端代码规范。 遵循代码规范的目的在于增强团队...

  • 前端开发规范

    前端开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于...

  • css命名整理

    文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范...

网友评论

      本文标题:前端命名规范与代码规范(一)

      本文链接:https://www.haomeiwen.com/subject/jqvfpftx.html