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.

Hoe u uw werk krijgt (of niet) door de juiste klanten

Heb je je ooit afgevraagd waarom, zelfs nadat je alles "goed" hebt gedaan - een website hebben, door alle sociale media-kanalen circuleert - je niet zo veel opvalt als een ontwerper als je denkt dat je zou moeten zijn? Het heeft waarschijnlijk iets te maken met de aanpak die je hebt gebruikt om jezelf en je werk te promoten

(Technische en ontwerptips)

Hoe u webnavigatie kunt testen met kaartsortering en boomtesten

Websites, apps, software, elk product met een menu heeft een manier nodig om zich te verplaatsen. Hoewel uw navigatie leuk, creatief of soms onorthodox kan zijn, moet deze altijd eerst functioneel zijn. Bij het bespreken van bruikbaarheidstests voor informatiearchitectuur, hoort u vaak de twee meest effectieve tests: kaartsortering en boomtesten

(Technische en ontwerptips)