前端书写习惯总结

CSS 书写规范

  • class类: 小写字母,'-'分割;
  • 图片: 小写字母,‘-’或者‘_’ 分割;
  • 避免选择器嵌套层级过多,少于3级;
  • 不要随意使用id,id应该按需使用,而不能滥用;
  • 使用CSS缩写属性 ,比如padding:0 10px 5px 5px等等,这样精简代码同时又能提高用户的阅读体验;
  • 不缩写单词,除非一看就明白的单词

CSS 字体单位

  • px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • rem也是相对长度单位,但相对的只是HTML根元素。

CSS 注释格式

  • 用来区分页面的注释:如“/************************产品中心*******************************/”
  • 模块的注释,如/*首页导航栏/ */

常用CSS命名规则

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; }

(2)字体大小,直接使用”font+字体大小”作为名称

  • .font-12px { font-size: 12px; }
  • .font-9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

  • .left { float:left; }
  • .bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

  • .bar-news { }
  • .bar-product { }

 

JS规范

JS命名规范

JS 变量命名

命名方法:小驼峰式命名

命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)

JS 函数命名

命名方法:小驼峰式命名法

命名规范:前缀应当为动词

命名建议:可使用常见动词约定

 JS 常量命名

命名方法:名称全部大写

命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词

JS 文件命名

使用短线(-)或句点(.)作为分隔符号,推荐使用句点,最好使用小写英文字符,不要使用其他符号和扩展字符,如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"

使用 .js 扩展名,这个扩展名的兼容性最好。其实任何扩展名都可以,只要是 text 类型、编码正确即可

用句点分隔表示名称中的从属关系,范围大的在前,如jQuery 的表单插件 Form既可以命名为jquery.form.js

JS注释格式

使用多行注释,以/*开头,*/结尾

JS 注意事项

书写格式

  • JS 换行缩进:采用tab(打散为4个空格)
  • 结束行需添加分号`;`

 

HTML 规范

1. 尽量减少标签层级;

2. 双标签必须闭合,单标签用斜线闭合;

3. HTML第一行统一使用HTML5标准<!DOCTYPE html>;

4.注意代码加注释,增加可读性,如:

<!--内容-->
<div class="content">
    <p>content</p>
</div>

5. 代码缩进统一用4 空格;

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知 秋~

文章里可以看到打赏码哦~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值