code specification

1 Overview

Welcome to the Pinyougou code specification. This is the internal specification of Pinyougou organized by me based on JD.com's front-end code specification. A coding specification aimed at enhancing team development collaboration, improving code quality, and building the cornerstone of development,

The following specifications are the basic agreement of the team and must be strictly followed.

HTML specification

Based on official documents such as W3C and Apple Developers , combined with the normative conventions summarized in the team's business and development process, the HTML code of the page is more semantic.

image specification

Understand the characteristics of various image formats, and formulate image specifications according to the characteristics, including but not limited to image quality agreements, image import methods, image merging processing, etc., aiming to optimize page performance from the image level.

CSS specification

Unify the team's CSS code writing style and use the CSS precompiled language grammar style, provide common media query statements and browser private attribute references, and uniformly standardize the references of common modules from the business level.

Naming conventions

From the naming of 目录, 图片, HTML/CSS文件, ClassNameetc., the naming habits of the team are agreed and standardized, and the readability of the team code is enhanced.

2. HTML specification

DOCTYPE declaration

HTML files must add a DOCTYPE declaration, and uniformly use the HTML5 document declaration:

<!DOCTYPE html>

HTML5 standard template

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <title>HTML5标准模版</title>
  </head>
  <body>

  </body>
</html>

page language lang

It is recommended to use the attribute value cmn-Hans-CN(Simplified, Mainland China), but considering the compatibility of browsers and operating systems, zh-CNthe attribute

<html lang="zh-CN">

More regional language reference:

zh-SG 中文 (简体, 新加坡)   对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港)     对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门)     对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾)     对应 cmn-Hant-TW 普通话 (繁体, 台湾)

charset character set

In general, "UTF-8" encoding is used uniformly

<meta charset="UTF-8">

Due to historical reasons, some businesses may use "GBK" encoding

<meta charset="GBK">

Please try to write the standard "UTF-8" uniformly instead of "utf-8" or "utf8" or "UTF8". According to the definition of UTF-8 by IETF , the writing method of its encoding standard is "UTF-8"; while the writing method of UTF8 or utf8 only appears in some programming systems, such as one of the class System.Text.Encoding of .NET framework The attribute name is called UTF8.

writing style

HTML code case

HTML tag names, class names, tag attributes, and most attribute values are uniformly lowercase

recommend:

<div class="demo"></div>

Not recommended:

<div class="DEMO"></div>
	
<DIV CLASS="DEMO"></DIV>

type attribute

There is no need to specify type attributes for CSS and JS, which are included by default in HTML5

recommend:

<link rel="stylesheet" href="" >
<script src=""></script>

Not recommended:

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

element attribute

Element attribute values use double quote syntax
Write all the element attribute values that can be written

recommend:

<input type="text">
<input type="radio" name="name" checked="checked" >

Not recommended:

<input type=text>	
<input type='text'>
<input type="radio" name="name" checked >

special character quotes

Text can be mixed with character references. This method can be used to escape characters that cannot legally appear in the text.

The less than sign "<" and greater than sign ">" special characters cannot be used in HTML. The browser will parse them as tags. To display them correctly, use character entities in the HTML source code

recommend:

<a href="#">more&gt;&gt;</a>

Not recommended:

<a href="#">more>></a>

code indentation

Uniformly use four spaces for code indentation, so that the performance of each editor is consistent (each editor has related configuration)

<div class="jdc">
    <a href="#"></a>
</div>

code nesting

Element nesting specification, each block element is on a separate line, inline elements are optional

recommend:

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>

Not recommended:

<div>
    <h1></h1><p></p>
</div>	
<p> 
    <span></span>
    <span></span>
</p>

Paragraph elements and heading elements can only nest inline elements

recommend:

<h1><span></span></h1>
<p><span></span><span></span></p>

Not recommended:

<h1><div></div></h1>
<p><div></div><div></div></p>

3. Image specifications

Content map

Content images mostly exist in the form of photo images such as product images, with richer colors and larger file sizes

JPEG format is preferred, and WebP format is preferred if conditions permit
Try not to use PNG format, PNG8 color bit is too low, PNG24 low compression rate, large file size
The size of a single image on the PC platform should not exceed 200KB.

background image

The background images are mostly icons and other images with relatively simple colors and small file sizes, which are used for decoration

PNG and GIF formats, the PNG format is preferred, the PNG format allows more colors and provides better compression ratio
If the image color is relatively simple, such as a solid color block line icon, the PNG8 format should be used first, and the JPEG format should not be used
Images with rich colors and not too large file size (less than 40KB) or translucent effects are preferred in PNG24 format
For images with rich colors and relatively large files (40KB - 200KB), the JPEG format is preferred
If conditions permit, WebP is preferred instead of PNG and JPEG formats

4. CSS specification

code formatting

There are generally two types of style writing: one is the compact format (Compact)

.jdc{ display: block;width: 50px;}

One is the expanded format (Expanded)

.jdc {
    display: block;
    width: 50px;
}

team agreement

Uniformly use the expanded format writing style

code case

Style selectors, attribute names, and attribute value keywords are all written in lowercase letters, and attribute strings are allowed to use uppercase and lowercase letters.

/* 推荐 */
.jdc{
	display:block;
}
	
/* 不推荐 */
.JDC{
	DISPLAY:BLOCK;
}

Selector

Minimize the use of generic selectors*
Do not use ID selectors
Do not use label selectors without specific semantic definitions

/* 推荐 */
.jdc {
    
    }
.jdc li {
    
    }
.jdc li p{
    
    }

/* 不推荐 */
*{
    
    }
#jdc {
    
    }
.jdc div{
    
    }

