Code specification of product quality purchase

Code specification

1. General

Welcome to the code specification of pinyougou. This is the internal specification of pinyougou organized by me based on JD front-end code specification. Coding specifications designed to enhance team development collaboration, improve code quality and build the cornerstone of development,

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

HTML specification

be based on W3C,Apple Developer And other official documents, combined with the normative conventions summarized in the team's business and development process, make the page HTML code more semantic.

Picture specification

Understand the characteristics of various picture formats and formulate picture specifications according to the characteristics, including but not limited to picture quality conventions, picture introduction methods, picture merging processing, etc., in order to optimize page performance from the picture level.

CSS specification

Uniformly standardize the team's CSS code writing style and the use of CSS precompiled language syntax 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

Specify the naming habits of the team from the aspects of directories, pictures, HTML/CSS files and ClassName naming, so as to enhance the readability of the team's code.

2. HTML specification

DOCTYPE declaration

DOCTYPE declaration must be added to HTML files, and HTML5 document declaration shall be used uniformly:

<!DOCTYPE html>

HTML5 standard template

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <title>HTML5 Standard template</title>
  </head>
  <body>

  </body>
</html>

Page language lang

The attribute value cmn-Hans-CN is recommended, but in Chinese mainland operating system compatibility, zh-CN attribute value is still used.

<html lang="zh-CN">

More regional language references:

zh-SG chinese (simplified Chinese character, Singapore)   corresponding cmn-Hans-SG mandarin (simplified Chinese character, Singapore)
zh-HK chinese (traditional Chinese character, Hong Kong)     corresponding cmn-Hant-HK mandarin (traditional Chinese character, Hong Kong)
zh-MO chinese (traditional Chinese character, Macao)     corresponding cmn-Hant-MO mandarin (traditional Chinese character, Macao)
zh-TW chinese (traditional Chinese character, Taiwan)     corresponding cmn-Hant-TW mandarin (traditional Chinese character, Taiwan)

charset character set

Generally, "UTF-8" coding is used uniformly

<meta charset="UTF-8">

For historical reasons, some businesses may use the "GBK" code

<meta charset="GBK">

Please try to write it as standard "UTF-8" instead of "UTF-8" or "utf8" or "utf8". according to IETF definition of UTF-8 , the coding standard is written as "UTF-8"; UTF8 or UTF8 is written only in some programming systems. For example, an attribute name in the class System.Text.Encoding of the. NET framework is called UTF8.

Writing style

HTML code case

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

recommend:

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

Not recommended:

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

Type properties

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 quotation mark syntax
The element attribute value 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 reference

Text can be mixed with character references. This method can be used to escape characters that cannot appear legally in 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 HTML source code

recommend:

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

Not recommended:

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

Code indent

Uniformly use four spaces for code indentation to make the performance of each editor consistent (each editor has relevant configuration)

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

Code nesting

Element nesting specification, each block element has an independent line, and 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 title 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. Picture specification

Content map

The content map mostly exists in the form of photo pictures such as commodity map, with rich colors and large file volume

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 compression rate is low, and the file volume is large
The size of a single picture on the PC platform shall not be greater than 200KB.

Background map

Background images are mostly images with simple colors such as icons, small file size and decoration

PNG and GIF formats are preferred. PNG format allows more colors and provides better compression ratio
For simple image color, such as pure color block line icon, PNG8 format is preferred to avoid JPEG format
PNG24 format is preferred if the image has rich colors and the image file is not too large (less than 40KB) or has translucent effect
JPEG format is preferred for images with rich colors and large files (40KB - 200KB)
If conditions permit, WebP is preferred to replace PNG and JPEG formats

4. CSS specification

Code formatting

There are generally two writing styles: one is compact format

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

One is Expanded

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

Team agreement

Unified use of expanded format writing styles

Code case

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

/* recommend */
.jdc{
	display:block;
}
	
/* Not recommended */
.JDC{
	DISPLAY:BLOCK;
}

selector

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

/* recommend */
.jdc {}
.jdc li {}
.jdc li p{}

/* Not recommended */
*{}
#jdc {}
.jdc div{}

Code indent

