编程知识 cdmana.com

Standardization of web front end development

One 、 The purpose of front-end development specification

To improve the efficiency of teamwork , It is convenient for the backstage staff to add functions and optimize the maintenance of the front end , Output high quality documents , At the same time for the website has a better front-end architecture and website development and future lay a good foundation .

Two 、 The basic principles

accord with web standard , semantic html, structure 、 performance 、 Behavioral separation , Good compatibility . Page performance , The code should be concise, clear and orderly , Reduce server load as much as possible , Ensure the fastest parsing speed .

3、 ... and 、 Document specification

1. html, css, js, p_w_picpath The documents are filed in the agreed directory ;

2. html File naming : English name , suffix .html At the same time, put the corresponding interface draft in the same directory , If the interface draft is named Chinese , Please rename and html The same name of the file , To facilitate the back end to add Function to find the corresponding page ;

3. css File naming : English name , suffix .css. share base.css, Others are named according to module or page content

4. Js File naming : English name , suffix .js. share common.js, Other modules are named according to actual requirements .


Four 、html Writing norms

1. Document type declaration and encoding : Such as support html5 Uniform for html5 Declaration type <!DOCTYPE html>; If it doesn't support html5 Uniform for html4.01 Transitional declaration type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">; mate The attributes are unified as <meta http-equiv="Content-Type" content="text/html;charset=utf-8">, The code is unified as utf-8, Use... In writing IDE Achieve hierarchical indentation , such as dreamweave The code format command in , Code indent using TAB key , Try not to use spaces


2. css and js The document is linked to ... Between ,  css Files to be placed in js On the file , js It can be put at the end according to the demand


3. Introduce a style file or JavaScript When you file ,(html5 The rules under ) The default type declaration has to be omitted , It is written as follows :

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

4. introduce JS The library files , The file name should include the library name, version number and whether it is a compressed version , such as jquery-1.4.1.min.js; Introducing plug-ins , The file name format is library name + The plug-in name , such as jQuery.cookie.js;

5. All codes follow xhtml standard , Labels and attributes are lowercase , And all labels must be closed ,  Include br (<br />), hr(<hr />) etc. ;  Property values must be enclosed in double quotation marks ; Such as ,height=80, It should be written as height=”80”

6. <body> Add comments to the modules in , such as <!—content--><!—left sidebar--> etc.


7
. Annotation specifications . html Annotation use <!-- Here is the content ( It's not allowed to happen again ”-”)-->


8. semantic html, Such as The title is used according to its importance h Series title label , h1-h6 We should follow the principle from big to small , While reflecting the document structure, it is also conducive to search engine query ( There can only be one h1,LOGO It's a sign of a site , The most important part of the page , So assign it to LOGO) , h The label cannot be segmented ; Paragraph marking with p, List with ul,ol etc. , Block level elements cannot be nested in inline elements ;

Follow the principle of separating performance from structure , No presentation elements are involved in the code , Such as <center> <font> Labels etc.


9. A picture that can be presented as a background , Try to write css In the style ; Important pictures must be added alt attribute ; Add... To important and truncated elements title


10. Reduce... As much as possible div nesting , In principle, div No more than two levels of nesting , Such as

<div class="box"><div class="welcome"> Welcome to visit XXX,  Your user name is <div class="name"> user name </div></div></div> It can be replaced by the following code :<div  class="box">
 <p> Welcome to visit XXX,  Your user name is <span> user name </span></p></div>

11. Special symbols should use the signifier , such as <(&lt;) & >(&gt;)& Space (&nbsp; ) etc. ;

12. Must contain descriptive form elements (input,textarea) add to label, Such as

<p> full name : <input type=”text” id=”name” name=”name” /></p>

To be written :<p><label for=”name”> full name :</label><input type=”text” id=”name” /></p>

13. Focus on tag semantics

5、 ... and 、css Coding standards

1. Basic writing standards :

1) The code is unified as utf-8

2) Try not to abbreviate , Unless you can see the words at a glance

3) Name the class with a combination of English and minus signs ( Such as :solution-title), use Underline or Hump nomenclature choose one of the two nomenclature ID( Such as :mian_menu_nav mainMenuNav I prefer underline to write easily ) Pinyin and numbers are not allowed ; It should be named according to the module content

4) css All in lowercase , Write each definition on a line , The property to be followed by a colon , Each definition is followed by a semicolon ; Such as

.box{

    width: 150px;

   }

5) All decorative background pictures should be written css in , Background image use css  sprite

6) Reduce the use of properties that affect performance , such as position:absolute || float ; Do not allow the css Filter expressions are used in , And try to use less pictures repeat, Especially in body among , Poor rendering performance , If you need to use repeat Words , The width or height of the picture cannot be less than 8px

