Summary of front-end code styles and code styles

Summary of front-end code styles and code styles

Purpose: To improve work efficiency, facilitate background staff to add functions, optimize and maintain the front-end, output high-quality documents, and make the structure clearer and the code concise and orderly during website construction, have a better front-end architecture.

Basic Standards: compliant with web standards. semantic tags are used to separate structures, representations, and behaviors with excellent compatibility. The page performance is optimized. The code is concise, clear, and ordered. The server load is minimized to ensure the fastest resolution speed.

I. document specifications

1.1 HTML section

1.1.1 package creation Problems

All files are archived to the specified directory. The package creation format is as follows:

　　　　

Note: Place all css files in the css folder, image in the images folder, and js in the js folder.

1.1.2 HTML header writing

(1) encoding: All the encoding uses xhtml/html, the tag must be closed, encoding is unified as a UTF-8, in a multi-language website is recommended to add

(2) semantics: correctly use tags and make full use of html tags without compatibility issues

(3) head content of the file header:

• Title: You need to add a title.

• Encoding: charset = UTF-8

• Meta: You can add description and keywords.

1.2 CSS Section

1.2.1 CSS types and their names

CSS style sheets can be divided into three types: global style sheets, module generic style sheets, and independent style sheets.

• Name of global style sheets: public.css

• Module generic style table name: name_basic.css

• Independent style sheet: name_page name.css

1.2.2 CSS Introduction

CSS file introduction can be introduced through external or Inline Methods

• External Connection

• Inline mode

　　　　

Note: link and style labels should be placed in the head. In principle, style Writing on html is not allowed. Avoid using @ import in CSS. the nesting should not exceed one layer.

 

Ii. annotation specifications

2.1 document notes on the top (recommended)

1/* 2 * @ description: Chinese description 3 * @ author: name4 * @ update: name (xxxx-xx: xx) 5 */

2.2 attribute comments

1 /*Header*/2 /*Nav*/3 /*Container*/4 ...5 /*Footer*/

2.3 function module comments

1/* module: module1 by Xiao Wang */2... 3/* module: module2 by Xiao Li */

2.4 Special notes

1/* Color codes 2 ------------------------------ 3 Red: # e03d3d; 4 Dark: #424242; 5 Light: # c3c5c0; 6 blue # e03d3d; 7 */8 9/* 10 the default width is 1128px 11 */12 13/* @ group Reset Css */14/* @ group General Definitions */15 16/* --------------- Typography ----------------- */17/* ------------------ Sprite --------------------*/

Note:

• Each document corresponds to a document comment (the main comments include the document creator, Creation Time, and description)

• Attribute annotation Description: It can be named by CSS attributes (such as the margin/padding value, CSS Hack, and global Hover)

• Function module Description: This module is used to compile CSS styles (such as headers, navigation, buttons, and footers)

 

Iii. Naming rules

3.1 How to name

• Css is better to be named by class, and js is named by id.

• The name of the id and class should reflect the function of the element or use a common name instead of an abstract obscure name.

3.2 naming example

• . Div1 {}/* not recommended; meaningless */
• . A_green {}/* not recommended; meaningless */
• . Menu {}/* Recommendation; special */
• . Header {}/* recommended; versatility */

3.3 simplified naming

The simpler the name of id and class, the better. As long as the expression is sufficient, it helps to understand and improve code efficiency.

• . Navigation {}/* not recommended */
• . Login_box_inside_con {}/* not recommended */
• . Nav {}/* Recommended */

3.4 naming nesting

Pay attention to the sequence and nesting of css writing, and minimize the level of selector in terms of performance.

• . Nav ul. list {}/* not recommended */
• . Nav. list {}/* Recommended */

3.5 precautions

• All rules are named in lowercase and underlined format.
• Do not use Chinese pinyin in naming, but use more concise and semantic English words for combination.
• Name must be abbreviated, but cannot be blindly abbreviated
• Names with numbers 1, 2, and 3 are not allowed.
• Avoid duplicate class and id names
• Id Note: A parent container region used to identify a module or page. The name must be unique and do not create an id at will.
• Class is used to identify an object of a certain type. The name must be concise.
• Improve code module reuse as much as possible, and try to combine styles
• The rule name should not contain color, positioning, and other information related to the specific display effect. It should be named by meaning instead of the result name.

 

