前端代码规范

CSS

命名要语义化
用类选择器,减少使用标签选择器:因为项目中重复的标签多了以后不好区分。可能有很多重复的标签,所以最好还是使用类选择器。
bem规范:

.block{}

.block__element{}

.block–modifier{}

CSS样式推荐书写顺序:
好的样式顺序,不仅看起来清晰,也可以提升浏览器渲染DOM的性能。
定位属性:position display float left top right bottom overflow clear z-index
自身属性:width height margin padding border background
文字样式:font-family font-size font-style font-weight font-varient color
文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
css3中新增属性:content box-shadow border-radius transform……

TS

只有当前文件要用的类型可以放在当前文件,多个文件公用的可以在父文件里建一个types.ts来存放。原因:避免类型重复定义,代码量冗长。
类型文件没有默认导出,每个类型需要一个一个export。

脚手架

单独业务代码结构命名:以todo list为例,在src/pages下面新建一个文件夹,命名为todolist,再去写相关的业务代码。而不是放在src/pages/home下面。
组件命名也要语义化。
目录结构:
目录规范:App里要写页面整个框架的结构

VScode自动格式化

在vs code设置里,setting.json里添加这行代码:

"editor.codeActionsOnSave": {
		"source.fixAll": true,
		"source.fixAll.eslint": true,
		"source.fixAll.stylelint": true
	},

就可以在每次保存以后自动格式化代码

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值