code indentation

Uniformly use four spaces for code indentation, so that the performance of each editor is consistent (each editor has related configuration)

.jdc {
    width: 100%;
    height: 100%;
}

semicolon

A semicolon must be added at the end of each property declaration;

.jdc {
    width: 100%;
    height: 100%;
}

code readability

A space between the left parenthesis and the class name, a space between the colon and the attribute value

recommend:

.jdc { 
    width: 100%; 
}

Not recommended:

.jdc{ 
    width:100%;
}

Values separated by commas, followed by a space

recommend:

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

Not recommended:

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

Open a new line for a single css selector or new declaration

recommend:

.jdc, 
.jdc_logo, 
.jdc_hd {
    
    
    color: #ff0;
}
.nav{
    
    
    color: #fff;
}

Not recommended:

.jdc,jdc_logo,.jdc_hd {
    
    
    color: #ff0;
}.nav{
    
    
    color: #fff;
}

rgb() rgba() hsl() hsla() rect()There is no need for spaces in the color value , and the value should not contain unnecessary 0

recommend:

.jdc {
    color: rgba(255,255,255,.5);
}

Not recommended:

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

Attribute value hexadecimal values can be abbreviated as much as possible

recommend:

.jdc {
    color: #fff;
}

Not recommended:

.jdc {
    
    
    color: #ffffff;
}

Do not 0specify

recommend:

.jdc {
    
    
    margin: 0 10px;
}

Not recommended:

.jdc {
    
    
    margin: 0px 10px;
}

attribute value quotes

When the css attribute value needs quotation marks, use single quotation marks uniformly

/* 推荐 */
.jdc {
    
     
	font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc {
    
     
	font-family: "Hiragino Sans GB";
}

Attribute writing order

The following sequence is recommended:

Layout positioning attributes: display / position / float / clear / visibility / overflow (it is recommended to write display first, after all, it is related to the mode)
Own attributes: width / height / margin / padding / border / background
Text attributes: color / font / text-decoration / text-align / vertical-align / white-space / break-word
Other properties (CSS3): content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient ...

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

Mozilla's official attribute order recommendation

Naming conventions

Due to historical reasons and personal habits, the DOM structure and naming are not uniform, resulting in low efficiency and high iteration and maintenance costs when different members maintain the same page.

directory naming

Project folder: shopping
Style folder: css
Script folder: js
Style class image folder: img
Product image folder: upload
Font class folder: fonts

ClassName Naming

The naming of ClassName should be as short and clear as possible. It must start with a letter , and all letters should be in lowercase . The underscore "_" is used to connect words uniformly.

.nav_top

Common naming recommendation

Note : ad, banner, gg, guanggao, etc. that have the opportunity to be linked to advertisements are not recommended to be used directly as ClassName, because some browser plug-ins (Chrome's ad blocking plug-in, etc.) will directly filter these class names, so

<div class="ad"></div>

The English or Pinyin category name of this kind of ad should not appear

In addition, sensitive and discordant words should not appear, such as:

<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div> 
<div class="ass"></div> 
<div class="KMT"></div> 
...

ClassName	meaning
about	about
account	account
arrow	arrow icon
article	article
aside	Sidebar
audio	audio
avatar	avatar
bg,background	background
bar	bar (tool class)
branding	Branding
crumb,breadcrumbs	Bread crumbs
btn,button	button
caption	title, description
category	Classification
chart	chart
clearfix	clear float
close	closure
col,column	List
comment	Comment
community	Community
container	container
content	content
copyright	copyright
current	current state, selected state
default	default
description	describe
details	detail
disabled	unavailable
entry	article, blog post
error	mistake
even	Even numbers, often used in multi-line lists or tables
fail	fail (prompt)
feature	Topic
fewer	put away
field	input area for the form
figure	picture
filter	筛选
first	第一个，常用于列表中
footer	页脚
forum	论坛
gallery	画廊
group	模块，清除浮动
header	页头
help	帮助
hide	隐藏
hightlight	高亮
home	主页
icon	图标
info,information	信息
last	最后一个，常用于列表中
links	链接
login	登录
logout	退出
logo	标志
main	主体
menu	菜单
meta	作者、更新时间等信息栏，一般位于标题之下
module	模块
more	更多（展开）
msg,message	消息
nav,navigation	导航
next	下一页
nub	小块
odd	奇数，常用于多行列表或表格中
off	鼠标离开
on	鼠标移过
output	输出
pagination	分页
pop,popup	弹窗
preview	预览
previous	上一页
primary	主要
progress	进度条
promotion	促销
rcommd,recommendations	推荐
reg,register	注册
save	保存
search	搜索
secondary	次要
section	区块
selected	已选
share	分享
show	显示
sidebar	边栏，侧栏
slide	幻灯片，图片切换
sort	排序
sub	次级的，子级的
submit	提交
subscribe	订阅
subtitle	副标题
success	成功（提示）
summary	摘要
tab	标签页
table	表格
txt,text	文本
thumbnail	缩略图
time	时间
tips	提示
title	标题
video	视频
wrap	容器，包，一般用于最外层
wrapper	容器，包，一般用于最外层

HTML/CSS code specification

code specification

1 Overview

HTML specification

image specification

CSS specification

Naming conventions

2. HTML specification

DOCTYPE declaration

page language lang

charset character set

writing style

HTML code case

type attribute

element attribute

special character quotes

code indentation

code nesting

3. Image specifications

Content map

background image

4. CSS specification

code formatting

code case

Selector

code indentation

semicolon

code readability

attribute value quotes

Attribute writing order

Naming conventions

directory naming

ClassName Naming

Common naming recommendation

Guess you like