前端编码规范

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 1,214 | 阅读时长 ≈ 6

一、命名技巧

1、语义化

即合适标签+合适命名
（1）语义化标签优先
（2）基于功能命名、内容命名、表现命名
（3）简略、明了、无后患
tips：可自己改名字、翻译成英文单词

2、范例

（1）

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 不好  -->
<div class="article">
  <div class="article_title">编码规范</div>
  <div class="the_content">今天讲的内容是编码规范，讲师
     <div class="darkbold">若愚</div> @饥人谷</div>
</div>

<!-- 好 -->
<article>
  <h1>编码规范</h1>
  <p>今天讲的内容是编码规范，讲师
     <b>若愚</b> @饥人谷</p>
</article>

（2）

1
2
3
4
5
6
7
8
9
10
<!-- 不好  -->
<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>

<!-- 好 -->
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>

（3）

1
2
3
4
5
6
7
<!-- 好 -->
<article class="movies">...</article>
<article class="news">...</article>

<!-- 不好 -->
<article class="blue">...</article>
<article class="redBg mt30 bigText">...</article>

3、命名范例

1
2
3
4
5
6
7
8
9
10
11
12
（1）.所有命名都使用英文小写
推荐：`<div class="main"></div> `
不推荐： `<div class="Main"></div> `
（2）.命名用引号包裹
推荐：`<div id="header"></div> `
不推荐： `<div id=header></div> `
（3）.用中横线连接
推荐：`<div class="mod-modal"></div> `
不推荐： `<div class="modModal"></div> `
（4）.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等
推荐：`<div class="text-lesser"></div>`
不推荐： `<div class="light-grey"></div>`

4、常见命名
第一种：

  • .wrap或.wrapper– 用于外侧包裹
  • .container或 .ct – 包裹容器
  • .header – 用于头部
  • .body – 页面 body
  • .footer – 页面尾部
  • aside、sidebar – 用于侧边栏
  • .content – 和header footer对应，用于主要内容
  • .navigation – 导航元素
  • .pagination – 分页
    第二种：
  • .tabs >.tab – tab 切换
  • .breadcrumbs – 导航列表、面包屑
  • .dropdown – 下拉菜单
  • .article – 文章
  • .main – 用于主体
  • .thumbnail – 头像，小图像
  • .media – 媒体资源
  • .panel – 面板
  • .tooltip – 鼠标放置上去的提示
  • .popup – 鼠标点击弹出的提示
    第三种：
  • .button、.btn – 按钮
  • .ad – 广告
  • .subnav– 二级导航
  • .menu – 菜单
  • .tag – 标签
  • .message或者.notice – 提示消息
  • .summary – 摘要
  • .logo – logo
  • .search – 搜索框
  • .login – 登录
    第四种：
  • .register – 注册
  • .username – 用户名
  • .password – 密码
  • .banner – 广告条
  • `.copyright – 版权
  • .modal或者.dialog– 弹窗
    第五种：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    var 名字 = {
      状态: [
        'inverse',
        'toggled',
        'switched',
        'original',
        'initial',
        'identified',
        'disabled',
        'loading',
        'pending',
        'syncing',
        'default'
      ],
      修饰: [
        'dark',
        'light',
        'shaded',
        'flat',
        'ghost',
        'maroon',
        'pale',
        'intense',
        'twisted',
        'narrow',
        'wide',
        'smooth',
        'separate',
        'clean',
        'sharp',
        'aligned'
      ],
      元素: [
        'pagination',
        'modal',
        'popup',
        'article',
        'story',
        'flash',
        'status',
        'state',
        'media',
        'block',
        'card',
        'teaser',
        'badge',
        'label',
        'sheet',
        'poster',
        'notice',
        'record',
        'entry',
        'item',
        'figure',
        'square',
        'module',
        'bar',
        'button',
        'action',
        'knob'
      ],
      布局: [
        'navigation',
        'wrapper',
        'inner',
        'header',
        'footer',
        'aside',
        'section',
        'divider',
        'content',
        'container',
        'panel',
        'pane',
        'construct',
        'composition',
        'spacing',
        'frame'
      ]
    }

二、CSS编码规范

1、书写规范

  • tab 用两个空格表示
  • css的 :后加个空格，{前加个空格
  • 每条声明后都加上分号
  • 换行，而不是放到一行
  • 颜色用小写，用缩写, #fff
  • 小数不用写前缀, 0.5s -> .5s；0不用加单位
  • 尽量缩写，margin: 5px 10px 5px 10px ->margin: 5px 10px

###　2、范例——google编码规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}


/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}


/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* Recommended */
#video {
  margin-top: 1em;
}


/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}


/* Always put a blank line (two line breaks) between rules. */
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}


/* Not recommended */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

三、参考

  • google html css编码规范

google html css编码规范

  • bootstrap编码规范

bootstrap编码规范

其中，对新手前端写代码较重要的因素：声明顺序。相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning（定位）

Box model（盒模型）

Typographic（与文字相关，字体大小宽高居中）

Visual（颜色相关）

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

  • 命名这货真难

命名这货真难

总结：链接里的文章强烈建议通看一遍

-------------本文结束感谢您的阅读-------------