CSS sorteren en ordenen met CSSComb

In vergelijking met andere webgerelateerde talen is CSS relatief eenvoudig en gemakkelijk te schrijven . Maar tegelijkertijd is het ook moeilijk te organiseren, vooral als het gaat om codes die uit duizenden regels bestaan.

Het zou geweldig zijn als we CSS kunnen organiseren en het voor andere ontwikkelaars gemakkelijker kunnen maken om de codes te lezen en te onderhouden - wat handig is als je in een team werkt.

In dit bericht laten we je zien hoe je CSS kunt sorteren en organiseren met behulp van een tool genaamd CSSComb . Maar laten we eerst een kort voorbeeld van CSS-eigenschappenbestelling bekijken.

Technisch gezien heeft CSS geen beperkingen als het gaat om het bestellen van eigenschappen. Het volgende voorbeeld ...

 .klasse {achtergrondkleur: # f3f3f3; breedte: 100 px; hoogte: 100 px; font-kleur: # 000; } 

... geeft hetzelfde resultaat als het volgende:

 .class {width: 100px; font-kleur: # 000; achtergrondkleur: # f3f3f3; hoogte: 100 px; } 

Maar zoals we eerder al hebben vermeld, helpt organiseren om uw teamgenoten uw codes gemakkelijk te houden. Het sorteren van CSS-codes vereist echter veel knippen en plakken en gedachten over hoe je het moet bestellen. En dat is waar CSSComb van pas komt.

CSSComb gebruiken

CSSComb is een sorteerhulpprogramma voor CSS dat is gebouwd door Slava Oliyanchuk . CSSComb ondersteunt CSS2 tot CSS4 en is beschikbaar in veel populaire codebewerkers zoals TextMate, Coda, Notepad ++ en Sublime Text, als een plug-in of extensie.

Als u Sublime Text gebruikt, kan CSSComb eenvoudig worden geïnstalleerd via Package Control. Na de installatie kunt u de CSS-eigenschappen op verschillende manieren sorteren:

• Druk op de standaard toetscombinatie: Shift + Ctrl + C.
• Klik met de rechtermuisknop en selecteer: Sorteren via CSSComb- optie.
• Open Command Palet - Command + Shift + P en selecteer Sorteren via CSSComb .

In dit voorbeeld hebben we de volgende stijlregel.

 .class {padding-top: 1px; border-left: 1px solid #fff; -moz-box-shadow: 0 0 1px 0 # 000; -webkit-vak-schaduw: 0 0 1px 0 # 000; vakschaduw: 0 0 1px 0 # 000; border-right: 1px solid #fff; hoogte: 23 px; padding-bottom: 10px; achtergrondkleur: #fff; } 

De stijlregel hierboven werkt, en er is niets mis mee, behalve dat het een beetje ongeorganiseerd is. Nu, na het uitvoeren van CSSComb, worden de eigenschappen gesorteerd in de volgende volgorde.

 .site-header> .container {padding-top: 1px; padding-bottom: 10px; hoogte: 23 px; border-right: 1px solid #fff; border-left: 1px solid #fff; achtergrondkleur: #fff; -webkit-vak-schaduw: 0 0 1px 0 # 000; -moz-box-shadow: 0 0 1px 0 # 000; vakschaduw: 0 0 1px 0 # 000; } 

Hierboven staat de standaard bestelregel in CSSComb, maar als u het niet op deze manier wilt bestellen, kunt u de volgorde aanpassen door naar het menu Voorkeuren> Pakketinstelling> CSSComb te gaan en een nieuwe bestellingsregel in te stellen onder Sorteervolgorde - Gebruiker .

Opmerking : als u een code-editor gebruikt die geen extensie of plug-in heeft, is CSSComb ook beschikbaar als een webtool.

Top 9 gratis foto-collage-makers voor Windows 8.1

Fotocollages bestaan ​​al een tijdje, maar is een trend die terugkomt in een met selfie beladen tijdperk. De presentatie van meerdere foto's binnen hetzelfde frame om een ​​fusie van verhalen te communiceren, kan collages geweldig zijn om naar te kijken, maar moeilijk om handmatig te maken zonder de juiste hulpmiddelen.Het goe

(Technische en ontwerptips)

The Rise of Trolling & Decline of Online Etiquette

Of we het nu toegeven of niet, publiek menselijk gedrag wordt beïnvloed, ja, gedicteerd door bepaalde normen die beleefde, geciviliseerde samenleving als acceptabel beschouwt. We worden niet bang voor onschuldige opmerkingen van vreemden, we noemen elkaar geen afwijkende namen of harde obsceniteiten, en we volgen elkaar zeker niet meedogenloos om de kleinste kritiek te leveren over de nieuwste creatie of gedachte van het doelwit.

(Technische en ontwerptips)