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.

UXmas - Een kerst adventskalender van UX ontwerpcontent

Het vakantieseizoen is altijd vol met familie, nieuwe gadgets en mobiele apps voor extra plezier.En nu hebben UX-ontwerpers iets meer te vieren met de UXmas adventskalender . Het telt de dagen die leiden naar 25 december af met een enorme kalender met nieuwe artikelen over gebruikerservaringen .De site wordt elk jaar bijgewerkt met nieuwe inhoud en bevat een groot aantal schrijvers

(Technische en ontwerptips)

Surface Studio: Microsoft's iMac Killer maakt zijn debuut

In de afgelopen paar weken is het een feit dat Microsoft bezig is met het voorbereiden van een All-in-One die tijdens het evenement debuteert. Vandaag hebben we eindelijk een glimp van het apparaat kunnen opvangen, en het is er eentje die op maat gemaakt is voor ontwerpers en makers. Het apparaat wordt de Surface Studio genoemd en het ziet er naar het uiterlijk van de iMac uit als een gebruikersbestand van de iMac

(Technische en ontwerptips)