Home > Developer > Web Develop
Never noticed this before, because when you see some good web site source code, open their referenced CSS file format does not look like a specification. But luckily, I saw it yesterday. By enhancing the readability of the CSS specification, you can optimize page performance and resolve to repent.
I've sorted out the CSS specifications I can understand, which may not be complete, but it does add some readability to the code.
1. It is advisable to use two spaces to represent tab, so that the words are consistent in all environments.
2. Do not add "/" to the end of the tag (HTML5 specification, self-closing tag without slashes); eg: do you do the same? <input name= "" type= ""/> or Save it.
3. Nested elements should be indented in a single space eg:
<body> src="images/company-logo.png" alt="Company">
class="hello-world">Hello, world!</body>
4. Non-omitted end tag </li> or </div>
5. The standard mode declaration must be added at the beginning of the page:
6 It is strongly recommended that you specify the lang attribute for the HTML root element, which is said to help the translation tool or voice tool to work.
lang="zh-CN">
7. You can notify IE to take the latest supported mode.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
8. Character encoding: This real experience I have encountered the mobile phone end of garbled state, and then I save the encoding method to Utf-8+bom on the fix.
<meta charset="UTF-8">
9. Practical for the king, to streamline the complexity of the label.
10. When using Boolean values: The XHTML specification requires that it be assigned, but the HTML5 specification does not.
11. Iterative and refactoring required to reduce the number of parent tags eg:
class="avatar"> src="..."></span>YES：class="avatar" src="...">
12. Tags generated by JavaScript make content difficult to find, edit, and degrade performance. Avoid as much as you can avoid. such as adding child nodes and so on (. appendchild)
13.
1). When grouping selectors, separate selectors are placed on a single line.
2). For readability of the code, add a space before the left curly brace of each declaration block.
3). The closing curly brackets of the declaration block should be taken separately.
4). : a space should be inserted after each declaration statement.
5). For a more accurate error report, each statement should be exclusive to one line.
6). All declaration statements should end with a semicolon. The semicolon after the last declaration statement is optional, but if you omit the semicolon, your code may be more prone to errors.
7). For comma-separated attribute values, you should insert a space after each comma (for example, box-shadow ).
8). Do not rgb() rgba() hsl() hsla() Insert Spaces After,,, or rect() inside a value's comma. This makes it easy to distinguish multiple color values (with commas and no spaces) from multiple attribute values (plus commas and spaces).
9). For a property value or a color parameter, omit 0 (for example, instead of a decimal) that is less than 1 .5 0.5 -.5px -0.5px .
10). 16 binary values should all be lowercase, for example, #fff . When you scan a document, lowercase characters are easy to distinguish because their form is easier to distinguish.
11). Try to use shorthand hexadecimal values, for example, #fff instead #ffffff .
12). Add double quotation marks to the attributes in the selector, for example, input[type="text"] . However, for code consistency, it is recommended that you add double quotes.
13). Avoid specifying units for 0 values, for example, margin: 0; substitutingmargin: 0px
The order within 14.CSS is also fastidious: bit, box, inside, box, mixed.
where "bit", that is, location-related information. eg
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;
"Box", the information that you make the box look like. eg
display: block; float: right; width: 100px; height: 100px;
"Inside", that is, the attributes of some elements inside your box, such as text size, font color, High Line, eg:
display: block; float: right; width: 100px; height: 100px;
"Box" that is the background + border (excuse me this place only knows the background and the frame line in this order degree inside ...) ) Eg:
background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px;
"Mixed" is very simple, such as transparency, grayscale, and the least commonly used glass effect, such as the increase of visual effects of some things, eg:
-webkit-filter: Blur (tenpx);
opacity: 0.8;
The <link> label is @import much faster than the instruction, @import not only increases the number of additional requests, but also causes unforeseen problems.
Using multiple <link> elements
Compile multiple CSS files into a single file by using a CSS preprocessor similar to Sass or less
CSS file merging provided through Rails, Jekyll, or other systems
16. Prefixed attributes, it is desirable to indent the values of each property in the vertical direction of the eg:
-webkit-box -shadow: 0 1px 2px rgba (0,0,< Span class= "M" >0,. 15); box-shadow: 0 1px 2px rgba (0,0 ,0,. 15
It is recommended to put the statement on the same line for readability and for quick editing, with only one declared style. For styles with multiple declarations, you should also divide the declaration into multiple lines. eg
.icon { background-position: 0 0; }.icon-home { background-position: 0 -20px; }.icon-account { background-position: 0 -40px; }
18. In most cases, you do not need to specify all values for the shorthand property declaration. eg
no:margin:0 0 20px;
yes:margin-bottom:20px;
19. When the parent element is the same, it is advisable to nest child elements under the same parent element, eg:
. Table>thead > tr > th {}.table > thead > tr > TD { ... }
.table > thead Span class= "o" >> tr {> th { } > TD { ... }} /span> 20. About/* * * * The comment does not simply describe the content of the selector, it should be able to communicate the relationship between the context and the code purpose
21st.
1). Only lowercase characters and dashes (Dashe) (not underscores, not hump naming) can appear in class names. Dashes should be used for naming the relevant class (similar to namespaces) (for example, .btn and .btn-danger ).
2). Avoid excessive and arbitrary abbreviations. .btnrepresents a button, but .s cannot express any meaning.
3). Class names should be as short as possible and of a clear meaning.
4). Use a meaningful name. Use an organized or purposeful name, and do not use the name of the representation (presentational).
5). Prefix the new class based on the nearest parent class or base class.
6). Use .js-* class to identify the behavior (as opposed to the style), and do not include these classes in the CSS file.
22. The selector should be as short as possible and limit the number of elements that make up the selector, not more than 3.
23.
When you save the file, remove the trailing white space character.
Set the file encoding to UTF-8.
Add a blank line at the end of the file.
"Reference: The Great Gods and Bootstrap code specification explained"
About HTML and CSS authoring specifications
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
