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 kostenlose Tools zum Erstellen professioneller Resume

Verschiedene Menschen brauchen unterschiedliche Lebensläufe, in der Tat benötigt jede Person verschiedene Versionen seines eigenen Lebenslaufs für verschiedene Zwecke. Was normalerweise passiert, ist, dass Sie an einer Vorlage arbeiten, die Sie von einem Freund erhalten, und dann einen unprofessionellen Schwarz-Weiß- Lebenslauf erstellen , der Sie nicht repräsentiert, egal wie beeindruckend Ihr Profil tatsächlich ist.Wenn

(Tech- und Design-Tipps)

Top Rechnungs-und Buchhaltungsdienstleistungen für freiberufliche Designer

Freelancer meist meist wenige Jobs in der gleichen Zeit und der Client ist nicht der einzige Grund, dass ein Freiberufler verrückt fahren. Als Ihr eigener Chef verwalten Sie Ihre Arbeit und Sie sind leider auch Ihr eigener Buchhalter . Jedes Projekt wird unterschiedliche Gebühren in Rechnung stellen, die dazu führen, dass unterschiedliche Rechnungen oder Rechnungen auf Ihren Weg fliegen und das kann schmerzhaft chaotisch sein, wenn Sie es nicht richtig gemacht haben.Um

(Tech- und Design-Tipps)