I checked google's html and css code specifications and made a simple record.
1. Omit the http: Or https: part of ur addressWhen referencing style sheet files, script files, images, and other media files, you can do this unless you cannot obtain resources using either of the two Protocols, that is to say, resources can be obtained only through other protocols, and only http: And https: can be omitted. This can reduce the volume of files and avoid confusion in URLs.
<! -- Not recommended --> <script src = "http://www.google.com/js/gweb/analytics/autotrack.js"> </script> <! -- Recommendation --> <script src = "// www.google.com/js/gweb/analytics/autotrack.js"> </script>/* not recommended */. example {background: url (http://www.google.com/images/example);}/* Recommended */. example {background: url (// www.google.com/images/example );}
II. General Code style
1. indent two spaces at a time. Do not use the tab key for indentation, or mix the tab key and space for indentation. Just use spaces for indentation.
<ul> <li>Fantastic <li>Great</ul>.example { color: blue;}
2. Only lowercase letters are used, including the tag name, attribute name, and attribute value (except for custom string attribute values)
<! -- Not recommended --> <a href = "/"> Home </A> <! -- Recommendation -->
Iii. General Meta rules
1. Make sure that your IDE uses a UTF-8 code to save the file, and do not carry BOM. Use <meta charset = "UTF-8"> to define page encoding. Do not declare UTF-8 encoding or anything in the style sheet file.
2. Make comments where necessary.
3. Use TODO to mark what needs to be improved in the code
<!-- TODO: remove optional tags --><ul> <li>Apples</li> <li>Oranges</li></ul>
Iv. HTML writing rules
1. Document Type. HTML5 document types apply to all html documents: <! Doctype html>. In addition, it is best to use html instead of xhtml.
2. Use standardized html and tools such as W3C HTML validator for detection.
<! -- Not standard --> <title> Test </title> <article> This is only a test. <! -- Specification --> <! DOCTYPE html> <meta charset = "UTF-8"> <title> Test </title> <article> This is only a test. </article>
3. Use semantic html tags and select tags based on their purposes.
<! -- Not recommended --> <div onclick = "goToRecommendations ();"> All recommendations </div> <! -- Recommendation --> <a href = "recommendations/"> All recommendations </a>
4. visibility into multimedia elements. Multimedia elements, such as images, videos, and animations, must have relevant texts to reflect their content. For example, can use the alt attribute to describe the image content.
<! -- Not recommended --> <! -- Recommendation -->
5. Ensure that the structure, style, and behavior of the page are separated. Make sure that the document or template contains only html, write all styles used to the style sheet file, and write all scripts to the js file. This is very important for multi-person collaboration.
<!-- Not recommended --><!DOCTYPE html><title>HTML sucks</title><link rel="stylesheet" href="base.css" media="screen"><link rel="stylesheet" href="grid.css" media="screen"><link rel="stylesheet" href="print.css" media="print">
6. Optimize tags. Some labels are not required and can be used as few as possible. You can refer to HTML5 specification to know which labels are required and unnecessary.
<!-- Not recommended --><!DOCTYPE html>7. Omit the type attributes of <style> and <script>
5. HTML code formatting.
1. Create a new line for each block-level element or table element tag, and indent each child element.
<blockquote> <p><em>Space</em>, the final frontier.</p></blockquote><ul> <li>Moe <li>Larry <li>Curly</ul><table> <thead> <tr> <th scope="col">Income <th scope="col">Taxes <tbody> <tr> <td>$ 5.00 <td>$ 4.50</table>6. css writing rules
1. Use valid and standard css, which can be verified by W3C CSS validator.
2. The names of IDs and classes are as short as possible and conform to the semantics.
/* Not recommended */#navigation {}.atr {}/* Recommended */#nav {}.author {}3. Use as few multi-Selector or descendant selector as possible, because this will affect performance.
/* Not recommended */ul#example {}div.error {}/* Recommended */#example {}.error {}4. Use composite attributes. Css provides many areas where you can concatenate attributes. Such as font, margin, and padding.
/* Not recommended */border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;/* Recommended */border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;5. If the value of the css attribute is 0, do not include units. Unless necessary.
margin: 0;padding: 0;6. Omit 0 before the decimal point. For example, 0.8 can be written as. 8.
7. Do not enclose the value of the URI type with quotation marks. For example, @ import url (// www.google.com/css/go.css );
8. If possible, use a hexadecimal number of 3 characters.
/* Not recommended */color: #eebbcc;/* Recommended */color: #ebc;9. Use a specific prefix
.adw-help {} /* AdWords */#maia-note {} /* Maia */10. Use-in ID and class as a hyphen.
/* Not recommended: does not separate the words “demo” and “image” */.demoimage {}/* Not recommended: uses underscore instead of hyphen */.error_status {}/* Recommended */#video-id {}.ads-sample {}11. Avoid using css hack. First, consider using another method.
VII. css formatting rules
1. the css attribute is declared in alphabetical order, but the private prefix of Some browsers does not come in.
background: fuchsia;border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: black;text-align: center;text-indent: 2em;2. indent the statement in.
@media screen, projection { html { background: #fff; color: #444; }}3. Each css attribute Declaration requires a semicolon, even the last one.
/* Not recommended */.test { display: block; height: 100px}/* Recommended */.test { display: block; height: 100px;}4. Use a space after the colon followed by the attribute name
/* Not recommended */h3 { font-weight:bold;}/* Recommended */h3 { font-weight: bold;}5. Each css selector or attribute Declaration requires a new row.
/* Not recommended */a:focus, a:active { position: relative; top: 1px;}/* Recommended */h1,h2,h3 { font-weight: normal; line-height: 1.2;}6. A blank line should be added between each css rule.
html { background: #fff;}body { margin: auto; width: 50%;}
I personally think that code standards are wise and wise. The purpose is to better cooperate with the team and ensure the quality of the Code. In actual use, the actual situation should be taken into consideration.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
