Hoe u uw code eenvoudig onderhoudbaar maakt met handleidingen voor woonstijlen

Stijlgidsen van weleer worden meestal gezien als ontwerpgerichte documenten die zich richten op branding en kleurgebruik. Maar met de komst van waanzinnig grote codebases voor websites zoals Facebook of de enorme hoeveelheid producten van Google, zijn stijlgidsen sindsdien geëvolueerd.

Tegenwoordig bevatten woonstijlhandleidingen altijd bijgewerkte documentatie van de huidige codebasis en de use-cases. Met deze documenten kunnen we veel meer onderhoudbare en herbruikbare code schrijven en tegelijkertijd meteen zien hoe geoptimaliseerd onze codebasis is.

Wat zit er in een gids voor levende stijlen?

Leefstijlgidsen zijn vergelijkbaar met de oudere tegenhangers; ze bevatten logo- en merkinformatie, kleurgebruik en een algemene beschrijving van het gebruik van de code. In het gedeelte met code-omtrekken vindt u gemakkelijk dubbele of sterk gelijkende code en combineert u deze om uw codebase te optimaliseren of om componenten te bekijken die al in gebruik zijn. De meeste handleidingen demonstreren een "log" -stijlbenadering, waarbij elke code-instantie gedocumenteerd is, of alleen de opzettelijk modulaire code gedocumenteerd is.

Deze handleidingen zijn niet alleen gericht op HTML en CSS, maar ook op andere talen die kunnen worden gemoduleerd voor prestaties zoals JavaScript en PHP. Een paar degelijke voorbeelden van richtlijnen voor leefstijlen zijn te vinden op Github , Mozilla , en MailChimp . Zoals u aan deze voorbeelden kunt zien, is het gebruikelijk dat een pagina of een subsite gebruikscasussen naast de code voor elk onderdeel weergeeft. Dit maakt het gemakkelijk om te gaan en ze te grijpen wanneer je ze nodig hebt, en voor onbekende ontwerpers of ontwikkelaars om te zien hoe componenten op een interactieve manier werken.

Beginnen met uw eigen gids met woonstijlen

Beginnen met je eigen gidsgids voor levende stijlgids kan ontmoedigend lijken, vooral voor grotere projecten. Maar meestal is er een rendement op de investering van de tijd die nodig is om het voor elkaar te krijgen. Grotere projecten profiteren enorm van een levende documentatie van sitestijlen en codestructuur. Kleinere projecten hebben een minder opvallende, maar soms nog steeds de moeite waard rendement op uw tijdsinvestering. In beide gevallen, als je aan een project werkt dat op een dag kan worden overgedragen aan een andere ontwerper of ontwikkelaar, maakt het hun dag om dergelijke documentatie te zien.

Begin met de stichting

Componenten die u vaak gebruikt, zijn de beste use-case voor een handleiding voor levende stijlen, knoppen komen onmiddellijk voor de geest. Een korte lijst met dingen die u wellicht wilt documenteren zijn lay-outopties (mogelijk een rastersysteem schetsen), typografie, kleurgebruik, knoppen en koppelingsstijlen, formulierstijlen, meldingen of waarschuwingen en lijststyling. Zowat alles dat baat zou kunnen hebben bij herbruikbaarheid kan in wezen worden toegevoegd. Houd bij het schetsen rekening met dingen flexibel te houden. Vorm nooit een waarschuwing of knop die specifiek is voor één pagina of use-case, tenzij absoluut noodzakelijk. Voeg in plaats daarvan modificatieklassen toe om voort te bouwen op de basisbasis voor zaken als kleur, typografie of esthetische wijzigingen. Op deze manier kunt u altijd rekenen op de klasse .button om een ​​consistente breedte, hoogte en tekstgrootte aan te geven, terwijl de modifierklassen de dingen die specifiek zijn voor elke use-case kunnen wijzigen.

De doelen van onderhoudbare code

Het doel van onderhoudbare code is om dingen herbruikbaar en toekomstbestendig te maken. Onderdelen zoals meldingsbalken, knoppen, kopteksten en voetteksten zijn geweldige voorbeelden van herbruikbare code: dingen die u meerdere keren op de site of op dezelfde pagina kunt gebruiken. Als je oude of reeds geschreven code verbreekt om het onderhoudbaarder te maken, is het eigenlijk vrij eenvoudig. Begin met het weghalen van de CSS tot de basis. Je zou een componentklasse moeten hebben die structurele dingen zoals hoogte, breedte en positie definieert. Hoewel aanvullende modificatieklassen kunnen worden gebruikt om esthetische dingen zoals kleur of typografie te wijzigen. Als uw project een body-ID of -klasse voor elke pagina gebruikt, kunt u op deze manier unieke use-cases stylen op basis van een pagina per pagina. Zorg ervoor dat je niet te veel naar deze praktijk gaat, want het kan gemakkelijk gewicht toevoegen aan je stijlgids.

