Sortering og organisering av CSS ved hjelp av CSSComb

Sammenlignet med andre web-relaterte språk er CSS relativt enkel og lett å skrive . Men samtidig er det også vanskelig å organisere, spesielt når det gjelder koder som består av tusenvis av linjer.

Det ville være flott hvis vi kunne organisere CSS og gjøre det enklere for andre utviklere å lese og vedlikeholde kodene - noe som er nyttig hvis du jobber i et lag.

I dette innlegget skal vi vise deg hvordan du sorterer og organiserer CSS ved hjelp av et verktøy som heter CSSComb . Men først, la oss ta en titt på et kort eksempel på CSS eiendomsbestilling.

Teknisk har CSS ingen begrensninger når det gjelder å bestille egenskaper. Følgende eksempel ...

 . klasse {bakgrunnsfarge: # f3f3f3; bredde: 100px; høyde: 100px; font-farge: # 000; } 

... vil gi samme resultat som følgende:

 .klasse {bredde: 100px; font-farge: # 000; bakgrunnsfarge: # f3f3f3; høyde: 100px; } 

Men som vi tidligere har nevnt, blir det organisert for å hjelpe lagkameratene dine til å opprettholde kodene dine. Sortering av CSS-koder krever imidlertid mye kutting og liming, og tanker om hvordan du bestiller det. Og det er der CSSComb kommer til nytte.

Slik bruker du CSSComb

CSSComb er et sorteringsverktøy for CSS som er bygd av Slava Oliyanchuk . CSSComb støtter CSS2 til CSS4, og er tilgjengelig i mange populære kodeditorer som TextMate, Coda, Notepad ++ og Sublime Text, som et plugin eller en utvidelse.

Hvis du bruker Sublime Text, kan CSSComb installeres enkelt via pakkekontrollen. Når du er installert, kan du sortere CSS-egenskapene på flere måter:

• Trykk på standard tastekombinasjonen: Shift + Ctrl + C.
• Høyreklikk og velg: Sorter via CSSComb- alternativet.
• Åpne kommandopaletten - Kommando + Skift + P og velg Sorter via CSSComb .

I dette eksemplet har vi følgende stilregel.

 .class {padding-top: 1px; border-left: 1px solid #fff; -moz-boks-skygge: 0 0 1px 0 # 000; -webkit-boks-skygge: 0 0 1px 0 # 000; bokseskygge: 0 0 1px 0 # 000; grense høyre: 1px solid #fff; høyde: 23px; polstring-bunn: 10px; bakgrunnsfarge: #fff; } 

Stilregelen ovenfor fungerer, og det er ingenting galt med det, bortsett fra at det er litt uorganisert. Nå, etter å ha kjørt CSSComb, blir egenskapene sortert i følgende rekkefølge.

 .site-header> .container {padding-top: 1px; polstring-bunn: 10px; høyde: 23px; grense høyre: 1px solid #fff; border-left: 1px solid #fff; bakgrunnsfarge: #fff; -webkit-boks-skygge: 0 0 1px 0 # 000; -moz-boks-skygge: 0 0 1px 0 # 000; bokseskygge: 0 0 1px 0 # 000; } 

Ovenfor er standardbestillingsregelen i CSSComb, men hvis du ikke vil bestille det slik, kan du tilpasse bestillingen ved å gå til Innstillinger> Pakkeinnstilling> CSSComb- menyen og angi en ny ordreregel under Sorteringsordre - Bruker .

Merk : Hvis du bruker en kodeditor som ikke har utvidelsen eller plugin-modulen, er CSSComb også tilgjengelig som en webverktøylinje.

19 talentfulle artister å følge på Facebook

Sosialmedier er hjemsted for mange designere og kunstnere som ønsker å lage et navn for seg selv. Vi presenterte noen av dem som ble funnet på Instagram, Dribbble og Tumblr. For denne runden er det kunstnerne du finner på Facebook, og gutt har vi en liste. Hvis du leter etter din neste kreativitetsrett, er dette her du skal være.I de

(Tekniske og design tips)

En titt inne i verden av frilansskriving

Freelance skriving er et yrke som kan være like hardt og uforgivende som det er forlokkende . Selv tittelen, frilansskriver, bedrager. Det høres ut som en bekymringsfri form for kreativt uttrykk . Hvis det er en ting som nesten hver ny freelance skribent lærer ganske fort ... det er at frilans skriving er alt annet enn ubekymret. F

(Tekniske og design tips)