前端代码规范

标签规范

重置样式

PC端

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; }
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }

移动端

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

特殊字符

1.大于号与小于号 &gt &lt
<div>&gt;&gt;</div>

纯数字输入框

使用 type="tel" 而不是 type="number"

<input type="tel">

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>
****p标签内不要嵌套div*****

标签注释规范

(1)单行注释 ---注释写在代码上面，不要写在代码下面或旁边
	<!-- Comment Text -->
	<div>...</div>
(2)多行注释
	<!--说明 Start-->
    <div>
       <ul>
         <li>...</li>
		 ...
       </ul> 
    </div>
	<!--说明 End-->

图片规范

精灵图

将所有图片融合在一起形成一张图片，将图片固定好位置设置为背景图片，减少网络请求次数

内容图

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

图片压缩

TinyPNG – Compress WebP, PNG and JPEG images intelligently

图片命名规范

避免中文，可使用拼音
图片功能类 ---图片名称_icon或者图片名称Icon
- icon：模块类固化的图标
- logo：LOGO类
- spr：单页面各种元素合并集合
- btn：按钮
- bg：可平铺或者大背景

样式规范

代码易读规范

左括号与类名之间一个空格，冒号与属性值之间一个空格

//类名后加一个空格
.jdc { 
    width: 100%; 
}
//逗号分隔的取值，逗号之后一个空格
.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
//多层级类名换行
.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}

属性书写顺序

自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
布局定位属性：display / position / float / clear / visibility / overflow
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    color: #333;
    display: block;
    position: relative;
    float: left;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
}

样式隔离 ---scoped和module

#减少样式命名冲突
(1)深度选择器
	/deep/ v-deep 和>>>
场景 less    scss    css
(2)scoped
  在项目中锁定组件样式方位，只让样式在局部范围生效，不会影响到其他组件
  #环境 ---vue中style
  #原理 ---data-自定义属性 在控制台上elements会显示data-
(3)module
  可以实现跟scoped一样的效果，相比于scoped 它更能减少命名冲突,为每一个局部类赋予全局唯一的类名
  #环境---react中常用，vue中也可以使用，但要配置webpack打包工具
eg：
1.标签控制
	<p class='$style.redClass'></p>  --->class="redClass_1nczEeyy"
2.style使用
	<style module>
       .redClass{
           color:red
       }
    </style>    
3.js实现
 	this.$style.redClass

常用JS代码规范

类型声明规范

变量命名不要使用关键字，保留字
声明常量使用const ,声明变量避免使用var,应该使用let, const 和 let 都是块级作用域，var 是函数级作用域
声明对象不要使用new Object(),esLint默认no-new-object

声明对象的函数方法不要使用 function格式，应该简写，eslint: object-shorthand

const item = {
  value: 1,
  addValue (val) {//对象的方法简写
    return item.value + val
  }
}

对象属性值的简写方式，eslint: object-shorthand

const job = 'FrontEnd'
const item = {
  job  //job:job
}

对象方法规范--Object

不要直接使用 Object.prototype 的方法, 例如 hasOwnProperty,propertyIsEnumerable 和 isPrototypeOf 方法，eslint: no-prototype-builtins

// good
console.log(Object.prototype.hasOwnProperty.call(object, key))

// best
const has = Object.prototype.hasOwnProperty // cache the lookup once, in module scope.
console.log(has.call(object, key))

优先使用对象展开运算符 ... 来做对象浅拷贝

// good
const original = { a: 1, b: 2 }
const copy = { ...original, c: 3 } // copy => { a: 1, b: 2, c: 3 }

数组方法规范

使用数组的 map 等方法时，请使用 return 声明，如果是单一声明语句的情况，可省略 return

#forEach 没有返回值，所以不要写return
eg:[1, 2, 3].map(x => x + 1)

eg:inbox.filter((msg) => {
  const { subject, author } = msg
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee'
  }
  return false
})

遍历迭代器进行映射时使用 Array.from 代替扩展运算符 ..., 因为这可以避免创建中间数组
```
// bad
const baz = [...foo].map(bar)

// good
const baz = Array.from(foo, bar)
```

