This is the 18th day of my participation in Gwen Challenge

CSS coding specification

grammar

  • Use soft tabs with 4 Spaces – This is the only way to make sure your code looks consistent across environments.
  • When using composite selectors, keep each individual selector on one row.
  • For legibility of code, add a space before the opening parenthesis of each declaration.
  • The closing bracket of the declaration block should start on a separate line.
  • Each declaration: should be followed by a space. Each statement should take only one line to ensure accurate error reporting.
  • All declarations should end with a semicolon. The semicolon after the last declaration is optional, but if it’s not, your code will be more prone to errors.
  • All comma-separated values should be followed by a space. Such as box – shadow
  • Do not add Spaces to color values RGB () rgba() HSL () hSLA () and rect(), and do not precede values with unnecessary 0’s (e.g., use.5 instead of 0.5)
  • All hexadecimal values should use lowercase letters, such as # FFF. Because lowercase letters have a greater variety of shapes, they can be more easily distinguished when browsing documents.
  • Use short hexadecimal values whenever possible, such as # FFF instead of # FFFFFF.
  • Add quotes to attribute values in selectors, such as input[type=”text”]. They are only optional in some cases, so using quotation marks for both adds consistency.
  • Don’t specify a unit for 0, such as margin: 0; Margin: 0px;
/* Bad CSS */ 
.selector..selector-secondary..selector[type=text] { 
    margin: 0px 0px 15px; 
    padding: 15px; 
    background-color: rgba(0.0.0.0.5); 
    box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF 
}
/* Good CSS */ 
.selector..selector-secondary, // Keep each individual selector occupied on one line.selector[type="text"]{// Add a space before the opening parenthesis of each declarationmargin-bottom: 15px; 
    padding: 15px; 
    background-color: rgba(0.0.0.5); // Do not add Spaces to the color valuesbox-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; // All hexadecimal values should be lowercase, using the shortest hexadecimal value possible} // The closing bracket of the declaration block should start on a separate lineCopy the code

Clear order (recommended) is not mandatory

  1. Positioning
  2. Box model
  3. Typographic layout
  4. The Visual appearance

Positioning comes first, as it can take an element out of the normal text flow and overwrite the style associated with the box model. The box model follows, as it determines the size and location of a component. The other attributes only work inside the component or have no effect on the results of the first two cases, so they come in second. Example:

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 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; 
}
Copy the code

Search the location

Try to locate media queries close to their relevant rules. Don’t put them together in a separate style file or throw them at the bottom of the document.

.element{... }.element-avatar{... }.element-selected{... }@media (min-width: 480px) { 
    .element { ...} 
    .element-avatar{... }.element-selected{... }}Copy the code

The selector

  • Use class instead of generic element tags to optimize rendering performance.
  • Avoid using property selectors in common components (for example, [class^=”…”]). ). Browser performance can be affected by these conditions.
  • Reduce the length of the selector and try to limit the number of entries per combinatorial selector to three.
  • Use descendant selectors only when necessary (for example, when prefixed classes are not used).

Example:

/* Bad example */ 
span{... }.page-container #stream .stream-item .tweet .tweet-header .username{... }.avatar{... }/* Good example */ 
.avatar{... }.tweet-header .username{... }.tweet .avatar{... }Copy the code