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.

Diese Website bietet großartige Produktdesign-Ressourcen an einem Ort

Ob Sie digitale Apps oder Websites oder gar technische Produkte entwerfen, der Begriff "Produktdesigner" kann für fast alles gelten.Produktdesign kann auf viele Arten beschrieben werden, aber die meisten UI / UX-Jobs überlappen sich in einem ähnlichen Bereich. Wenn Sie mehr über die Produktdesign-Welt erfahren möchten, empfehle ich Ihnen, mit Product Disrupt zu beginnen .Es i

(Tech- und Design-Tipps)

Machen Sie alle eingebetteten Inhalte mit Reframe.js Responsive

Der schwierigste Teil beim Einbetten von Videos ist, dass die Breite und Höhe korrekt sind. Diese Zahlen definieren das Seitenverhältnis und wenn sie ausgeschaltet sind, erhalten Sie einen wackeligen Videoplayer .Dies gilt für alle eingebetteten Elemente wie Iframes und Social Media-Widgets. Und diese Dinge können mit Responsive Design noch kniffliger sein, weil sie normalerweise keine reagierenden Elemente sind .Mit

(Tech- und Design-Tipps)