Uniformly use four spaces for code indentation to make the performance of each editor consistent (each editor has relevant configuration)

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

semicolon

Add a semicolon at the end of each attribute declaration;

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

code readability

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

recommend:

.jdc { 
    width: 100%; 
}

Not recommended:

.jdc{ 
    width:100%;
}

Comma separated values, 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 row 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;
}

The color value rgb() rgba() hsl() hsla() rect() does not need spaces, and the value does not have unnecessary 0

recommend:

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

Not recommended:

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

If the hexadecimal value of the attribute value can be abbreviated, use abbreviated as far as possible

recommend:

.jdc {
    color: #fff;
}

Not recommended:

.jdc {
    color: #ffffff;
}

Do not specify units for 0

recommend:

.jdc {
    margin: 0 10px;
}

Not recommended:

.jdc {
    margin: 0px 10px;
}

Attribute value Quotes

When quotation marks are required for css attribute values, single quotation marks shall be used uniformly

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

/* Not recommended */
.jdc { 
	font-family: "Hiragino Sans GB";
}

Attribute writing order

The following sequence is recommended:

Layout location attribute: display / position / float / clear / visibility / overflow
Self attribute: width / height / margin / padding / border / background
Text attribute: color / font / text decoration / text align / vertical align / white space / break word
Other attributes (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 official attribute order recommendation

Naming conventions

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

Directory naming

Project folder: shopping
Style folders: css
Script folder: js
Style class picture 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 are lowercase. The underlined "" is used to connect words

.nav_top

Common naming recommendations

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

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

The English or Pinyin Class Names of such advertisements should not appear

In addition, sensitive and disharmonious 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 frequency
avatar	head portrait
bg,background	background
bar	Bar (tools)
branding	Branding
crumb,breadcrumbs	crumbs
btn,button	Button
caption	Title, description
category	classification
chart	Chart
clearfix	Clear float
close	close
col,column	column
comment	comment
community	community
container	container
content	content
copyright	copyright
current	Current status
default	default
description	describe
details	details
disabled	Not available
entry	Article, blog
error	error
even	Even numbers, often used in multiline lists or tables
fail	Failed (prompt)
feature	special
fewer	Put away
field	Input area for the form
figure	chart
filter	screen
first	The first one is often used in the list
footer	footer
forum	forum
gallery	gallery
group	Module, clear float
header	Page header
help	help
hide	hide
hightlight	Highlight
home	homepage
icon	Icon
info,information	information
last	The last one is often used in the list
links	link
login	Sign in
logout	sign out
logo	sign
main	subject
menu	menu
meta	The author, update time and other information columns are generally under the title
module	modular
more	More (expand)
msg,message	news
nav,navigation	Navigation
next	next page
nub	Small pieces
odd	Odd numbers, often used in multiline lists or tables
off	Mouse away
on	Mouse over
output	output
pagination	paging
pop,popup	Popup
preview	preview
previous	previous page
primary	main
progress	progress bar
promotion	Promotion
rcommd,recommendations	recommend
reg,register	register
save	preservation
search	search
secondary	secondary
section	block
selected	Selected
share	share
show	display
sidebar	Sidebar
slide	Slide, picture switching
sort	sort
sub	Secondary
submit	Submit
subscribe	subscribe
subtitle	Subtitle
success	Success (prompt)
summary	abstract
tab	Tab
table	form
txt,text	text
thumbnail	thumbnail
time	time
tips	Tips
title	title
video	video
wrap	Container, package, generally used for the outermost layer
wrapper	Container, package, generally used for the outermost layer

Posted by ultraslacker on Wed, 13 Oct 2021 05:52:39 -0700

Programmer Group

Code specification of product quality purchase

Code specification

1. General

HTML specification

Picture specification

CSS specification

Naming conventions

2. HTML specification

DOCTYPE declaration

Page language lang

charset character set

Writing style

HTML code case

Type properties

Element attribute

Special character reference

Code indent

Code nesting

3. Picture specification

Content map

Background map

4. CSS specification

Code formatting

Code case

selector

Code indent

semicolon

code readability

Attribute value Quotes

Attribute writing order

Naming conventions

Directory naming

ClassName naming

Common naming recommendations

Hot Keywords