Share
När du arbetar med CSS preprocessorer som Sass, Less (eller något annat programmeringsspråk för den delen) kommer du att utnyttja kraften av variabler. Men om du spontant skapar dina variabla namn som du kodar, är oddsen din namngivningskonvention saknad sammanhållning. Du bör tänka på att organisera dina variabla namn (och projekt för den delen) modulärt. Detta kommer att ge struktur och enhet till ditt projekt som helhet, vilket gör det lättare att förstå och navigera hela saken.
Säg att du behöver en variabel för textfärg i ditt projekt. Du kan kalla det $ Text-färg, eller ska du ringa det $ Färg text? Hur bestämmer du? Att välja en slumpmässig kan bidra till brist på struktur, eftersom antalet variabler i ditt projekt ökar. Som erfarenhet visar glömmer vi ofta exakt hur vi heter variabler för specifika projekt. Detta leder till förvirring och tidskrävande metoder för global sökning och ersättning för variabla namn.
Vad vi behöver är en regel för att definiera och välja våra variabla namn. Ett bra sätt att behålla modularitet i ditt projekt är att gruppera variabler som delar relationer och gemensamma förhållanden. Då kan du namnge dem genom att ordna ord som beskriver deras funktion från generisk till specifik (ungefär samma sätt som CSS fungerar med specificitet) från vänster till höger.
Om jag till exempel har fyra variabler för fyra olika kantfärger, kan jag namnge dem alla som börjar med "border" (som det är den generiska termen som alla delar) och få mer specifika med en vänster-till-högerläsning. Gruppering och namngivning av variabler på detta sätt gör din kod lättare att läsa, förstå och återkalla.
Låt oss anta att vi arbetar i SASS och vi vill skapa ett antal variabler som definierar vårt projekts färgpalett. Om vi arbetar med en nyans av blå kan vi skapa några variabler som följande:
$ Blå; $ Mörkblå; $ Medel blått; $ Mörkast-blått; $ Ljusblå; $ Lättaste-blått;
Ett bättre sätt att namnge dessa variabler skulle vara att börja med det generiska ordet de gemensamt delar: blå. Då kan vi få mer specifika från vänster till höger:
$ Blå; $ Blue-dark; $ Blå-mörkast; $ Blått ljus; $ Blå-aste;
Detta hjälper inte bara till i minnet, men tillåter en textredigerare (som Sublime Text, Coda etc.) för att enkelt föreslå färger. På så sätt behöver du inte memorera exakt hur du namngav dina variabler. Snarare kan du börja generellt och bli mer specifik som textredigeraren automatiskt föreslår variabla namn. Allt du behöver komma ihåg är att du vill ha en färg av blå. Så du börjar skriva $ blå och du kan få en lista över alla olika blues du har skapat!
Tänk dig att jag jobbar med ett stort projekt och jag har grupperat alla mina variabler som innehåller färgvärden genom att prefixa dem med det generiska ordet som de alla har gemensamt: färg.
// OK $ border-color; $ Mörk border-färg; $ Ljusfärg gränsen; $ Höjdpunkt; $ Länk; $ Link-dark; $ Text; $ Färg text; $ Link-färg ljus; $ Lättaste-text-färg;
// Bättre $ färggräns; $ Färg border-dark; $ Färg border-ljus; $ Färg höjdpunkt; $ Färg-link; $ Färg-link-dark; $ Färg-link-ljus; $ Färg text; $ Färg text-ljus; $ Färg text-aste;
Låt oss säga att jag behövde en färg för en gräns. Jag börjar skriva gränsen: 1px solid $ colo och min textredigerare kan föreslå alla färgvariabler jag har definierat för mitt projekt.
Kanske har jag många färger i mitt projekt men jag vill bara ha kantfärger. Jag kunde fördefiniera några variabler med mina önskade kantfärger. När jag kodar kan jag helt enkelt fortsätta att begränsa specificiteten av mitt variabla namn gräns: 1px solid $ color-border och min textredigerare kommer automatiskt att föreslå några variabler jag har med det prefixet. Allt jag behöver göra är att välja den jag vill ha!
Även om du inte hade koden antyder, skulle det fortfarande vara ett effektivt sätt att namnge dina variabler. Det hjälper dig att lätt komma ihåg vad du har namngett variabler eftersom variabler som delar relationer delar prefix.
Att namnge dina variabler på detta modulära sätt hjälper dig att förstå ditt projekt konceptuellt innan du kodar, medan du kodar och efter att du har kodat. Det är en win-win-win-situation!
Accentsconagua