no.hideout-lastation.com
Paradis For Designere Og Utviklere


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.

Hvordan lage hjerteform med CSS

Hvordan lage hjerteform med CSS

CSS3 løfter muligheten til det vi kan bygge på nettsteder ved hjelp av bare HTML og CSS. Du kan finne fantastiske eksempler som vi tidligere har omtalt. Men la oss ikke komme for langt foran oss selv, en komplisert design vil trenge koder som kan gi deg hodepine.I stedet skal vi lage noe enkelt for å hjelpe deg med å forstå former og posisjonering med CSS først, før du drar til mer avanserte design. Siden

(Tekniske og design tips)

David Rumsey Map Collection - Den største online kartdatabasen du aldri har hørt om

David Rumsey Map Collection - Den største online kartdatabasen du aldri har hørt om

Google Maps og GPS har gjort det enklere enn noensinne for oss å reise verden på jakt etter nye opplevelser. Men før all denne teknologien kom til å bli, oppdagelsesreisende modige nye grenser ved hjelp av detaljerte kart som er like fremtredende som de er unøyaktige.Og ingen andre steder på Internett vil gi deg tilgang til kart som vil gjøre historikere, geografer og kartografer mer begeistret enn David Rumsey Map Collection.Med ov

(Tekniske og design tips)