7) Please note that css abbreviation , Less code size , Increase download speed , At the same time, make the code concise and readable . Such as

.box{

border-color: #fff;

border-width: 1px;

border-style: solid;

   }

It can be written as a sentence :

.box{

       border: 1px solid #fff;

   }

8) css Attribute write order , The following order is recommended

Properties that affect document flow –> Self box model properties –> Typesetting related properties –> Decoration properties –> Generate content properties .

Location properties –> size –> Text Series –> background –> other .

This article can be written according to one's own habits , But try to keep the same attributes together .

Attribute list :

1. Properties that affect document flow ( such as :display, position, float, clear, visibility,  table-layout etc. )

2. Properties of the self box model ( such as :width, height, margin, padding, border etc. )

3. Typesetting related properties ( such as :font, line-height, text-align, text-indent, vertical-align etc. )

4. Decorative attributes ( such as :color, background, opacity, cursor etc. )

5. Properties that generate content ( such as :content, list-style, quotes etc. )

The attributes listed above are just the most commonly used , It's not all

9) make the best of html The principle of self property and style inheritance reduces the amount of code , such as :

<ul class=”list”>

<li> Here is the title list <span>2010-09-15</span></li>

</ul>

css Definition

ul.list li{

position: relative;

}

ul.list li span{

position: absolute;

right: 0

}

10) Pay attention to the weights : Tag weight :0.0.0.1; Class weight :0.0.1.0; Attribute weights :0.0.1.1;ID A weight :0.1.0.0;important A weight :1.0.0.0

11) You must annotate the large block style , Comment on the amount of small blocks ; Annotation use /* The comment */

12) Before writing the code , Consider and improve style reuse

2. Naming rules :

Naming should be based on structure or content .css Name it in lowercase letters and minus sign , Avoid numbers , Start with a letter . Here's a list of common basic names , This can be done according to personal habits , But please make sure the naming matches the content

[ Module prefix ] - type - ( effect | state ) n - [ Location n ]

Legend :
//   ( Mandatory ): Must exist .
//   [ Optional ]: You can choose according to your needs .
//   |: A commonplace .
//   n: There can be multiple .



Noun description :
Module prefix      Prefix used in module definition .
type             Define the content type of the class . Such as input box 、 Text 、 Paragraphs and so on .
effect             Define the role of a class , Used to supplement a type .
state             Define the state of the class , Used to supplement a type .
Location             Define the location used by the class , Like the home page 、 Navigation and so on , The use of left 、 Words like right , But try to avoid .
   * Each item can have its own list of abbreviations , Try to unify the abbreviations of the same name .
   * The words chosen should not be too specific to indicate a certain state ( Such as color 、 Size, etc ) 's words , To avoid losing meaning when the state changes .
   * A small letter that does not begin with a number (a-z)、 Numbers (0-9) form .
   * Assurance class (.class) Reusability and objects (#id) Uniqueness ,id Avoid reserved words .








The page layout :

- Page header :header

- Icon :logo

- Top right shortcut area :quick-links

- In the middle of the page :main

- Sidebar :side

- Main column :content

- block :section

- The top of the block :box-top

- In the middle of the block :container

- At the bottom of the block :box-bottom

- At the bottom of the page :foot

- copyright :copyright


Module prefix :

 * eject pop  

 * public global,gb  

 * title title,tit  

 * Tips hint

 * menu menu  

 * Information info  

 * preview pvw  

 * Tips tips  

 *  Navigation nav

type :

 * Button bt  

 * Text tx  

 * The paragraph p  

 * Icon icon  

 * input input  

 * Color color,c  

 * background bg  

 * Frame bor

effect :

 * Set up set  

 * add to add  

 * Delete del  

 * operation op  

 * password pw

state :

 * success suc  

 * Failure lost  

 * transparent tran

Location :

 * public gb  

 * Frame bor  

 * The paragraph p  

 * eject pop  

 * title title,tit  

 * menu menu  

 * Content cont  

 * Navigation nav

6、 ... and 、 Picture specification

1.   The format of the picture is limited to gif || png || jpg

Use the background image as much as possible png-8 The format of (IE6 Support its image transparency under ), For high quality background pictures , Use png-24(IE6 We don't support transparency in this context ). The basic principle is to choose the smallest image format and image quality while ensuring the visual effect , To reduce load time ;

2. Image naming uses lowercase letters and underscores according to the purpose of the image , Such as send_btn.png etc. , For other members to understand .

3. Application css sprite A small background or icon in a technical set , Reduce page http request ( Note that the size of the picture should not exceed 200K).

<link  The front-end study 、 Video tutorial 、 Learning route , Add prestige   kaixin666haoyun  ></script>


版权声明
本文为[osc_ 91g5cdgs]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225135751702r.html

Scroll to Top