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.

15 Android und iOS Bluetooth-Spiele zum Ausprobieren - Best of

Es gibt Hunderte von Online- Multiplayer-Spielen, in denen Sie mit Fremden spielen, aber wenn Sie ein solches Spiel mit Familie oder Freunden spielen möchten, dann sind Bluetooth-Spiele die beste Wahl. Mit Bluetooth-basierten Spielen können Sie sich mit dem Telefon Ihres Freundes verbinden, um gegeneinander zu spielen oder einer Allianz in Echtzeit beizutreten.W

(Tech- und Design-Tipps)

Frische Ressource für Webentwickler - Januar 2018

Das neue Jahr 2018 ist da. Wenn wir uns die Fortschritte bei der Webentwicklung vor fünf Jahren ansehen, ist das völlig anders als heute. Heute gibt es neue Methoden, Tools und sogar ein ganz neues Paradigma, das die Art verändert, wie wir heute Websites erstellen - und VirtualDOM ist einer davon.DO

(Tech- und Design-Tipps)