Sortieren und Organisieren von CSS mit CSSCOMB

Im Vergleich zu anderen webbezogenen Sprachen ist CSS relativ einfach und leicht zu schreiben . Gleichzeitig ist es aber auch schwierig zu organisieren, insbesondere wenn es sich um Codes handelt, die aus Tausenden von Zeilen bestehen.

Es wäre großartig, wenn wir in der Lage wären, CSS zu organisieren und es anderen Entwicklern einfacher zu machen, die Codes zu lesen und zu pflegen - was nützlich ist, wenn Sie in einem Team arbeiten.

In diesem Beitrag zeigen wir Ihnen, wie Sie CSS mithilfe eines Tools namens CSSCOMB sortieren und organisieren . Sehen wir uns zunächst ein kurzes Beispiel für die CSS-Eigenschaftsreihenfolge an.

Technisch gesehen hat CSS keine Einschränkungen, wenn es um die Bestellung von Eigenschaften geht. Das folgende Beispiel ...

 .class {Hintergrundfarbe: # f3f3f3; Breite: 100px; Höhe: 100px; Schriftfarbe: # 000; } 

... wird das gleiche Ergebnis wie folgt ausgeben:

 .class {Breite: 100px; Schriftfarbe: # 000; Hintergrundfarbe: # f3f3f3; Höhe: 100px; } 

Aber wie bereits erwähnt, hilft die Organisation Ihren Teamkameraden, Ihre Codes einfach zu verwalten. Das Sortieren von CSS-Codes erfordert jedoch viel Ausschneiden und Einfügen und Überlegungen, wie Sie es bestellen. Und hier kommt CSSCOMB zum Einsatz.

Wie benutze ich CSSCOMB

CSSCOMB ist ein Sortierprogramm für CSS, das von Slava Oliyanchuk erstellt wird . CSSComb unterstützt CSS2 bis CSS4 und ist in vielen gängigen Code-Editoren wie TextMate, Coda, Notepad ++ und Sublime Text als Plugin oder Erweiterung verfügbar.

Wenn Sie Sublime Text verwenden, kann CSSCOMB einfach über die Paketsteuerung installiert werden. Nach der Installation können Sie die CSS-Eigenschaften auf verschiedene Arten sortieren:

• Drücken Sie die Standardtastenkombination: Umschalt + Strg + C.
• Klicken Sie mit der rechten Maustaste und wählen Sie: Sortieren über CSSCOMB- Option.
• Öffnen Sie die Befehlspalette - Befehl + Umschalttaste + P und wählen Sie Sortieren über CSSComb .

In diesem Beispiel haben wir die folgende Stilregel.

 .class {padding-top: 1px; Rand links: 1px solid #fff; -moz-box-shadow: 0 0 1px 0 # 000; -webkit-box-shadow: 0 0 1px 0 # 000; Box-Schatten: 0 0 1px 0 # 000; Rand rechts: 1px solid #fff; Höhe: 23px; padding-bottom: 10px; Hintergrundfarbe: #fff; } 

Die obige Stilregel funktioniert, und es ist nichts falsch daran, außer dass es ein wenig unorganisiert ist. Nach dem Ausführen von CSSCOMB werden die Eigenschaften nun in der folgenden Reihenfolge sortiert.

 .site-Header> .container {padding-top: 1px; padding-bottom: 10px; Höhe: 23px; Rand rechts: 1px solid #fff; Rand links: 1px solid #fff; Hintergrundfarbe: #fff; -webkit-box-shadow: 0 0 1px 0 # 000; -moz-box-shadow: 0 0 1px 0 # 000; Box-Schatten: 0 0 1px 0 # 000; } 

Oben ist die Standard-Sortierregel in CSSComb, aber wenn Sie sie nicht so bestellen möchten, können Sie die Reihenfolge anpassen, indem Sie im Menü Einstellungen> Paketeinstellung> CSSComb eine neue Sortierreihenfolge unter Sortierreihenfolge festlegen - Benutzer .

Hinweis : Wenn Sie einen Code-Editor verwenden, der nicht über die Erweiterung oder das Plugin verfügt, ist CSSCOMB auch als Webtool verfügbar.

Make-up-Magie, die Sie in Ehrfurcht lässt

Ein bisschen Make-up kann einen langen Weg gehen, wenn es darum geht, das Aussehen eines Menschen zu verändern. Manche Mädchen benutzen es, um ihre Makel zu verbergen, während andere es als eine Form des Selbstausdrucks benutzen. Laura Jenkinson, die aus Großbritannien kommt, ist eine Maskenbildnerin, die es auf ein ganz anderes Level bringt. Wi

(Tech- und Design-Tipps)

Entschlüsselung des seltsamen Falles, wie japanisches Webdesign funktioniert [Op-Ed]

Japan, Heimat einer großartigen Ästhetik und Vorreiter des Minimalismus; Von der Mode bis zur Architektur scheinen sie alles herausgefunden zu haben. Ich mag japanische Anime und Manga besonders gern. Die Art und Weise, wie sie Storytelling und Kunst kombinieren, hat für immer die Art und Weise geprägt, wie ich meine eigenen Geschichten erzählen möchte.Ihre

(Tech- und Design-Tipps)