HTML Authoring Specification

HTML and CSS Coding specification content one, the HTML specification two, the CSS specification three, the attention matters: four, the commonly used naming rule five, the CSS style table file naming six, the file naming rule one, the HTML specification: 1. The first line of the Code Specification page adds a standard schema declaration <! DOCTYPE html> Code indentation: Tab key set four spaces (usually in the lower right corner of the software to set the appropriate space size) in addition to the beginning of the doc and ' UTF-8 ' in the HTML, or head in the case can be capitalized, the others are lowercase, CSS classes are lowercase suggestions for HTML The root element specifies the lang attribute, which sets the correct language for the document Lang= "ZH-CN" different doctype will trigger different rendering modes under different browsers <meta http-equiv= "x-ua-compatible" content= "ie= Edge ">

<! DOCTYPE html>

Do not use @import compared to the <link> tag, @import instructions are much slower, not only increasing the number of requests, but also causing unforeseen problems. There are several alternatives: use multiple <link> elements to compile multiple CSS files into a file using a CSS preprocessor like Sass or less to provide CSS file merging functionality <!--uses in Rails, Jekyll, or other systems Link elements--><link rel= "stylesheet" href= "Core.css" > <!--Avoid @imports--><style> @import URL ("More.css");</style> The introduction of CSS and JavaScript files according to the HTML5 specification, usually does not need to indicate the type when introducing CSS and JS, because Text/css and text/javascript are their default values respectively

<!--External css--><link rel= "stylesheet" href= "Code-guide.css" > <!--in-document css--><st yle>/* */</style> <!--JavaScript--><script src= "Code-guide.js" ></script>

2. Comments <!--note Content--! > Note:----don't leave space after, if blank, other comments all add spaces (easy to follow up program development) in other words, annotations are globally unified

eg:<!--Better--! ><!--S Note Content--! > as a writing specification, it is best to have the beginning and end of each annotation required, reducing subsequent hassles and errors. Don't break the line. CSS and JS annotations are the same. <!--E Note content--! ><!--No so great--! ><!--S Note Content--! > as a writing specification, it is best to have the beginning and end of each annotation required to reduce subsequent hassles and errors. Don't break the line. CSS and JS annotations are the same. <!--E comment content--! >

3. Naming specification class with "-"; ID with "_"; name:data-custom name; semantic encoding based on content: can start with the project name shorthand-semantic name

eg:class= "Tb-head", id= "Tb_head"; data-head= "Tb-head

";

4. Sort attributes (easy for the backstage programmer to tidy up the code) 1, sort by attribute definition: Class,id,name sort (recommended by this method) (class is used to identify the highly reusable component, so first, ID is used to identify the specific component, use caution, and therefore rank second) class [mandatory] Class with an underscore '-' distinguish ID, name [Force]id with underscore ' _ ' to differentiate data-*src, for, type, Hreftitle, altaria-*, Roleeg:<a class= ' ... ' id= ' ... . "Data-modal=" Toggle "href=" # ">example link</a> <input class=" Form-control "type=" text "> 2, Special attributes can be sorted according to the elements followed, sorted eg:<a href= "#" class= "..." id= "..." </a>example link</a> <input type= "text" class= "..." >3, sort by the beginning of the letter eg:

<a class= "Bfl-head" data-head= "Bfl-head" href= "javascript:;" id= "Bfl_head" ></a>

Sort according to your own understanding. 5. Reduce the amount of labels

<!--not so great--><span class= "Avatar" ></span> <!--Better--><i MG class= "Avatar" src= "..." >

6. Boolean attribute Boolean property can be declared without assigning a value. The XHTML specification requires that it be assigned a value, but the HTML5 specification does not. In other words, do not assign a value.

<input type= "text" disabled> <input type= "checkbox" value= "1" checked> <select><option value= "1" selected>1</option></select>

Two, CSS Specification 1, Syntax 1.1, indentation [force] use 4 spaces as an indentation level, do not allow the use of 2 spaces or the tab character. 1.2. space [mandatory] for code legibility, add a space before the left curly brace of each declaration block [force] a space should be inserted after the ":" of each declaration statement [Force] property multiple values each comma should be inserted after a space eg:box-shadow,border-image[force] Do not insert a space after a comma inside the RGB (), Rgba (), HSL (), Hsla (), or rect () values for a property value or a color parameter, omit 0 of the decimal that is less than 1 (for example,. 5 instead of 0.5;-.5px, replace -0.5px) 1.3, selector [Force] is When a selector is grouped, separate selectors are held separately on one line eg:tr,td{}[Force] >, +, ~ Selector to keep a space on each side. [Force] to add double quotation marks to attributes in the selector do not allow single quotes for example, input[type= "text"]. Only in some cases is optional, but for code consistency, it is recommended that you add double quotes. [Mandatory] do not qualify for the ID, class selector add type selector, if it is not necessary. [Recommended] The nesting level of the selector should be no greater than level 3, and the position should be as accurate as possible. eg

/* Good */#error,. danger-message {font-color: #c00;} #username input {}.comment. Avatar {}/* bad */dialog#error,p.danger-message {font-color: #c00;}. Page. header. login #username Input {}.comment div * {}