Iv. Writing specifications

4.1 typographical specifications

• Use 4 tab to indent
• The rule can be written as a single row. Or multiple lines, but the rule layout in the entire file must be unified

Writing Style:

• A semicolon must be added for each attribute value.
• If multiple attributes share one style set, multiple attributes must be written as multiple rows.

4.2 attribute writing order (generally, the display attributes> text attributes> other attributes are written in the format)

• Display attribute: display/list-style/position/float/clear...
• Attributes (Box Model): width/height/margin/padding/border
• Background: background
• Row height: line-height
• Text attributes: color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
• Others: cursor/z-index/zoom/overflow...
• CSS3 attributes: transform/transition/animation/box-shadow/border-radius
• If CSS3 attributes are used and browser prefix is necessary, add them in the order of-webkit-/-moz-/-ms-/-o-/std. The standard attributes are written at the end.
• Add the link style strictly in the following order: a: link-> a: visited-> a: hover-> a: active

　　

4.3 Code Performance Optimization

• Combine the-top/-right/-bottom/-left settings of margin, padding, and border to use short names whenever possible.
• The selector should be as short as possible on the basis of satisfying the function, reducing selector nesting and query consumption. However, you must avoid overwriting global style settings.
• Do not use the * selector in css.
• 0 and later do not need to be separated. For example, 0 PX can be omitted to 0, and 0.8px can be omitted to. 8px.
• If the color can be expressed as three characters, for example, # ccc
• If there is no border, do not write it as border: 0; it should be written as border: none
• While saving code decoupling, try to merge repeated styles as much as possible
• Background, font, and other attributes that can be abbreviated. Try to use the abbreviated form
• The images that can be rendered in the background are written into CSS styles as much as possible.

4.4 use of CSS Hack

Try to use the browser detection and CSS Hacks as few as possible. Try other solutions first. Considering the code efficiency and ease of management, although these two methods can quickly solve the differences in browser resolution, they should be regarded as the final means. In long-term projects, allowing hack only brings more hack, so try to use it as little as possible.

• IE6: _ property: value
• IE6/7: * property: value
• IE6/7/8/9: property: value \ 9

4.5 IE compatibility

IE supports the specific <meta> label to determine the IE version used to draw the current page. It is best to set edge mode unless there are strong special requirements, this notifies IE to adopt the latest supported mode.

<! -- IE8 and later versions will use the highest version of IE to render the page -->
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge">

Note: X-UA-Compatible is a dedicated identifier of IE8. It is used to specify the IE8 browser to simulate the rendering mode of a specific version of IE browser.

<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1"> in chrome = 1, if GCF is installed, use GCF to render the page. If GCF is not installed, use the IE kernel of the highest version for rendering.

4.6 font rules

• To prevent file merging and encoding conversion problems, we recommend that you change the style Chinese font name to the corresponding English name, such as SimHei and SimSun) microsoft Yahei)
• The font width is set to 700 in bold and 400 in normal mode.
• Font-size must be in px
• In order to unify the font-family values and better support the compatibility of various browsers on each operating system, font-family cannot be set freely in the Business Code.

 

V. Other Specifications

