CSS style writing order and naming standard and matters needing attention

Time:2021-4-6

The significance of writing order

Reduce browser reflow and improve the performance of browser rendering DOM

①:Parsing HTML to build DOM tree, parsing CSS to build CSS tree: parsing HTML into tree data structure, parsing CSS into tree data structure

②:Build render tree: a render tree formed by the combination of DOM tree and CSS tree.

③:Layout render tree: with the render tree, the browser already knows which nodes are in those pages, the CSS definition of each node and their affiliation, so as to calculate the position of each node in the screen.

④:Draw render tree: according to the calculated rules, draw the content on the screen through the graphics card.

CSS style parsing to the browser screen occurs in②③④Step 1. It can be seen that the browser does not start parsing as soon as it gets the CSS style, but distributes the render style according to the DOM tree structure according to the writing order of the CSS style, and completes the second stepStep, and then start to traverse the CSS style of each tree node for parsing. At this time, the traversal order of the CSS style is completely in accordance with the previous writing order.

Priority first – positioning attribute:

{
      Display specifies the type of box the element should generate.
      Position positioning specifies the positioning type of the element.
      Float specifies whether the box should float.
      left     
      top  
      right  
      bottom   
      Overflow specifies what happens when content overflows the element box.
      Clear clear
      Z-index sets the stacking order of elements.
      Content content
          list-style  
          Visibility / display
 }

The second priority is its own attribute


{
     width
     height
     border
     padding    
     margin   
     background
}

The third priority is text style

{
        font-family   
        font-size   
        Font style specifies the font style of the text.
        font-weight   
        Font variant specifies whether to display text in small capital letters
        color   
   }

Priority 4 — text attribute:

{
        Text align specifies the horizontal alignment of the text.
        Vertical align sets the vertical alignment of elements.
        Text wrap specifies the rules for wrapping text.
        Text transform controls the case of text.
        Text indent specifies the indent of the first line of a text block.
        Text decoration specifies the decoration effect added to the text.
        Letter spacing sets the character spacing.
        Word spacing sets the word spacing.
        White space specifies how to handle white space in an element.
        Text overflow specifies what happens when a text overflow contains an element.
   }

Priority 5: new attributes in CC3:

{  
         Box shadow adds one or more shadows to a box.
         Cursor specifies the type (shape) of cursor to display.
         border-radius  
         background:linear-gradient
         transform……        Applies a 2D or 3D transformation to an element.
   }

Naming rules of CSS code

  • The selector must be named at the beginning of a letter to ensure compatibility in all browsers;
  • Class selector of single letter is not allowed;
  • It is not allowed to name English words with advertisement, such as ad, adv, adv, advertising, which has prevented the module from being filtered out by the browser as spam advertisement. This is the name of any file.
  • Underline It is forbidden to appear in class naming, all lowercase, and use ‘-‘ hyphen
  • No hump naming classname
  • See the name and know the meaning

CSS code considerations

  • Don’t use tags with no semantics as selectors, which will cause a large area of pollution
  • Short CSS color property values
  • Remove units with CSS property value 0
  • Remove useless CSS Styles
  • Open a new line for a single CSS selector or new declaration
  • Avoid over shorthand. ICO is enough to indicate that this is an icon, while. I does not mean anything
  • Use meaningful names. Use structured or target related names instead of abstract ones

summary

I hope you can continue to search for the order of CSS development in the following articles!