1.4. Line [Force] must not exceed 120 characters per line, unless a single line is indivisible. [Force] Declaration block right curly brackets should be line [recommended] for extra-long styles, in the space of the style values or after wrapping, it is recommended to group logically. Eg:background:url (...) there should be a newline no-repeat;1.5, the property [mandatory] Property definition must be a different row. The [Force] property definition must end with a semicolon. That is, each declaration should be taken separately, ending with a semicolon [recommended] Use the attribute abbreviation as much as possible if you can use abbreviations. eg:font:12px/1.5 Arial, sans-serif;1.6, prefix [force] attributes with a private prefix are arranged from long to short, aligned by the colon position. [Recommended] You can add a prefix to the selector to make the semantics clearer, such as adding a ". is-" prefix. 1.7, abbreviated hexadecimal value should be all lowercase, as soon as possible, eg: #fff. Avoid specifying units for 0 values for example, with margin:0; instead of margin:0px;

/

* Bad CSS */main>nav {padding:10px;}. Selector,. Selector-secondary,. Selector[type=text] {padding:15px;margin:0px 0px 15px;background-color:rgba (0, 0, 0, 0.5) box-shadow:0px 1px 2px #CCC, inset 0 1px 0 #FFFFFF}.selector,. Selector-secondary,. selector[type=text] {padding : 15px;margin:0px 0px 15px;} /* Good CSS */main > Nav {padding:10px;}. Selector,.selector-secondary,.selector[type= "text"] {Padding:15px;margin-bottom:15px;background-color:rgba ( 0,0,0,.5); background:transparent url (averyveryverylongurlisplacedhere) no-repeat 0 0;box-shadow:0 1px 2px #ccc, inset 0 1px 0 #fff;}

2. * * Comment * * * * NOTE: * Do not leave space after, if blank, other comments all add spaces (easy to follow up program development) in other words, the annotation is globally unified

eg:/* S Note content */is a writing specification, preferably each need to comment needs to start and end, reduce the subsequent trouble and errors. Do not turn the line. CSS and JS annotations are the same. /* E Comment content *

/

 3. Naming conventions 1. Use abbreviations in Chinese or Chinese pinyin (this is because English is simple, if necessary, can search the international abbreviation of English) 2. Only lowercase characters or dashes (dash characters) can appear, instead of underscores, hump naming method. Eg:. btn or. Btn-danger3. Avoid excessive arbitrary shorthand. BTN represents a button, but. s cannot express any meaning the 4.class name should be as short as possible and have a clear meaning. Use a meaningful name. Use an organized or purposeful name, and do not use the name of the representation (presentational). Prefix the new class based on the closest parent class or base class. Use the. js-* class to identify the behavior (as opposed to the style), and do not include these classes in the CSS file. It is also possible to refer to the specifications listed above for naming Sass and less variables. /* Bad example */.t {...}. Red {...}. Header {...}  /* Good example */.tweet {...}. Important {...}. Tweet-header {...}  4. Selectors use class for common elements, which facilitates rendering performance optimizations. For frequently occurring components, avoid using the property selector (for example, [class= ...]). The performance of the browser is affected by these factors. The selector should be as short as possible, and limit the number of elements that make up the selector as much as possible, and do not recommend more than 3. The class is restricted to the nearest parent element (that is, the descendant selector) only when necessary (for example, when you do not use a prefixed class-the prefix is similar to a namespace). /* Bad example */span {...}. Page-container #stream. Stream-item. Tweet. tweet-header. Username {...}. Avatar {...}  /* Good example */.avatar {...}. Tweet-header. Username {...}//Do not exceed 3. Tweet. Avatar {...} 5. Declaration Order 5.1. The related attribute declarations should be grouped into a group and arranged in the following order: * positioning* Box model* Typographic* Visual because the location (positioning) can remove elements from the normal flow of documents, and also can cover the box model related styles, so ranked first. The box model is ranked second because it determines the size and position of the component. Other properties only affect the interior of the component (inside) or do not affect the first two sets of properties, so it is followed. Eg:.declaration-order {/* positioning */position:absolute;top:0;right:0;bottom:0;left:0;z-index:100; /* Box-model */display:block;float:right;width:100px;height:100px; /* typography */font:normal 13px "Helvetica Neu E ", Sans-serif;line-height:1.5;color: #333; text-align:center; /* Visual */background-color: #f5f5f5; border:1px Solid #e5e5e5; border-radius:3px; /* Misc */opacity:1;} 5.2. Set the box model-whether it is out of the standard (child absolute)-Other attributes note the compatibility notation (purely personal) box Model 1. Set whether a floating element or a slider (Float,display) is required 2. Set the box border, background color, font color (border, Background,font,color) 3. Setting the width-height size (width,height) 4. Text vertically centered (line-hight,text-align,vertical-align, etc.) 5. Set Margin, Padding value standard Stream (child absolute parent) position:relative, Absolute, Static, Fixedleft/top/right/bottomz-index other properties opcaity, Cursor and other CSS3 new attributes transition, transform, animation, and so on each range can be sorted by the first letter: eg: in the box model 2nd, the first letter can be sorted by Background,border,color; But there are some exceptions, such as position definitely platoon first, after definition leftEqual direction bit properties PS: Media queries are required to place media queries near the relevant rules as far as possible Eg:.declaration-order {display:block;float:right;background-color: #f5f5f5; border:1px solid #e5e5e5; Border-radius: 3px;color: #333; font:normal 13px "Helvetica Neue", Sans-serif; width:100px;height:100px;text-align:center;line-height:100px; margin:0 auto;padding:10px 0; Position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;opacity:1; Transtion:all. 5s ease 0s;animation:name initial 2s;} @keyframes name{0%{}100{}///from{}to{}} @media screen and (Min-width) and (Max-width) {and left and right to leave spaces}5.3. Written in alphabetical order Precautions: 1. Try not to use the!important declaration. [Recommended] Define styles by inline and!important tags when you want to force a style to be specified and do not allow any scene overrides. 2. The location of media query places media queries near the rules that are as relevant as possible. Don't pack them in a single style file or at the bottom of your document. If you separate them, you will only be forgotten in the future. 3. Prefixed attributes when using a specific vendor-prefixed attribute, the value of each property is aligned vertically by indentation, making it easier to edit multiple lines. In TextMate, use Text→edit each line in Selection (?? A). In Sublime Text 2, use the Selection→add Previous line (?? ↑) and Selection→add Next line (?? ↓). Prefixed Properties */lector {webkit-box-shadow:0 1px 2px rgba (0,0,0,.15); box-shadow:0 1px 2px Rgba (0,0,0,.15); 4. Single-line rule declaration for a style that contains only one declaration, for readability and for quick editing, it is recommended to put the statement on the same line (can be analyzed carefully, detect errors) 5. A shorthand property declaration should limit the use of shorthand attribute declarations in cases where all values are to be set as shown. The common misuse of shorthand attribute declarations is as follows: paddingmarginfontbackgroundborderborder-radius/* Bad example */.element {margin:0 0 10px;background : Red;background:url ("image.jpg"); border-radius:3px 3px 0 0;} /* Good example */.element {margin-bottom:10px;background-color:red;background-image:url ("image.jpg"); border-top-left-radius:3px;border-top-right-radius:3px;} Nesting in 6.Less and Sass avoids unnecessary nesting. This is because although you can use nesting, it does not mean that nesting should be used. Nesting is only used if the style must be restricted within the parent element (that is, the descendant selector) and there are multiple elements that need to be nested. Without nesting.table > thead > Tr > th {...}. Table > Thead > TR > td {...}//with nesting.table > thead > tr {> th {...} > td {...}} For more information, please click here for more reference to this article. Common naming rules for class naming with an underscore '-' Header: Header content: content/ Container tail: Footer navigation: Nav Sidebar: Sidebar column: Column page perimeter control overall layout width: Wrapper around: Left right Center Login: Loginbar Logo: Logo ads: Banner page body: main hotspot: Hot news: News Download: Download sub-navigation: Subnav Menus: Menu submenu: submenu Search: Searching Links: Friendlink footer : Footer Copyright: Copyrights Scroll: Scroll content: Contents Tags: tags article list: Listing tip information: Msg tips: Tips column title: Title join: Joinus Guide: Guidance Services: Service registration: Regsiter Status: Status vote: Vote partner: Partnerid Name: Underlined ' _ ' 1) page structure container: Container header: Header content: Content/container page body: Main footer: Footer nav: Nav Sidebar: Sidebar column: Column page perimeter control overall layout width: wrapper: Left Right center (2) Navigation: Nav Main: Mainnav sub-navigation: Subnav Top navigation: Topnav Side navigation: Sidebar left navigation: Leftsidebar right navigation: Rightsidebar Menus: Menu submenu: submenu title: Title Abstract: summary (3) function mark: Logo advertisement: Banner login: Login Login Bar : Loginbar Register: Register Searches: Search Ribbon: Shop title: Title join: Joinus Status: Status button: BTN Scroll: Scroll tab: Tabs Article list: Listing hint info: Msg current: Cur Rent tips: Tips Icons: Icon notes: Note Guide: Guild services: Service hotspot: Hot news: News Download: Download vote: Vote partners: Partner Links: Link Copyright: COPYRIGHTC The SS style sheet file names the main MASTER.CSS module MODULE.CSS Basic shared base.css layout, layout layout.css theme themes.css column columns.css text font.css form forms.css Patch mend.css Print PRINT.CSS file naming rules the name of the project is all lowercase, the following underscore: My_project_name directory naming refers to the project naming convention; When there are complex structures, the plural nomenclature is used. Example: scripts, styles, images, data_models js file naming reference project naming conventions. Example: Account_model.js CSS, scss file naming refers to project naming conventions. Example: Retina_sprites.scss HTML file naming reference project naming conventions. Example:error_report.html Acknowledgement: Small size NongwenReprint to: https://www.cnblogs.com/lwwen/archive/2016/08/29/5818043.html

HTML Authoring Specification