Share
Bij het werken met CSS-preprocessors zoals Sass, Less (of welke andere programmeertaal dan ook), maakt u gebruik van de kracht van variabelen. Als u echter spontaan uw variabelenamen maakt terwijl u codeert, is de kans groot dat uw naamgevingsconventie gebrek aan samenhang heeft. Je zou moeten overwegen om je variabelenamen (en dat project) modulair te organiseren. Dit zal structuur en eenheid brengen in uw project als geheel, waardoor het gemakkelijker wordt om het geheel te begrijpen en te navigeren.
Stel dat u een variabele voor tekstkleur in uw project nodig heeft. Je zou het kunnen noemen $ Text-color, of zou je het moeten noemen $ Kleur-text? Hoe beslis je? Een willekeurig kiezen kan bijdragen aan een gebrek aan structuur naarmate het aantal variabelen in uw project toeneemt. Zoals de ervaring leert, vergeten we vaak precies hoe we variabelen hebben genoemd voor bepaalde projecten. Dit leidt tot verwarring en tijdrovende methoden voor wereldwijd zoeken en vervangen van variabele namen.
Wat we nodig hebben, is een regel voor het definiëren en selecteren van onze variabelenamen. Een goede manier om modulariteit in uw project te behouden, is door variabelen te groeperen die relaties en overeenkomsten delen. Dan kun je ze een naam geven door woorden te rangschikken die hun functie beschrijven van generiek tot specifiek (op dezelfde manier als CSS werkt met specificiteit) van links naar rechts.
Als ik bijvoorbeeld vier variabelen heb voor vier verschillende randkleuren, kan ik ze allemaal een naam geven die begint met 'border' (omdat dit de generieke term is die ze allemaal delen) en specifieker wordt met een lezing van links naar rechts. Door variabelen op deze manier te groeperen en een naam te geven, is uw code gemakkelijker te lezen, te begrijpen en te onthouden.
Laten we veronderstellen dat we in SASS werken en we een aantal variabelen willen maken die het kleurenpalet van ons project bepalen. Als we met een tint blauw werken, kunnen we enkele variabelen als deze maken:
$ Blauw; $ Donkerblauw; $ Medium-blauw; $ Donkerste-blauw; $ Lichtblauwe; $ Lichtste-blauw;
Een betere manier om deze variabelen een naam te geven, is om te beginnen met het algemene woord dat ze allemaal gemeen hebben: blauw. Dan kunnen we van links naar rechts meer specifiek worden:
$ Blauw; $ Blue-dark; $ Blue-donkerste; $ Blauw licht; $ Blue-lichtste;
Dit helpt niet alleen bij de herinnering, maar zorgt ervoor dat een teksteditor (zoals Sublime Text, Coda enz.) Gemakkelijk kleuren suggereert. Op deze manier hoef je niet precies te onthouden hoe je je variabelen hebt benoemd. In plaats daarvan kunt u generiek beginnen en meer specifiek worden, aangezien de teksteditor variabelenamen automatisch voorstelt. Het enige dat u hoeft te onthouden, is dat u een kleur blauw wilt. Dus je begint te typen $ blue en je kunt een lijst krijgen van alle verschillende blues die je hebt gemaakt!
Stel je voor dat ik aan een groot project werk en dat ik al mijn variabelen die kleurwaarden bevatten, heb gegroepeerd door ze vooraf te plaatsen met het algemene woord dat ze allemaal gemeen hebben: kleur.
// OK $ border-kleur; $ Dark-border-color; $ Light-color-border; $ Hoogtepunt; $ Koppeling; $ Schakel-dark; $ Tekst; $ Kleur-tekst; $ Schakel-color-licht; $ Lichtste-text-color;
// Betere $ color-border; $ Color-border-dark; $ Color-border-licht; $ Kleur-hoogtepunt; $ Kleur-koppeling; $ Kleur-Link-dark; $ Kleur-Link-licht; $ Kleur-tekst; $ Kleur-text-licht; $ Kleur-text-lichtste;
Laten we zeggen dat ik een kleur nodig had voor een rand. Ik begin met typen rand: 1px solide $ colo en mijn teksteditor kan alle kleurvariabelen voorstellen die ik heb gedefinieerd voor mijn project.
Misschien heb ik veel kleuren in mijn project, maar ik wil alleen randkleuren. Ik zou een aantal variabelen vooraf kunnen definiëren met mijn gewenste randkleuren. Vervolgens kan ik bij het coderen gewoon doorgaan met het verfijnen van de specificiteit van mijn variabele naam rand: 1px effen $ kleurrand en mijn teksteditor stelt alle variabelen die ik heb voor die prefix automatisch voor. Het enige dat ik moet doen is degene kiezen die ik wil!
Zelfs als u geen codehints had, zou dit nog steeds een effectieve manier zijn om uw variabelen een naam te geven. Hiermee kunt u eenvoudig terugvinden wat u variabelen hebt genoemd, omdat variabelen die relaties delen voorvoegsels delen.
Door uw variabelen op deze modulaire manier te benoemen, kunt u uw project conceptueel begrijpen voordat u gaat coderen, terwijl u codeert en nadat u hebt gecodeerd. Het is een win-win-win-situatie!
Accentsconagua