前端规范

最新推荐文章于 2023-05-06 11:51:52 发布

simone_w

最新推荐文章于 2023-05-06 11:51:52 发布

阅读量151

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_25764081/article/details/101028753

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.HTML规范

<!DOCTYPE html>
<html lang="en">
<head>     
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO -->     
    <title>Style Guide</title>     
    <meta name="keywords" content="your keywords">     
    <meta name="description" content="your description">     
    <meta name="author" content="author,email address">
    
    <link rel="shortcut icon" href="/favicon.ico">

    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> 
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">  
    <!-- iPad，72x72 像素，可以没有，但推荐有 --> 
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">  
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> 
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">  
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> 
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
 </head>

2.CSS规范

（1）class命名：BEM（块（block）、元素（element）、修饰符（modifier））

（2）常见class关键词

布局类：header、footer、container、main、content、page

包裹类：wrapper、inner

区块类：box

结构类：row、col、grid

列表类：list、item、group、panel

大小类：lg、md、sm、xs

状态类：active、current、checked、selected、disabled、open、finish、process、wait、default、success、info、warning、error

导航类：nav、prev、next、breadcrumb、pagination、menu、steps、dropdown

星级类：rate、star

分割类：divider

交互类：alert、dialog、popover、modal、message、notification、spin、progress、loading

表单类：form、label、datepicker、timepicker、select、tree-select、cascader、radio、checkbox、transfer、switch、slider、upload

表格类：table、row、column

图片类：image、thumbnail、gallery

其他语义类：tabs、scroll、tooltip、accordion、collapse、carousel、tag、media、card、badge、timeline、calendar、avatar、btn、search、close、link、icon、vertical、horizontal

（3）声明顺序

Positioning Model（布局方式、位置） > Box Model（盒模型） > Typographic（文本排版） > Visual（视觉外观）

position
top
right
bottom
left
z-index

display
float
box-sizing
width
height
margin
padding
overflow

color
(font(style variant weight size/line-height family))
font-weight
font-size
line-height
white-space
text-align
vertical-align
word-break

background
border
border-radius
box-shadow

cursor
opacity

（4）链接的样式顺序

a:link > a:visited > a:hover > a:active

3.JavaScript规范

（1）命名规范

变量：小驼峰（特殊：ID、URL、Android、iOS）

常量：全部大写，用下划线分割

函数：小驼峰，前缀可用can、has、is、get、set、add、remove、view、browse（浏览）、edit、modify、load、save、split、merge、find、search、select、mark、update、revert（复原）、submit、commit（交付）、expand、collapse、create、destroy、start、stop、open、close、begin、end、read、write、backup（备份）、restore（恢复）、play、pause、compile（编译）、execute、encode、decode、refresh、synchronise（同步）

类和构造函数：大驼峰（首字母大写）

枚举变量：大驼峰（枚举的属性：全部字母大写）

4.注释

（1）html区块注释

<!-- 
@name: Drop Down Menu 
@description: Style of top bar drop down menu. 
@author: xxx(xxx@163.com) 
-->

（2）css文件顶部注释

/* * 
* @description: 说明 
* @author: xxx 
* @update: 2019.09.20
*/

（3）css特殊注释

/* TODO: xxxx by name 2019-09-18 19:40 */
/* BUGFIX: xxxx by name 2019-09-18 19:40 */

（4）函数注释

/**
* @param {String} name
* @param {String} title
* @return {Boolean}
* @author 张三
* @version 1.0.0
* @example setTitle('test')
*/

（5）js文件注释

/**  
* @fileoverview Description of file, its uses and information  
* about its dependencies.  
* @author xxx@163.com （xxx）
* Copyright 2019 xxx All Rights Reserved.  
*/