Shulou(Shulou.com)06/01 Report--

This article is about what the available css code specification is. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Css code specification

1. Overview

Welcome to the product csss code specification, this internal specification. Coding specifications designed to enhance team development collaboration, improve code quality, and build the cornerstone of development

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

HTML specification

Based on the W3C, Apple developers and other official documents, and combined with the team business and development process summarized in the specification agreement, make the page HTML code more semantic.

Picture specification

Understand a variety of picture format characteristics, according to the characteristics to develop picture specifications, including but not limited to picture quality agreement, picture introduction, picture merge processing, etc., in order to optimize page performance from the picture level.

CSS specification

Unified standardization team CSS code writing style and the use of CSS pre-compiled language syntax style, provide common media query statements and browser private attribute references, and standardize the reference of common modules from the business level.

Naming convention

Standardize the naming habits of the team from the aspects of directories, pictures, HTML/CSS files, ClassName naming and other aspects to enhance the readability of the team code.

2. HTML specification

DOCTYPE statement

The DOCTYPE declaration must be added to the HTML file, and the HTML5 document declaration must be uniformly used: ~ ~ html ~ ~

HTML5 standard template

```html

```

Page language lang

The attribute value cmn-Hans-CN (simplified, Chinese mainland) is recommended, but the zh-CN attribute value is still used for browser and operating system compatibility.

More regional language references:

Zh-SG Chinese (simplified, Singapore) corresponds to cmn-Hans-SG Putonghua (simplified, Singapore) zh-HK Chinese (traditional, Hong Kong) corresponds to cmn-Hant-HK Putonghua (traditional, Hong Kong) zh-MO Chinese (traditional, Macau) corresponds to cmn-Hant-MO Putonghua (traditional, Macau) zh-TW Chinese (traditional) Taiwan) corresponding to cmn-Hant-TW Mandarin (traditional, Taiwan)

Charset character set

Generally speaking, the "UTF-8" code is used uniformly.

For historical reasons, some businesses may use "GBK" coding

Please try to write as standard "UTF-8" as possible, not as "utf-8" or "utf8" or "UTF8". According to IETF's definition of UTF-8, its coding standard is written as "UTF-8", while the writing of UTF8 or utf8 only appears in some programming systems, such as the name of an attribute in the class System.Text.Encoding of .NET framework is called UTF8.

Writing style

HTML code case

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

Recommended:

Not recommended:

```

```

Type attribute

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

Recommended:

Not recommended:

Element attribute

Element attribute values use double quotation mark syntax

Element attribute values can be written on everything

Recommended:

Not recommended:

Special character reference

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

The less than sign "> cannot be used in HTML.

Not recommended:

More > >

Code indentation

Uniformly use four spaces for code indentation to make each editor behave consistently (each editor has relevant configuration)

Code nesting

Element nesting specification, each block element has a separate line, and inline elements are optional

Recommended:

Not recommended:

Paragraph elements and title elements can only nest inline elements

Recommended:

Not recommended:

3. Picture specification

Content map

Most of the content maps exist in the form of commodity pictures and other photo pictures, 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 ratio is low, file size is large.

The size of a single picture on the PC platform should not be larger than 200KB.

Background map

The background images are mostly pictures with simple colors such as icons, small file size and embellishments.

PNG and GIF format, PNG format is preferred, PNG format allows more colors and provides better compression ratio

If the image color is relatively simple, such as the solid color block line icon, give priority to using PNG8 format, avoid not using JPEG format

PNG24 format is preferred if the image is colorful and the picture file is not too large (below 40KB) or with translucent effect.

(40KB-200KB) with rich colors and large files (JPEG format is preferred)

If conditions permit, priority should be given to WebP instead of PNG and JPEG format

4. CSS specification

Code formatting

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

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

One is the unfold format (Expanded)

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

Team agreement

Uniformly use unfold format to write style

Code case

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

```/ recommended /

.jdc {display:block;}

/ not recommended /

.JDC {DISPLAY:BLOCK;}

`

Selector

Use as few universal selectors as possible *

Do not use ID selector

Do not use tag selectors without specific semantic definition

````css / recommended /

.jdc {} .jdc li {} .jdc li p {}

/ not recommended /

