Zusammenfassung von CSS-Techniken wie CSS-Kommentare, Benennung, Vererbung, Stilreihenfolge_Erfahrungsaustausch

1. Über Kommentare

Beim Erstellen einer XHTML+CSS-Website sind Kommentare in CSS sehr wichtig. Beim Erstellen von CSS-Stilen sollten Sie die Gewohnheit beibehalten, beiläufig zu kommentieren. Im Allgemeinen bin ich es gewohnt, Kommentare im Format „/* Kommentarinhalt */“ zu schreiben, da in Editoren mit Hervorhebungsfunktionen wie EditPlus das in der C-Sprache häufig verwendete „/***************/“ Kommentare verwendet wird wie diese sind bedeutungslos, und es besteht keine Notwendigkeit, viele bedeutungslose Inhalte als Trennung einzufügen. Dokumente mit Kommentaren dienen als ursprüngliche CSS-Dokumente der Website. Beim Veröffentlichen der Website können Sie ein CSS-Komprimierungstool verwenden, um das CSS zu komprimieren und Kommentare aus dem Ausgabe-CSS zu entfernen, um die Effizienz der Dateiübertragung zu verbessern.

2. Informationen zur Benennung

Bei der Benennung von CSS-Dateien bevorzuge ich die Verwendung semantisch korrekter englischer Namen oder Abkürzungen. Für ungewöhnliche Teile verwende ich möglicherweise teilweise Pinyin-Namen. Darüber hinaus verwende ich in einigen abhängigen Klassen möglicherweise einen Namen ähnlich wie „list_banner“, also den Namen des übergeordneten Elements plus „_“ plus den Namen des Elements.
Bezüglich der Namensgebung kann nach den Gewohnheiten der Teamgestalter ausgehandelt werden. Am besten fügen Sie jedoch nach dem Namen einen Kommentar hinzu, damit Sie eine Dokumentation zum späteren Nachschlagen erstellen können.

3. Über Vererbung

In CSS muss Vererbung sinnvoll genutzt werden. Beispielsweise definiert das übergeordnete Element in zwei verschachtelten Divs das Attribut „Hintergrundfarbe“ als Schwarz. Wenn der Hintergrund der untergeordneten Elemente ebenfalls schwarz ist, muss die Definition nicht wiederholt werden. Wenn Sie die CSS-Vererbung sinnvoll nutzen, können Sie Ihren Code effizienter und schlanker machen.

4. Bezüglich der Hierarchie von CSS-Definitionen

Bei der Definition von Klassen in CSS wird empfohlen, Anweisungen hierarchisch zu beschreiben.
Beispielstruktur:

Beispiel-Quellcode [www.52css.com]

Beispiel-CSS:

Beispiel-Quellcode [www.52css.com]
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
Im obigen Beispiel ist es aufgrund des Endeffekts nicht erforderlich, dass #menu wiederholt angezeigt wird. Wenn jedoch #menu vorangestellt werden kann, Dadurch wird das Dokument klarer und leichter lesbar.

5. Informationen zur Stilsortierung

Beim Entwerfen von CSS-Stylesheets schreiben wir Code meist von Hand, was leicht zu Verwirrung bei der Stilsortierung in Klassen führen kann. Beispielsweise verwenden mehrere Klassen Auffüllung, Rand, Hintergrund, Farbe und andere Stile. Beim Sortieren haben einige Klassen jedoch einen höheren Hintergrund und andere einen höheren Rand. Dies führt zu einer gewissen Verwirrung und kann Ihr Denken leicht frustrieren. Ich schlage vor, dass einzelne Designer oder Teamdesigner sich auf eine grobe Reihenfolge einigen, sodass es für jeden Einzelnen keinen großen Unterschied gibt, es aber insgesamt einfacher zu lesen und zu verwalten ist und die Gesamteffizienz erheblich verbessert wird.

Standardmäßig setze ich beispielsweise Breite, Höhe, Abstand, Rand, Rahmen usw. an den Anfang, gefolgt von Hintergrund, dann Schriftart, Farbe, Textausrichtung usw., die den Text steuern, und dann einige Elemente, die nur von speziellen Tags verwendet werden können, wie z. B. Listenstil usw., und schließlich CSS-Filter. Bei besonderen Situationen (z. B. der Priorität bestimmter zu definierender CSS-Eigenschaften) kann flexibel damit umgegangen werden.​