CSS style writing order and naming conventions and precautions

The significance of writing order

Reduce browser reflow and improve browser rendering DOM performance

①: Parse HTML to build a DOM tree, parse CSS to build a CSS tree: parse HTML into a tree-shaped data structure, parse CSS into a tree-shaped data structure

②: Build the render tree: the render tree formed after the DOM tree and the CSS tree are merged.

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

④: Draw the render tree: According to the calculated rules, the content is drawn on the screen through the graphics card.

The parsing of CSS style to display on the browser screen occurs in steps ②③④ . It can be seen that the browser does not start parsing immediately after obtaining the CSS style, but distributes the render style according to the structure of the DOM tree according to the writing order of the CSS style, completes step ② , and then starts 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 attributes:

{
      display specifies the type of box that an element should generate.
      position Positioning specifies the positioning type of an element.
      float Specifies whether the box should float.
      left     
      top  
      right  
      bottom   
      overflow specifies what happens when content overflows the element's box.
      clear Clears the stacking order of the z-index set element.
      content list-style  
          visibility visibility/display}

Priority 2 - own attributes:

{
     width
     height
     border
     padding    
     margin   
     background
}

Priority 3 - 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 caps font color   
   }

Priority 4 - Text attributes:

{
        text-align specifies the horizontal alignment of text.
        vertical-align Sets the vertical alignment of an element.
        text-wrap specifies the line breaking rules for text.
        text-transform controls the case of text.
        text-indent specifies the indentation of the first line of a text block.
        text-decoration Specifies decorations to add to text.
        letter-spacing sets the character spacing.
        word-spacing sets the word spacing.
        white-space Specifies how whitespace within an element is handled.
        text-overflow specifies what happens when text overflows the containing element.
   }

Priority 5 - New attributes added in CC3:

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

CSS code naming conventions

• The selector name must start with a letter to ensure compatibility in all browsers;
• Single-letter class selectors are not allowed;
• It is not allowed to name the module with English words such as ad, adv, adver, advertising, so as to prevent the module from being filtered out as spam by the browser. This is the same for any file naming.
• Underscores '_' are not allowed in class names. All lowercase letters should be used. Use hyphens '-'.
• Disallow camel case className
• The name is clear

CSS Code Notes

• Do not use tags that have no semantic meaning as selectors, as this will cause large-scale pollution.
• Abbreviated CSS color property value
• Remove CSS property values ​​​​that are 0
• Delete useless CSS styles
• Start a new line for a single CSS selector or a new declaration
• Avoid over-abbreviation. .ico is enough to indicate that it is an icon, while .i does not mean anything.
• Use meaningful names, use structural or purpose-related names instead of abstract names

Summarize

This is the end of this article about CSS style writing order and naming standards. For more relevant CSS writing order command standards, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!