De KISS-principe is ook een ontwerpprincipe dat goed geschikt is voor het modulaire ontwikkelingsproces. Het schrijven van eenvoudige, onderhoudbare code is meestal het gemakkelijkst door uw componenten eenvoudig te houden. Als het gaat om eenvoud, als het mogelijk is om dingen efficiënter te maken en / of minder code te gebruiken terwijl hetzelfde resultaat wordt behaald, moeten onze componenten worden geschreven om dit te doen. Het einddoel van een onderhoudbare codestructuur is iets dat herbruikbaar, klein en enorm efficiënter is dan een niet-onderhoudbare tegenhanger.

Naamconventies in CSS

Als het gaat om het werken met een onderhoudbare codestructuur, worden conventies voor naamgeving erg belangrijk. Het schrijven van beschrijvende CSS-klassen zal een lange weg afleggen om ervoor te zorgen dat het onderhouden van uw codebasis een gemakkelijke taak zal zijn. Er bestaat geen limiet op CSS-klassenlengtes, dus gebruik dit in uw voordeel. Zorg ervoor dat je je aan een duidelijke naamgevingsconventie houdt, want het mengen van streepjes en onderstrepingstekens of camelgeval versus alle kleine namen kan gemakkelijk verwarrend zijn. Het is meestal een goed idee om je componentklassen heel beschrijvend te maken, terwijl je de modificatieklassen minder goed maakt. Hieronder ziet u een voorbeeld van een knop, een unieke use-case-regel en modifier-klassen.

  / * Dit is een componentklasse, deze mag alleen basisstructuurregels bevatten * /. Button {display: block; width: 250px; height: 48px; line-height: 48px;} / * Deze unieke use-case geeft een knop weer die wordt gebruikt op de startpagina * /. homepage-cta-button {display: blockmargin: 0 auto 50px; width: 180px; height: 60px; line-height: 60px;} / * Hieronder zijn modifier classes, deze worden toegevoegd naast de component klasse om kleur of andere esthetische veranderingen toe te voegen * /. rood {background: # C54F48} .rounded {border-radius: 5px;} 

Geautomatiseerde oplossingen

Geautomatiseerde generiekeidengeleiders zijn links en rechts opduikend om de gids voor stijlgidsen te helpen. Stijlprototype is een SASS-generator gebouwd door Ram Richard en Mason Wendell van Team SASS . Het is een van de betere opties die er op dit moment zijn, met soortgelijke generatoren zoals Hologram , Kalei , StyleDocco , en KSS ook nuttig blijken.

Geautomatiseerd versus handgemaakt

Zoals altijd zijn er voor- en nadelen aan het gebruik van beide methoden hier. Geautomatiseerde oplossingen zijn snel en kunnen achteraf worden gebruikt, maar ze zijn soms ook streng. Met de hand gemaakte stijlgidsen laat u de ins en outs van alles weten, maar neemt meer tijd in beslag. Persoonlijk is de handmatige aanpak in de meeste gevallen voor mij het beste, omdat deze het meest flexibel is in het werken met andere ontwikkelaars. Maar het is zeker de moeite waard om een ​​deel van de geautomatiseerde oplossingen uit te proberen, alleen om een ​​idee te krijgen van hoe ze werken en wat ze zeggen over uw code.

Uw code herzien

Websites zijn nooit af. We wijzigen dingen, overschakelen naar nieuwe stijlen en trends en uiteindelijk kunnen we eindigen met veel code van eerdere revisies. Het is belangrijk om even stil te staan ​​bij het 'einde' van elke revisie om er zeker van te zijn dat dingen zo schoon mogelijk zijn. Op dit punt wil ik ook elke component (en modifier klassen) in een Codepen om browserondersteuning te testen en dienovereenkomstig notities te maken. Dit kan veel later tijd besparen als u een pagina ontwerpt met ondersteuningsbeperkingen. Houd tijdens het beoordelen ook de aandacht op componenten die op vreemde manieren met elkaar in conflict kunnen komen of doosmodelproblemen kunnen veroorzaken.

Conclusie

Concluderend moeten stijlgidsen resulteren in code die zeer manipulatief en flexibel is, maar toch gemakkelijk te onderhouden en te lezen is. Rekening houdend met hoeveel tijd we moeten investeren om een ​​dergelijk resultaat te bereiken, hebben huisstijlgidsen een veel meer meetbaar effect op grotere projecten dan kleinere. Complexe of grote projecten profiteren zo van alle optimalisatie en prestatieverhogingen dat het de tijd die wordt besteed aan het bereiken van de genoemde resultaten zeker de moeite waard is. Het creëren van een gids met woonstijlen voor een kleine website of een klein project kan de tijdinvestering echter niet waard blijken te zijn.

Tot slot moeten we allemaal streven naar het schrijven van schone, onderhoudbare code die zich richt op toekomstbestendigheid. Stijlgidsen suggereren een dergelijke workflow en helpen om ontwikkelaars en kijkers veel gelukkiger te maken.

Uitgelichte afbeelding / thumbnail, programmeer afbeelding via Shutterstock.