5 Steps to Write Better CSS Teil II
Dies ist der zweite Teil 5 Steps to Write Better CSS. Es gibt eine Vielzahl von CSS Tutorials sind im Internet verfügbar, aber die paar Tutorials sind nützlich. In diesem Tutorial werden Sie 5 Schritte zum Brennen von besseren CSS-Code für Ihr nächstes Projekt-Website zu finden. Ich hoffe, Sie werden dieses Tutorial zu genießen.
1. Halten Sie CSS-Deklarationen in einer Zeile
sollten Sie stets CSS-Deklarationen in einer Zeile, es hilft im Einklang CSS-Datei zu bereinigen und kleiner. Es hilft auch, um unerwünschte Leerzeichen und Zeichen zu entfernen.
Guter Code
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # CCCCCC;)
Bad Code
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333333; background: # CCCCCC;)
2. Kombinieren Sie Elemente
Einer der beste Weg, um Codezeilen retten, ist bei der Zusammenfassung von Selektoren. Es gibt einige Beispiele unten, was ich meine.
Guter Code
h1, h2, h3 ( ; color : # 333 ; font-family: Arial, Helvetica, sans-serif; color: # 333; )
Bad Code
: Arial, Helvetica, sans-serif ; color : # 333 ; } h2 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h3 { font-family : Arial, Helvetica, sans-serif ; color : # 333 ; } h1 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h2 (font-family: Arial, Helvetica, sans-serif; color: # 333;) h3 (font-family: Arial, Helvetica, sans-serif; color: # 333;)
3. Verwenden Sie "Margin to Center Layout
Viele Anfänger bis zum CSS nicht herausfinden können, warum Sie nicht einfach verwenden können, float: center zentriert, dass Auswirkungen auf Block-Level Elemente zu erreichen. Wenn es nur so einfach wäre! Leider müssen Sie zu verwenden.
Code
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * oben, unten - und nach links, rechts * / Breite: xxxpx; )
4. Kommentieren Sie CSS
Es ist eine gute Idee, Ihren Code in den Abschnitten Stellung zu nehmen. Um einen Kommentar hinzuzufügen, fügen Sie einfach / * hinter den Kommentar, und * / um es zu schließen, etwa so:
Code
/******** CODE START HIER ********/
5. Verwenden Sie CSS Compress Tools
Wenn Sie nicht möchten, dass Ihre Zeit bei der Änderung Ihrer alten Style Sheets können Sie einfach online css komprimieren Werkzeuge Abfälle machen Ihre Arbeit in Sekunden.
Aktivieren Sie dieses Online-CSS-Tools zu komprimieren ...
Css Tidy
Sauberkeit Css
Css-Optimierungstool
Flumpcakes Css Optimierer
cssdrive Css Comperasor
W3C CSS Validator
Fazit
Dies sind nur einige der Tipps, die mir helfen, um besseren Code zu schreiben. Ich hoffe, dass auch Tutorial wird Ihnen helfen, besser schreiben und sauberen Code. Wenden Sie diese Tipps, um Ihre aktuellen und kommenden Projekte, und Sie werden sicherlich die Bemühungen.
Wenn Sie glauben, dass Tutorial mehr besser werden kann, bitte mit uns teilen. Comment us
Wenn Sie möchten weitere Tutorials von uns erhalten, prüfen Sie bitte abonnieren Sie unseren Feed von RSS-oder E-Mail.
Werbung für uns
In Verbindung stehende Artikel:
Wenn Sie genossen diesen Artikel lesen, schauen Sie bitte auf ähnliche Artikel unter:
Revell sagt am: 27. November 2009 um 9:05 Said:
Hallo,
Vor allem, schöne Artikel! Es gibt nicht viele Artikel, die Schreibweise von CSS-Adresse. Ich habe einige Gedanken auf den ersten Punkt though. Meiner Meinung nach ist es besser, die lange Schreibweise verwenden, während der Entwicklung und haben ein Skript "Verkleinern" Ihr CSS wenn man ihn auf einer Live-Umgebung.
Dave sagt am: 27. November 2009 um 10:06 Said:
Ich stimme überhaupt nicht mit der Nummer 1. Wenn Sie 3 Erklärungen, 1 Zeile Code zu bekommen ist groß, aber wenn es 6 oder 7, wird es wirklich schwer zu lesen.
Alles, was zu retten vielleicht 1KB? I don't get it.
Andere als die eine, einige Ideen, die hier anständig.
Dave's Blog .. letzten 2 weitere must-have "CMS ermöglicht Plugins für WordPress
Nicolo 'Fasce sagt am: 27. November 2009 um 10:34 Said:
Ich stimme mit Dave, ist der Punkt 1 falsch ist, einfach deshalb, weil, wenn Sie arbeiten in einem Team ist es sehr schwierig, eine Zeile Code zu lesen.
Außerdem sollten Sie den Code schreiben, in alphabetischer Reihenfolge für den gleichen Zweck.
EJ Semeijn sagt am: 27. November 2009 um 10:57 Said:
Warum halten wir diese Tipps Beitrag? Internet ist bereits voll von diesen Grundlagen Tipps. Und ich stimme auch nicht mit # 1. Es ist nicht Ihr Code leichter zu verstehen, es macht es nur schwieriger.
Meine Tipps wären, um die Seite in Ihrem CSS-Struktur gebracht, Profile für RESET, Überschriften, Formulare, HTML-Elemente, Schriften etc. Auf diese Weise machen Sie Ihre CSS wird es leichter zu verstehen.
safetycopy sagt am: 27. November 2009 at 9:38 pm Said:
Ich stimme mit den Bemerkungen, mehrere andere Menschen - Nummer 1 ist Beispiel für eine schlechte Code ist nicht schlecht Code - es ist nur eine alternative Stil. Dieser Beitrag wäre nur dann sinnvoll, Neulinge abgeschlossen und wir wollen nicht zu starten und lehrt sie schlechte Annahmen schon!
safetycopy die letzten Blog .. Foto
Josh sagt am: 29. November 2009 um 4:38 Said:
Ich all diese mit Ausnahme des letzten. Ich finde es nicht sinnvoll, meine css komprimieren, aber im Gegensatz zu allen bisher von Lesern ich stark von Punkt 1 zu vereinbaren. Ich begann gerade schreibe meine CSS in einer Zeile und es war enorm. Das Scrolling ist weit reduziert. Ich denke, das ist eine persönliche Präferenz. Etwas, was hilft, ist, dass der Editor verwende ich den Code bettet sich in die nächste Zeile, so gibt es kein horizontales Scrollen.
Josh die letzten Blog .. Addicted to Flickr
FAQPAL sagt am: 29. November 2009 at 4:06 pm Said:
Gute Tipps für Anfänger, weiß ich nicht minify meine CSS entweder, vielleicht ein viel größeres Projekt würde von minifying profitieren, doch der durchschnittliche Website nicht wirklich brauchen.
Soweit # 1 geht, glaube ich, die Formulierung ist es, was Menschen werfen ab, anstatt zu sagen, "Bad Code", wie es vielleicht safetycopy sagen sollte vorgeschlagen hat, "Alternate-Code".
FAQPAL die letzten Blog .. Bubble-Effekt mit CSS
favSHARE sagt am: 30. November 2009 at 12:49 am Said:
Dieser Artikel wurde am favSHARE.net geteilt. Go and vote it!
favSHARE die letzten Blog-.. 25 Web-Layout Tutorials
Jean-Patrick Smith sagt am: 11. Dezember 2009 um 11:15 Said:
Erzeuge ich üblicherweise eine PHP Datei, die alle meine CSS-Dateien enthält, minifies, und fügt hinzu, Komprimierung + Ablauf-Header.
Auf diese Weise habe ich nicht mit Nummer # 1 zu vereinbaren ...
Was ist wichtiger als alle Ihre CSS in einer Zeile reduziert die Anzahl der HTTP-Anrufe mit CSS-Sprites und kombiniert alle CSS / JS in einer einzigen Datei.