Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil

Die Bedeutung der Schreibreihenfolge

Reduzieren Sie den Browser-Reflow und verbessern Sie die DOM-Leistung des Browser-Renderings

①: Analysieren Sie HTML, um einen DOM-Baum zu erstellen, analysieren Sie CSS, um einen CSS-Baum zu erstellen: Analysieren Sie HTML in eine baumförmige Datenstruktur, analysieren Sie CSS in eine baumförmige Datenstruktur

②: Renderbaum erstellen: Der Renderbaum wird gebildet, nachdem der DOM-Baum und der CSS-Baum zusammengeführt wurden.

③: Layout-Renderbaum: Mit dem Renderbaum kennt der Browser bereits die Knoten auf diesen Webseiten, die CSS-Definition jedes Knotens und ihre untergeordneten Beziehungen, sodass er die Position jedes Knotens auf dem Bildschirm berechnen kann.

④: Renderbaum zeichnen: Gemäß den berechneten Regeln wird der Inhalt über die Grafikkarte auf dem Bildschirm gezeichnet.

Die Analyse des CSS-Stils zur Anzeige auf dem Browserbildschirm erfolgt in den Schritten ②③④ . Es ist ersichtlich, dass der Browser nicht sofort nach dem Abrufen des CSS-Stils mit der Analyse beginnt, sondern den Renderstil entsprechend der Struktur des DOM-Baums entsprechend der Schreibreihenfolge des CSS-Stils verteilt, Schritt ② abschließt und dann beginnt, den CSS-Stil jedes Baumknotens zur Analyse zu durchlaufen. Zu diesem Zeitpunkt entspricht die Durchlaufreihenfolge des CSS-Stils vollständig der vorherigen Schreibreihenfolge.

Priorität zuerst – Positionierungsattribute:

{
      „display“ gibt den Boxtyp an, den ein Element generieren soll.
      Die Positionspositionierung gibt den Positionierungstyp eines Elements an.
      float Gibt an, ob die Box schweben soll.
      links     
      Spitze  
      Rechts  
      unten   
      Überlauf gibt an, was passiert, wenn Inhalt über die Box des Elements hinausläuft.
      clear Löscht die Stapelreihenfolge des Z-Index-Set-Elements.
      Inhaltslistenstil  
          Sichtbarkeit Sichtbarkeit/Anzeige}

Priorität 2 - Eigene Attribute:

{
     Breite
     Höhe
     Grenze
     Polsterung    
     Marge   
     Hintergrund
}

Priorität 3 – Textstil:

{
        Schriftfamilie   
        Schriftgröße   
        Schriftstil: Gibt den Schriftstil des Textes an.
        Schriftstärke   
        font-variant Gibt an, ob Text in Kapitälchen-Schriftfarbe angezeigt werden soll   
   }

Priorität 4 – Textattribute:

{
        text-align gibt die horizontale Ausrichtung des Textes an.
        vertical-align Legt die vertikale Ausrichtung eines Elements fest.
        Textumbruch gibt die Zeilenumbruchregeln für Text an.
        Texttransformation steuert die Groß-/Kleinschreibung des Textes.
        text-indent gibt den Einzug der ersten Zeile eines Textblocks an.
        Textdekoration: Gibt Dekorationen an, die dem Text hinzugefügt werden sollen.
        letter-spacing legt den Zeichenabstand fest.
        word-spacing legt den Wortabstand fest.
        Leerzeichen Gibt an, wie Leerzeichen innerhalb eines Elements behandelt werden.
        Textüberlauf gibt an, was passiert, wenn Text das enthaltene Element überschreitet.
   }

Priorität 5 – Neue Attribute in CC3 hinzugefügt:

{  
         Box-Shadow fügt einer Box einen oder mehrere Schatten hinzu.
         Cursor Gibt den Typ (die Form) des anzuzeigenden Cursors an.
         Randradius  
         Hintergrund: linearer Farbverlauf
         Transformieren ... Wendet eine 2D- oder 3D-Transformation auf ein Element an.
   }

Namenskonventionen für CSS-Code

• Der Selektorname muss mit einem Buchstaben beginnen, um die Kompatibilität in allen Browsern sicherzustellen.
• Einbuchstabige Klassenselektoren sind nicht zulässig.
• Es ist nicht gestattet, das Modul mit englischen Wörtern wie „ad“, „adv“, „adver“ oder „advertising“ zu benennen, um zu verhindern, dass das Modul vom Browser als Spam herausgefiltert wird. Dies gilt für alle Dateibenennungen.
• Unterstriche '_' sind in Klassennamen nicht zulässig. Es sollten ausschließlich Kleinbuchstaben verwendet werden. Verwenden Sie Bindestriche '-'.
• Camel-Case-Klassenname nicht zulassen
• Der Name ist klar

Hinweise zum CSS-Code

• Verwenden Sie keine Tags als Selektoren, die keine semantische Bedeutung haben, da dies zu einer großflächigen Verschmutzung führt.
• Abgekürzter CSS-Farbeigenschaftswert
• Entfernen Sie CSS-Eigenschaftswerte, die 0 sind
• Löschen Sie nutzlose CSS-Stile
• Beginnen Sie eine neue Zeile für einen einzelnen CSS-Selektor oder eine neue Deklaration
• Vermeiden Sie zu viele Abkürzungen. .ico reicht aus, um anzuzeigen, dass es sich um ein Symbol handelt, während .i nichts bedeutet.
• Verwenden Sie aussagekräftige Namen, verwenden Sie strukturelle oder zweckbezogene Namen anstelle abstrakter Namen

Zusammenfassen

Dies ist das Ende dieses Artikels über Schreibreihenfolge und Benennungsstandards im CSS-Stil. Weitere relevante Befehlsstandards für die Schreibreihenfolge von CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!