Home > Developer > Web Develop
When writing CSS, there are also some coding specifications, usually pay attention to these basic specifications, can make the code easier to read and maintain.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title> <style> /*syntax with two spaces instead of tabs (tab)-This is the only way to ensure consistent presentation in all environments. When grouping selectors, separate selectors are placed on a single line. For readability of the code, add a space before the left curly brace of each declaration block. The closing curly brackets of the declaration block should be taken separately. After each declaration statement, insert a space. For a more accurate error report, each statement should be exclusive to one line. 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. For comma-separated attribute values, you should insert a space after each comma (for example, Box-shadow). Do not insert a space after a comma inside the RGB (), Rgba (), HSL (), Hsla (), or rect () values. This makes it easy to distinguish multiple color values (with commas and no spaces) from multiple attribute values (plus commas and spaces). For attribute values or color parameters, omit 0 (for example,. 5 instead of 0.5;-.5px instead of -0.5px) in front of decimals less than 1. Hexadecimal 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. Try to use shorthand hexadecimal values, for example, #fff instead of #ffffff. Add double quotes for the attributes in the selector, for example, input[type= "text"]. Only in some cases is optional, but for code consistency, it is recommended that you add double quotes. Avoid specifying units for 0 values, for example, with margin:0; instead of margin:0px;. */ /*Bad CSS*/. 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} /*Good CSS*/. Selector,. Selector-secondary,. selector[type= "text"]{padding:15px;Margin-bottom:15px;Background-color:rgba (0, 0, 0,. 5);Box-shadow:0 1px 2px #ccc, inset 0 1px 0 #fff; } /*declaration order-related attribute declarations should be grouped in the following order: Positioning Box Model typographic Visual due to positioning (posi tioning) can remove elements from the normal flow of documents, and can also override the box model-related styles, so it is 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. */. Declaration-order{ /*positioning*/position:Absolute;Top:0; Right:0;Bottom:0; Left:0;Z-index: -; /*Box-model*/Display:Block;float: Right;width:100px;Height:100px; /*Typography*/Font:normal 13px "Helvetica Neue", 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; } </style> <!--do not use @import compared to <link> tags, @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 through Rails, Jekyll, or other systems - <!--Use link elements - <Linkrel= "stylesheet"href= "Core.css"> <!--Avoid @imports - <style>@import url ("More.css"); </style> <!--only lowercase characters and dashes (Dashe) (not underscores, nor hump naming) can appear in class name class names. Dashes should be used to name the relevant class (similar to namespaces) (for example,. btn and. Btn-danger). Avoid excessive arbitrary shorthand: btn represents a button, but. s cannot express any meaning. The 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. - <style> /*Bad example*/. T{ ... }. Red{ ... }. Header{ ... } /*Good Example*/. Tweet{ ... }. Important{ ... }. Tweet-header{ ... } </style></Head><Body></Body></HTML>
CSS Coding Specification
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
