Share
Når du arbeider med CSS preprosessorer som Sass, Less (eller et annet programmeringsspråk for den saks skyld) skal du utnytte kraften til variabler. Men hvis du spontant lager dine variable navn som du koden, er oddsene dine navngivningskonvensjonen mangel på sammenhengskraft. Du bør tenke på å organisere dine variabelnavn (og prosjekt for det saks skyld) modulært. Dette vil bringe struktur og enhet til prosjektet som helhet, noe som gjør det lettere å forstå og navigere hele greia.
Si at du trenger en variabel for tekstfarge i prosjektet ditt. Du kan kalle det $ Text-farge, eller skal du ringe det $ Farge-tekst? Hvordan bestemmer du? Å velge en tilfeldig kan bidra til mangel på struktur som antall variabler i prosjektet ditt øker. Som erfaringen viser, glemmer vi ofte nøyaktig hvordan vi kalt variabler for bestemte prosjekter. Dette fører til forvirring og tidkrevende metoder for global søk og erstatning for variable navn.
Det vi trenger er en regel for å definere og velge våre variabelnavn. En fin måte å beholde modularitet på i prosjektet er å gruppere variabler som deler relasjoner og fellesskap. Deretter kan du navngi dem ved å ordne ord som beskriver funksjonen deres fra generisk til spesifikk (mye på samme måte som CSS fungerer med spesifisitet) fra venstre til høyre.
Hvis jeg for eksempel har fire variabler for fire forskjellige grensefarger, kan jeg nevne dem alle som begynner med "grense" (som det er den generiske termen de alle deler) og få mer spesifikk med en venstre til høyre lesing. Gruppering og navngi variabler på denne måten gjør koden enklere å lese, forstå og tilbakekalle.
La oss anta at vi jobber i SASS, og vi vil opprette en rekke variabler som definerer prosjektets fargepalett. Hvis vi jobber med en blå nyanse, kan vi lage noen variabler som dette:
$ Blå; $ Mørk blå; $ Medium-blå; $ Mørkeste blå; $ Lyseblå; $ Letteste-blå;
En bedre måte å nevne disse variablene ville være å starte med det generiske ordet de alle deler til felles: blå. Da kan vi få mer spesifikk fra venstre til høyre:
$ Blå; $ Blå-sort; $ Blå-mørkeste; $ Blå-lys; $ Blå-letteste;
Dette hjelper ikke bare i tilbakekalling, men vil tillate en tekstredigerer (som Sublime Text, Coda etc.) for lett å foreslå farger. På denne måten trenger du ikke å huske nøyaktig hvordan du navngitte variablene dine. Snarere kan du starte generisk og bli mer spesifikk som tekstredigeringsprogrammet automatisk - foreslår variable navn. Alt du trenger å huske er at du vil ha en farge på blå. Så du begynner å skrive $ blå og du kan få en liste over alle de forskjellige bluesene du har opprettet!
Tenk deg at jeg jobber med et stort prosjekt, og jeg har gruppert alle mine variabler som inneholder fargeværdier ved å prefikse dem med det generiske ordet de alle har til felles: farge.
// OK $ border-farge; $ Dark-border-farge; $ Lys farge-grensen; $ Høydepunkt; $ Link; $ Link-mørk; $ Tekst; $ Farge tekst; $ Link-farge-lys; $ Letteste-tekst-farge;
// Better $ color-border; $ Farge-border-mørk; $ Farge-border-lys; $ Farge høydepunkt; $ Farge-link; $ Farge-link-mørk; $ Farge-link-lys; $ Farge tekst; $ Farge-tekst-lys; $ Farge-tekst-letteste;
Så la oss si at jeg trengte en farge for en kantlinje. Jeg begynner å skrive grense: 1px solid $ colo og min tekstredigerer kan foreslå alle fargevariablene jeg har definert for prosjektet mitt.
Kanskje jeg har mange farger i prosjektet mitt, men jeg vil bare ha grensefarger. Jeg kunne forhåndsdefinere noen variabler med mine ønskede grensefarger. Da, når koding, kan jeg ganske enkelt fortsette å begrense spesifisiteten til mitt variable navn border: 1px solid $ color-border og min tekstredigerer vil automatisk foreslå noen variabler jeg har ved det prefikset. Alt jeg trenger å gjøre er å velge den jeg vil ha!
Selv om du ikke hadde kodehenvisning, ville dette fortsatt være en effektiv måte å navngi variablene dine på. Det hjelper deg lett å huske hva du har navngitt variabler fordi variabler som deler relasjoner deler prefikser.
Å navngi variablene dine på denne modulære måten vil hjelpe deg å forstå prosjektet ditt konseptuelt før du kodes, mens du kodes, og etter at du har kode. Det er en vinn-vinn-vinn-situasjon!
Accentsconagua