Prinzipien für effizienten und sauberen CSS-Code (Teil 1)

CSS ist nicht schwer zu erlernen, aber in großen Projekten wird es schwierig, es zu verwalten. Vor allem, wenn verschiedene Leute leicht unterschiedliche CSS-Schreibstile haben, wird es für mich schwieriger, im Team zu kommunizieren Wir haben einige Möglichkeiten zusammengefasst, wie Sie dies erreichen können:

1. Verwenden Sie Reset, aber keinen globalen Reset.

Die Standardattribute verschiedener Browserelemente sind unterschiedlich Standardattribute von Browserelementen, um Browserkompatibilität zu erreichen. Es ist jedoch zu beachten, dass Sie bitte kein globales Zurücksetzen verwenden:

*{margin:0;padding:0 }

Dies liegt nicht nur daran, dass es sich um eine langsame und ineffiziente Methode handelt, sondern auch Außerdem werden dadurch auch die Ränder und der Abstand einiger unnötiger Elemente zurückgesetzt. Es wird empfohlen, sich auf die Praktiken von YUI Reset und Eric Meyer zu beziehen.

/**Klare Innen- und Außenränder **/

body, h1, h2, h3, h4, h5, h6, hr, p,

blockquote,/* Strukturelemente Strukturelemente*/

dl, dt, dd, ul, ol, li,/* Listenelemente Listenelemente*/

pre,/* Textformatierungselemente Text Formatelemente*/

Formular, Feldsatz, Legende, Schaltfläche, Eingabe, Textbereich,/* Formularelemente, Formularelemente*/

th, td,/* Tabellenelemente, Tabellenelemente*/

img/* img elements picture elements*/{

border:mediumnone;

margin:0;

padding:0;

}

/**Standardschriftart festlegen **/

body,button, input, select, textarea {

font:12px/1.5'宋体',tahoma, Srial, helvetica,sans-serif; >

/**Listenelemente zurücksetzen **/

ul, ol {list-style:none; }

/**Hyperlink-Element zurücksetzen **/

a {text-decoration:none;color:#333;}

a:hover {text-decoration:underline;color:#F40;🎜>

/**Bildelemente zurücksetzen **/

img{border:0px;}

/**Tabellenelemente zurücksetzen **/

table {border-collapse:collapse;border-spacing:0;🎜>

2. Gute Benennungsgewohnheiten

Zweifellos wird ein chaotischer oder unsemantisch benannter Code jeden in den Wahnsinn treiben. Wie dieser Code:

.aaabb{margin:2px;color:red;}

Ich denke, nicht einmal ein Anfänger würde eine Klasse wie diesen in einem tatsächlichen Projekt benennen dass ein solcher Code auch sehr problematisch ist:

Mein Name ist Wiky

Das Problem ist, wenn Sie alles ändern müssen Ändern Sie die ursprünglichen roten Schriftarten in Blau, dann lautet der Stil:

.red{color:bule;}

Eine solche Benennung wird sehr verwirrend sein. Es ist rätselhaft, dass dieselbe Seitenleiste den Namen .leftBar trägt wird sehr mühsam sein, wenn es in eine rechte Seitenleiste geändert werden muss. Bitte verwenden Sie daher nicht die Eigenschaften des Elements (Farbe, Position, Größe usw.), um eine Klasse oder ID zu benennen. Sie können aussagekräftige Namen wählen wie: #navigation{…}, .sidebar{…}, .postwrap {…}

Auf diese Weise wird die Verbindung zwischen ihnen und HTML-Elementen nicht beeinträchtigt, egal wie Sie die Stile ändern, die diese Klassen oder IDs definieren.

Einige feste Stile werden nach der Definition nicht mehr geändert. Dann müssen Sie sich bei der Benennung nicht um die gerade erwähnte Situation kümmern, z. B.

.alignleft{float:left;margin-right:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

. clear{clear:both;text-indent:-9999px;}

Also für so einen Absatz

Ich bin ein Absatz!

Wenn Sie diesen Absatz von der ursprünglichen linken Ausrichtung in eine rechte Ausrichtung ändern müssen, müssen Sie nur seinen Klassennamen in rechtsbündig ändern.

3. Codeabkürzung

CSS-Codeabkürzung kann die Geschwindigkeit beim Schreiben von Code verbessern und die Codemenge vereinfachen. Es gibt viele Eigenschaften, die in CSS abgekürzt werden können, darunter Rand, Abstand, Rahmen, Schriftart, Hintergrund und Farbwerte usw. Wenn Sie lernen, den Code abzukürzen, würde der Originalcode so aussehen:

li{

font-family:Arial,Helvetica,sans-serif;

font-size:1.2em;

line-height:1.4em ;

padding-top:5px;

padding-bottom:10px;

padding-left:5px;

}

kann abgekürzt werden als:

li{

Schriftart:1.2em/1.4emArial,Helvetica,sans-serif ;

padding:5px010px5px;

}

4. CSS-Vererbung verwenden Wenn Elemente denselben Stil verwenden, ist dies der Fall Definieren Sie am besten den gleichen Stil für ihre übergeordneten Elemente und lassen Sie sie diese CSS-Stile erben. Auf diese Weise können Sie Ihren Code gut pflegen und die Codemenge reduzieren. Dann sieht der ursprüngliche Code so aus:

#container li{font-family:Georgia,serif }

#container p{font-family:Georgia,serif ; }

#container h1{font-family:Georgia,serif; }

kann abgekürzt werden als:

#container {font-family:Georgia,serif; }

5. Mehrere Selektoren verwenden

Sie können mehrere CSS-Selektoren zu einem zusammenführen, wenn sie einen gemeinsamen Stil haben. Dadurch bleibt der Code nicht nur prägnant, sondern Sie sparen auch Zeit und Platz. Zum Beispiel:

h1{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

h2{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

h3{font-family:Arial,Helvetica,sans-serif;font-weight:normal; }

kann zusammengeführt werden :

h1, h2, h3{ Font-Family:Arial, Helvetica, Sans-Serif; Font-Weight:normal; Effizient und sauber Der Inhalt der CSS-Codeprinzipien (Teil 1). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!