* {} jdc {} .JDC div {} ```

Code indentation

Uniformly use four spaces for code indentation to make each editor behave consistently (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

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

Recommended:

.jdc {width: 100%;}

Not recommended:

.jdc {width:100%;}

Comma-separated values with a space after the comma

Recommended:

.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

Recommended:

Css .jdc, .jdc _ logo, .jdc _ hd {color: # ff0;} .nav {color: # fff;}

Not recommended:

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

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

Recommended:

.JDC {color: rgba (255pr. 255pr. 5);}

Not recommended:

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

Attribute value hexadecimal values can be abbreviated as much as possible

Recommended:

.jdc {color: # fff;}

Not recommended:

Css .jdc {color: # ffffff;}

Do not specify a unit for 0

Recommended:

Css .jdc {margin: 0 10px;}

Not recommended:

Css .jdc {margin: 0px 10px;}

Attribute value quotation marks

When quotation marks are needed for css attribute values, single quotation marks are used uniformly.

````css / recommended /

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

/ not recommended /

.jdc {font-family: "Hiragino Sans GB";}

`

Attribute writing order

The following order is recommended:

Layout positioning attributes: display / position / float / clear / visibility / overflow (it is recommended that display write first, after all, it is related to the mode)

Its own attributes: width / height / margin / padding / border / background

Text attributes: color / font / text-decoration / text-align / vertical-align / white- space / break-word

Other CSS3: content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

Css .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;-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 convention

Due to the disunity of DOM structure and naming caused by historical reasons and personal habits, different members are inefficient in maintaining the same page, and the cost of iteration and maintenance is extremely high.

Directory naming

Project folder: pinyougou

Style folder: css

Script folder: js

Style picture folder: img

Product category picture folder: upload

Font class folder: fonts

ClassName naming

The naming of ClassName should be as short and clear as possible. It must be named at the beginning of the letter, and all letters are lowercase. The words are connected by an underscore "_".

.nav _ top

Common naming recommendation

Note: ad, banner, gg, guanggao and other words that have the opportunity to hook up with ads are not recommended to be used as ClassName directly, because some browser plug-ins (ad blocking plug-ins for Chrome, etc.) filter these class names directly, so

The English or pinyin names of this kind of advertisement should not appear.

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

...

ClassName meaning

About about

Account account

Arrow arrow icon

Article article

Aside sidebar

Audio Audio

Avatar avatar

Bg,background background

Bar bar (utility class)

Branding branding

Crumb,breadcrumbs bread crumbs

Btn,button button

Caption title, description

Category classification

Chart chart

Clearfix clear float

Close shuts down

Col,column column

Comment comment

Community community

Container container

Content content

Copyright copyright

Current current state, selected state

Default default

Description description

Details details

Disabled is not available

Entry articles, blog posts

Error error

Even even number, often used in multirow lists or tables

Fail failed (prompt)

Special topic on feature

Fewer, put it away.

Field is used in the input area of the form

Figure diagram

Filter screening

The first first, often used in lists

Footer footer

Forum Forum

Gallery Gallery

Group module, clearing floats

Header header

Help help

Hide hiding

Hightlight highlight

Home home page

Icon icon

Info,information information

The last last, often used in lists

Links link

Login login

Logout exit

Logo Fla

Main body

Menu menu

Meta author, update time and other information bar, generally located under the title

Module module

More more (expand)

Msg,message message

Nav,navigation navigation

Next next page

Nub small piece

Odd odd, often used in multirow lists or tables

Off mouse away

On mouse over

Output output

Pagination paging

Pop,popup pop-up window

Preview Preview

Previous previous page

Primary is mainly

Progress progress bar

Promotion promotion

Rcommd,recommendations recommendation

Reg,register registration

Save save

Search search

Secondary secondary

Section block

Selected selected

Share sharing

Show display

Sidebar sidebar

Slide slides, picture switching

Sort sorting

Sub secondary adj.

Submit submission

Subscribe subscription

Subtitle subtitle

Success successful (hint)

Summary Summary

Tab tab

Table form

Txt,text text

Thumbnail thumbnail

Time time

Tips hint

Title title

Video video

Wrap container, package, generally used for the outermost layer

Wrapper container, package, generally used for the outermost layer

Thank you for reading! This is the end of this article on "what is the available css code specification". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.