把一个可迭代的对象转换为数组时，使用展开运算符 ... 而不是 Array.from

const foo = document.querySelectorAll('.foo') //这里是NodeList 是一个类数组
// good
const nodes = Array.from(foo)
// best
const nodes = [...foo]

解构赋值

当需要使用对象的多个属性时，请使用解构赋值，eslint: prefer-destructuring

// bad
function getFullName (user) {
  const firstName = user.firstName
  const lastName = user.lastName

  return `${firstName} ${lastName}`
}

// good
function getFullName (user) {
  const { firstName, lastName } = user

  return `${firstName} ${lastName}`
}

// better
function getFullName ({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

字符串规范

字符串统一使用单引号的形式 ''，eslint: quotes

// bad
const department = "JDC"

// good
const department = 'JDC'

字符串太长的时候，请不要使用字符串连接符换行 \，而是使用 +

const str = '残星落影 残星落影 残星落影' +
  '残星落影 残星落影 残星落影' +
  '残星落影 残星落影'

程序化生成字符串时，请使用模板字符串，eslint: prefer-template template-curly-spacing

const test = 'test'

// bad
const str = ['a', 'b', test].join()

// bad
const str = 'a' + 'b' + test

// good
const str = `ab${test}`

不要对字符串使用eval()，会导致太多漏洞， eslint: no-eval

不要在字符串中使用不必要的转义字符， eslint: no-useless-escape

// bad
const foo = '\'this\' \i\s \"quoted\"'

// good
const foo = '\'this\' is "quoted"'
const foo = `my name is '${name}'`

函数

不要在非函数代码块（if , while 等）中声明函数，eslint：no-loop-func

// bad
if (isUse) {
  function test () {
    // do something
  }
}

// good
let test
if (isUse) {
  test = () => {
    // do something
  }
}

将参数默认值放在最后

// good
function handleThings (name, opts = {}) {
  // ...
}

模块

使用标准的 ES6 模块语法 import 和 export

// bad
const util = require('./util')
module.exports = util

// good
import Util from './util'
export default Util

// better
import { Util } from './util'
export default Util

不要使用 import 的通配符 *，这样可以确保你只有一个默认的 export

// bad
import * as Util from './util'

// good
import Util from './util'

变量

不允许出现未被使用的变量，eslint: no-unused-vars

比较运算符&相等

使用 === 和 !== 而非 == 和 !=，eslint: eqeqeq
条件声明例如 if 会用 ToBoolean 这个抽象方法将表达式转成布尔值并遵循如下规则
- Objects 等于 true
- Undefined 等于 false
- Null 等于 false
- Booleans 等于 布尔值
- Numbers 在 +0, -0, 或者 NaN 的情况下等于 false, 其他情况是 true
- ```
String为 '' 时等于 false, 否则是 true
```
```
if ([0] && []) {
  // true
  // 数组(即使是空数组)也是对象，对象等于true
}
```

定时器规范

#vue中
...
data(){
   return{
      timer:null
   } 
}
mounted(){
   this.timer=setInterval(()=>{
     ...
   })
}
beforeDestroy(){
   clearInterval(this.timer)
}

其他内容

移动端私有属性

目前两大主流移动平台为 iOS 和 Android，有不少带 -webkit- 前辍的 CSS 私有属性以及一些 iOS only 属性，当中好些属性在日常需求中经常应用到。

WebKit CSS 属性中的一部分已经被包含在 CSS 规范草案中，并且可能成为最后的推荐标准，但目前仍然是试验性的属性，还有一些属性是不规范的属性，它们没有出现在跟踪规范中。

-webkit-scrollbar

-webkit-scrollbar 是-webkit-私有的伪元素，用于对拥有overflow属性的区域 自定义滚动条的样式。

譬如，为了隐藏滚动条，你可以这么做：

.scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

参考资料：

-webkit-touch-callout

-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单，这个属性可以让你禁用系统默认菜单。

属性值

none：系统默认菜单被禁用
inherit：系统默认菜单不被禁用

兼容性

iOS 2.0及更高版本的 Safari 浏览器可用
Android 尚不明确

-webkit-tap-highlight-color

-webkit-tap-highlight-color 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

在 iOS Safari 上，当用户点击链接或具有 JavaScript 可点击脚本的元素，系统会为这些被点击元素加上一个默认的透明色值，该属性可以覆盖该透明值。

属性值

：颜色值

兼容性

iOS 1.1.1及更高版本的Safari浏览器可用
大部分安卓手机

-webkit-overflow-scrolling

定义在具 overflow:scroll 属性的元素内是否采用原生样式滚动行为

属性值

auto：默认值，单手滚动，滚动没有惯性效果
touch：原生样式滚动，应用此属性值会产生层叠上下文（会影响定位参照物的属性，类似 opacity、masks、transforms属性，影响到 position 的效果，甚至影响到 position:fixed 的定位参照物，）

-webkit-line-clamp

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。

常见结合属性：

display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow：可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

属性值

：块元素显示的文本的行数

兼容性

iOS
Andriod

-webkit-appearance

-webkit-appearance 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

改变按钮和其他控件的外观，使其类似于原生控件。

属性值

none：去除系统默认 appearance 的样式，常用于 iOS 下移除原生样式
button：渲染成 button 的风格
checkbox：渲染成 input checkbox 样式的复选框按钮
radio：渲染成 radio 的风格
…

更多属性值参考 mozilla：-webkit-appearance 属性

兼容性

iOS 2.0及更高版本的Safari浏览器可用
Android 尚不明确

-webkit-font-smoothing

字体平滑，该属性定义文本的平滑属性，但要注意以下说明：

非标准属性，不建议用于网页上，这个属性不能保证所有用户都能看到相同效果，这会使网站的字体渲染造成不一致，而此属性的渲染行为日后也有可能会改变

属性值

none：去掉字体平滑效果，使字体带锯齿
antialiased：使字体在像素级别更平滑更轻细
subpixel-antialiased：在多数非 Retina 显示设备中字体将会更锐利。

注意：以上属性在 Retina 设备上会有明显的效果，在非 Retina 设备上看不出差异

兼容性

部分高清设备，如 Retina Mac

-webkit-backface-visibility

backface-visibility 在 W3文档有定义描述

定义转换元素的背面是否显示

属性值

visible：显示（默认值）
hidden：隐藏

兼容性

iOS 2.0 及更高版本的 Safari 浏览器可用
大部分 Android

-webkit-mask

定义多样的蒙板效果属性（缩写属性，类似 margin）

使用语法

<mask-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip> || <mask-composite>]*
where 
<mask-position> = [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top  | center | bottom ]?

默认值：

-webkit-mask: none repeat scroll 0% 0% padding border add;

属性值

：为元素设置蒙板图片，蒙板图片会根据图片的透明区域对元素可视部分进行裁剪
- ：图片链接作为蒙板图片
- ：渐变函数 -webkit-gradient 作为蒙板图片
- none：去掉蒙板图片
：定义蒙板图片是否平铺或平铺的方式
- repeat：默认值，水平和垂直方向平铺
- repeat-x：水平方向平铺
- repeat-y：垂直方向平铺
- no-repeat：不平铺
：如果 -webkit-mask-image 属性有设置，attachment 决定该图片是否相对视窗固定或随着其容器滚动
- scroll：默认值，随容器滚动
- fixed：相地视窗固定
：定义蒙板图片的初始位置，书写格式类似 background-position—-<mask-position>[， <mask-position>]*
- left
- right
- center
：定义蒙板图片定位相对起点，与 webkit-mask-position 属性相关。当 -webkit-mask-attachment:fixed 的时候，该属性不生效。
- padding：默认值，蒙板定位相对边距
- border：蒙板定位相对边框
- content：蒙板定位相对元素盒子内容
：如果 -webkit-mask-image 属性有设置，-webkit-mask-clip 将定义蒙板图片的裁剪区域
- border：默认值，蒙板图片延伸到容器的边框
- padding：蒙板图片延伸到容器的边距
- content：蒙板图片裁剪到元素盒子内容范围
- text：蒙板图片裁剪到元素文本范围
：定义蒙板图片重合的裁剪显示方式
- add：默认值，图片重合不裁剪
- subtract：去掉层级低的图形以及图片重合部分图形，只留层级高非重合部分图形
- intersect：只留重合部分图形
- exclude：只去掉重合部分图形

有关属性更详细描述请参考：

w3 - css-masking

MDN - -webkit-mask

携程 UED - -webkit-mask

兼容性

Safari 4.0 及更高版本
iOS 4.0 及更高版本
Android 2.1 及更高版本

-webkit-user-select

定义用户是否能选中元素内容

属性值

auto：可选中元素内容
none：不能选中任何内容
text：可选中元素内的文本

兼容性

iOS 3.0 及更高版本的 Safari
大部分安卓手机

-webkit-user-modify

定义用户是否可编辑元素内容

属性值

read-only：只读
read-write：可读可写，粘贴内容会保留富文本格式（ Android 机不保留富文本格式）
read-write-plaintext-only：可读可写，粘贴内容所有富文本格式都会丢失

注意：使用这个属性的时候，请不要出现 -webkit-user-select: none，文本无法选中的情况下，在 Safari 该属性不生效，不过在 Chrome 依然生效

兼容性

iOS 5.0 及更高版本
Safari 3.0 及更高版本
大部分安卓手机

-webkit-text-stroke

定义文本描边，可以设计描边的宽和颜色，一般与文本填充属性 -webkit-text-fill-color 共用。

属性值

：长度单位
：颜色值

兼容性

iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明确

-webkit-text-fill-color

定义文本填充，一般与文本描边属性 -webkit-text-stroke 共用。

属性值

：颜色值
currentcolor：元素 color 属性值
-webkit-activelink：链接被点击时系统的默认颜色

更多属性值参考：Safari CSS Reference -webkit-text-fill-color

兼容性

iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明确

-webkit-text-size-adjust

定义 iOS Safari 网页文本大小调整属性

属性值

：百分比值，字体显示调整值
auto：字体自动调整
none：字体不能自动调整

兼容性

iOS 1.0 及更高版本
Safari on iOS only
安卓尚不明确

-webkit-marquee

定义滚动文本内容属性（缩写属性，类似margin）。

使用语法

-webkit-marquee: direction increment repetition style speed

属性值

：滚动方向
- ahead：从下到上滚动
- auto：默认滚动方向
- backwards：从右到左滚动
- down：从上到下滚动
- forwards：从左到右滚动
- left：从右到左滚动
- reverse：从上到下滚动
- right：从左到右滚动
- up：从下到上滚动
：每次移动的距离
- [ | ]
- large：距离常量
- medium：距离常量
- small：距离常量
：文字滚动的重复次数
- 非负整数
- infinite：无限次

posted @ 2022-08-03 16:45 残星落影阅读(77) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS学习

· JavaScript学习

· 前端页面设计思路

· 【前端】周总结

· 第十一周学习笔记总结

公告

昵称：残星落影
园龄： 3年9个月
粉丝： 14
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

文章分类

搭建博客主题(4)

目标全栈！！！

标签规范

重置样式

PC端

移动端

特殊字符

纯数字输入框

代码嵌套

标签注释规范

图片规范

精灵图

内容图

背景图

图片压缩

图片命名规范

样式规范

代码易读规范

属性书写顺序

样式隔离 ---scoped和module

常用JS代码规范

类型声明规范

对象方法规范--Object

数组方法规范

解构赋值

字符串规范

函数

模块

变量

比较运算符&相等

定时器规范

其他内容

移动端私有属性

-webkit-scrollbar

-webkit-touch-callout

-webkit-tap-highlight-color

-webkit-overflow-scrolling

-webkit-line-clamp

-webkit-appearance

-webkit-font-smoothing

-webkit-backface-visibility

-webkit-mask

-webkit-user-select

-webkit-user-modify

-webkit-text-stroke

-webkit-text-fill-color

-webkit-text-size-adjust

-webkit-marquee

公告

搜索

常用链接

最新随笔

随笔档案