• Do not modify the full-site CSS and general CSS libraries easily. After the changes, they must be thoroughly tested.
• Avoid using filter
• Avoid using expression in CSS
• Avoid tiled background images that are too small.
• Try not to use it in CSS! Important
• Do not use the "*" selector in CSS.
• The level (z-index) must be clear and clear. the pop-up window and bubble on the page are at the highest level (999 at the highest level). The bubbles in different pop-up windows can be adjusted between three digits, the normal block is a multiple of 10 in the 10-90 period. The expand and pop-up of the block increases the number of digits at the current parent level.
• Background images allow sprite technology as much as possible to reduce http requests. Considering collaborative development by multiple people, sprite is divided by module, business, and page.
• Avoid using the style attribute inside the page. CSS is placed in the head label, which is introduced by the link label to separate the structure and performance of the page.
• Minimize the use of float, position, and other attributes that affect performance, so as to avoid confusion during la S.
• Use as few as possible <br/> to disconnect rows
• Do not appear multiple (spaces) consecutively or use as few spaces as possible (in the English character set, spaces in the full angle will become garbled ), use text-indent, maring/padding, and other methods to implement the blank space.
• If you need to indent the first line, you can use text-indent: 2em;
• If the image needs to be loaded, it will be written on the page using the img label, indicating the width and height. The alt attribute must be added to the important image to add the title to the important element and the truncated element.
• If there is a jump, use the tag. <a href = "#"> </a>. to jump to a new page, add the targent = "_ blank" attribute, if you click a blank Link (#), the current page is automatically reset to the first end. You can use "javascript: void ()" to replace the original "#"
• Clear under what circumstances jpg/gif/png Images

 

6. Adaptive Page Layout (responsive layout, not considering earlier version IE compatibility)

6.1 layout details

• First, add a new meta tag to the header head.

<! -- Make the viewport width equal to the actual resolution on the physical device, and do not allow user scaling. Generally, mainstream web apps are set like this -->
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">

• Position: you cannot use absolute positioning.
• Width/height/margin/padding: px cannot be used. Percentage, auto, or em should be used.
• Font: the absolute size cannot be used. em should be used.

The Media Query module introduced by 6.2 CSS3 can automatically detect the screen width.

• Load the corresponding CSS file. We recommend that you apply different CSS rules based on different screen resolutions, such as @ media screen and (max-width: 799px ){...}
• Image Adaptive: img {max-width: 100% ;}

 

VII. Help document

7.1 global style Writing (reset css)

7.2 clear floating

The floating areas to be cleared include:

• If the child element is floating, and the parent element content collapsed (that is, it is not wrapped)
• The layout is messy. For example, the next layer goes to the last layer.

Solution (four methods)

• Float applies to the parent element to ensure that the child element and the parent element are still at the same layer after they are float.
• Correct use of overflow: hidden; General Manager, overflow: hidden mainly refers to overflow and hiding, but it also has a clear floating effect.
• Add <div class = "clear"> </div> under the required element, and clear {clear: both;} in CSS (not recommended, add code and redundancy)

• Clearfix is used to clear floating (recommended). It is equivalent to creating a target element of a block with blank invisible content to clear floating

. Clearfix {* zoom: 1;}/* For IE7 hack, trigger haslayout of IE7 to clear floating */
. Clearfix: before,. clearfix: after {display: table; content: ""; line-height: 0 ;}
. Clearfix: after {clear: both ;}

7.3 font styles of major websites:

• Google: font-family: arial, sans-serif;
• Yahoo: font: 13px/1.25 "Helvetica Neue", Helvetica, Arial;
• Apple: font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
• Baidu: font: 12px arial;
• Taobao: font: 12px/1.5 tahoma, arial, 'hiragino Sans gb', \ 5b8b \ 4f53, sans-serif;
• Weibo: font: 12px/1.125 Arial, Helvetica, sans-serif;
• Tencent: font: 12px "", "Arial Narrow", HELVETICA;
• Sina Weibo: font: 12px/1.3 "Arial", "Microsoft YaHei ";
• Sina: font: 12px/20px "SimSun", "", "Arial Narrow", HELVETICA;
• JD: font: 12px/150% Arial, Verdana, "";
• Zhihu: font-family: 'helvetica Neue ', Helvetiva, Arial, Sans-serif;

Default font style:

• Good compatibility: font-family: Helvetica, Tahoma, Arial, Sans-serif;
• Closer to design: font-family: Geogia, "Times New Roman", Times, serif;

7.4 add ellipsis (Text overflow omitted) for multi-line text display)

Add the specific Width limit, white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

7.5 specific style of the input box

Line height is not required in the input box, but hack is required in IE8/IE7.