Standard-Benennungs-CSS

CSS3 wurde veröffentlicht und viele WEB-Front-End-Ingenieure haben begonnen, diese Technologie zu nutzen. Wie beurteilen wir die Fähigkeit, CSS zu schreiben? Wir werden nicht nach richtig oder falsch beurteilen. Wir verwenden möglicherweise Wörter wie „gut“, „durchschnittlich“, „schrecklich“. Was ist das Schwierigste an CSS? Ist es die Einfachheit und Effizienz des Codes? Der Front-End-Ingenieur Wu Zhi hat einmal gesagt: CSS ist keine schwierige Technologie, die Schwierigkeit liegt in der Standardisierung die Benennung. Das Projekt wird von Einzelpersonen abgeschlossen, und Ingenieure können das CSS nach ihren eigenen Gewohnheiten benennen. In der Teamarbeit kann eine unregelmäßige Benennung zu Konflikten führen und somit den Fortschritt des gesamten Projekts beeinträchtigen. Im Folgenden zeigt Ihnen Lingnan Network Schritt für Schritt, wie Sie CSS auf standardisierte Weise benennen.

Es gibt viele Möglichkeiten, CSS zu unterteilen, z. B. nach Funktion: Speichern Sie das CSS der Schriftart in „font.css“, speichern Sie das CSS, das die Farbe steuert, in „color.css“ und speichern Sie das CSS, das das Layout steuert layout.css ; Oder geteilt durch Block: Speichern Sie das Header-CSS in header.css; speichern Sie die Seitenleiste in sidebar.css; speichern Sie das Theme in main.css. Unterschiedliche Perspektiven haben ihre eigenen Vor- und Nachteile.

Lingnan Network empfiehlt eine CSS-Aufteilungsmethode: base.css+common.css+page.css. Alle Stile einer Website werden entsprechend ihrer Funktion in drei Kategorien unterteilt: Basis, Allgemein und Seite. Der endgültige Stilausdruck jeder Webseite wird durch diese drei vervollständigt.

Die Basisebene ist die unterste Ebene, von der der Seitenstil der Website abhängt. Sie ist relativ stabil und erfordert keine Wartung. Im Allgemeinen speichern wir die folgenden Inhalte in base.css.

　/*css reset Da jeder Browser Standardwerte für einige Tag-Attribute hat, ist es notwendig, einige Tag-Attribute einheitlich festzulegen*/

body,div,dl,dt ,dd ,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0; 🎜>table{border-collapse:collapse;border-spacing:0;}
ol ul{list-style:none;}

/*Textlayout*/
.f12{ font- Größe: 12 Pixel; algin:left;}
.tc{text-algin:center;}
.tr{text-algin:right;}

/*length height*/
.w10 {width :10px;}
.h10{height:10px;}

/*margin*/
.m10{margin:10px;}
.ml10px{margin-left: 10px;}
.p10{padding:10px;}
.pr10{padding-right:10px;}
Die gemeinsame Ebene befindet sich in der mittleren Ebene und stellt CSS auf Komponentenebene bereit. Wir können die Elemente auf der Seite in kleine „Vorlagen“ mit relativ unabhängigen Funktionen und Stilen aufteilen. Einige dieser Vorlagen werden selten wiederholt, andere werden in großen Mengen wiederholt. Wir können eine große Anzahl wiederholter Stile aufteilen es im common.css-Stil. Wenn eine Website viele wiederholte Titel verwendet, können wir das so schreiben:

　.h2{font-size:14px;font-weight:bold;}

Die Seitenebene ist die Seitenebene Es wird empfohlen, das gesamte CSS der Seitenebene in page.css zu speichern. Kommentare können je nach Seite hinzugefügt und in Blöcken geschrieben werden, um die Wartung zu erleichtern. Zum Beispiel:

/*Über uns*/
.about-text{font-size:12px;}

/*Kontaktinformationen*/
.contact-text{ Schriftart -Größe: 14px;🎜> Die Basisschicht muss grundsätzlich nicht stark geändert werden. Der Seitenschichtcode kann also von mehreren Ingenieuren gemeinsam entwickelt werden kann Name verwenden, um Konflikte zu vermeiden. Die CSS-Benennung kann standardisiert werden als: Kamel-Benennung und Unterstreichungs-Benennung. Kamelnomenklatur: Schreiben Sie den ersten Buchstaben jedes Wortes groß, beginnend mit dem zweiten Wort. Wie zum Beispiel dropMenu, subNavMenu. Nomenklatur unterstreichen: durch Bindestrich getrennt – oder unterstreichen _, wie zum Beispiel drop-menu, sub_nav_menu.

Wenn das Projekt von mehreren Ingenieuren abgeschlossen wird, können wir jeder Person eine unabhängige Namens-ID zuweisen. Das Lingnan-Netzwerk heißt beispielsweise linknan. Wir können die beiden Buchstaben am Anfang des Namens als unabhängige Namens-ID zuweisen, z. B.: .ln-artice li. Dadurch werden Konflikte durch wiederholte Benennung vermieden.