We were Gents and Wijs, but now you can call us Duke & Grace.

2Ghent

Foreestelaan 1
9000 Ghent

Brussels

Antwerpselaan 40
1000 Brussels

Deze post is gearchiveerd.

Ga naar onze recente blogposts


9 juli 2015 - Story

CSS Workshop - Wat we leerden van Harry Roberts

Sinds 2013 ontwikkelen we bij Wijs ons eigen frontend framework: Chopstick. Het is een lightweight boilerplate (= een vertrekpunt met een aantal voorgedefinieerde elementen) dat als startpunt dient bij het opzetten van kleine en grote projecten en ervoor zorgt dat we als team vlot kunnen samenwerken en de kwaliteit van onze code consistent houden.

Chopstick werd al snel onze toolbox vol handige mixins, settings en basis stijlen waar iedere designer bij Wijs mee aan de slag ging. Maar gaandeweg ondervonden we ook dat er nog steeds ruimte voor verbetering was. We vertrokken allemaal van dezelfde basis maar gingen daarna teveel onze eigen weg waardoor het samenwerken aan projecten onderling en naar support niet altijd even vlot liep. We voelden de nood voor een duidelijke architectuur, afspraken rond het schrijven van code en documenteren van die code. The next step was dan ook het inhuren van een expert om samen met hem Chopstick naar een hoger niveau te tillen en zo onze kwaliteit te blijven garanderen.

De expert

Harry Roberts - @csswizardry - is een kraan in alles front-end. Hij heeft heel wat ervaring opgedaan bij SKY en geeft nu workshops in bedrijven zoals Kickstarter, Google, Etsy, BBC,... (en Wijs).

Als voorbereiding op de workshop stelden we eerst intern een briefing met een overzicht van een aantal specifieke zaken die we wilden bijleren en ook meer open vragen over hoe we bepaalde dingen konden verbeteren. Deze briefing overliepen we tijdens een conference call met Harry, en hij ging er dan verder mee aan de slag. Het uiteindelijke programma zag er als volgt uit:

  • Modularising UI’s
  • Principle & traits
  • Architecture
  • Selectors
  • Layout
  • Frameworks
  • Theming
  • Styleguides
  • Tech Debt & Legacy
  • Upkeep & Maintenance

We pikken er even een aantal onderwerpen uit om er dieper op in te gaan.

Oefening

We kregen eerst een kleine praktijkoefening. Iedereen moest op een tiental minuten een sitemenu namaken waarna we onze code vergeleken. Hierin werd weer duidelijk wat we al wisten; ieder van ons heeft een gedegen CSS kennis maar er zitten nog iets teveel verschillen in onze uitwerking. Dit is zowel de sterkte (flexibel) als de zwakte (volgorde van code, overerving, specificiteit...) van CSS. Dit is niet echt een probleem bij kleine projecten maar in grotere architecturen mag er geen ruimte zijn voor interpretatie. De code moet leesbaar, herbruikbaar en modulair zijn.

Selectors

Geen ruimte voor interpretatie

Voor iemand die het project “nieuw” binnenkomt moet de functionaliteit van een element meteen duidelijk zijn en zijn plaats binnen het grotere geheel. Dit klinkt misschien wat vaag maar met een voorbeeld wordt het meteen duidelijk:

<div class=“widget”>
	<h2>Machtige titelh2>
div>
.widget {
	background-color: tomato;
}
	
.widget h2 {
	color: blue;
}

Wanneer we de CSS bekijken van deze widget is het niet meteen duidelijk wat de functie van de h2 is. Is dit de titel? Is het een subtitel? Dit kan op verschillende manieren geïnterpreteerd worden en dit moeten we vermijden. Een betere manier is om de html op de volgende manier op te bouwen:

<div class=“widget”>
	<h2 class=“widget__title”>
		Machtige titel
	h2>
div>

Nu kunnen we in onze CSS de ".widget__title" class gebruiken en weten we ook meteen wat de functie van dit element is namelijk de titel.

Herbruikbaar

In een architectuur moet code herbruikbaar zijn. Dit wil zeggen dat we classes op meerdere plaatsen kunnen inzetten en dit met behoud van leesbaarheid. Wederom zal een voorbeeldje meer duidelijkheid brengen:

<button class=“btn btn-add”>
	Voeg toe aan winkelmandje
button>
.btn-add {
	background-color: green;
	padding: 2em;
}

Een knop om een artikel in je winkelmandje kan een algemene knop opmaak krijgen - .btn - maar enkele specifieke stijlen zoals een groene achtergrond en extra padding om de knop groter te maken. Maar door de structuur en de naamgeving beperken we onszelf in de herbruikbaarheid van deze class. Wat als we bijvoorbeeld een grote login knop willen maken? Maken we dan een .btn-login?

<button class=“btn btn--alpha btn--large”>
	Voeg toe aan winkelmandje
button>
	
<button class=“btn btn--large”>
	Log in
button>
.btn--alpha {
	background-color: green;
}

.btn--large {
	padding: 2em;
}

We maken inderdaad geen .btn-login maar we maken onze classes minder specifiek en geven ze een meer generische naam zodat we ze kunnen hergebruiken.
Let op, het is niet de bedoeling om elke css property in een aparte class te steken. Deze codevoorbeelden zijn heel beperkt gehouden om de werkwijze duidelijk te maken.

Architectuur - ITCSS

Nu we de weten hoe we selectors moeten schrijven is de vraag hoe we onze architectuur structureren. We maken hierbij gebruik van ITCSS en dit staat voor “Inverted Triangle for CSS”. Het is een architectuur die voor een logische volgorde van je selectors zorgt. Het begint met generische stijlen en wordt zo stapsgewijs specifieker. Zo kan je makkelijk de hiërarchie in je stylesheets onder controle houden waardoor je minder moet overschrijven. Met kleinere filesizes en betere performantie als gevolg.

Als metafoor kunnen we de werkwijze van een beeldhouwer gebruiken. Hij start met een steen waaruit hij grofweg een aantal stukken weg slaat. Dit zijn generische stijlen die in elk project van toepassing zijn. Vervolgens maakt hij de basisvorm voor hoofd, lichaam etc... Dit zijn elementen die al wat vorm beginnen te krijgen en meer eigen zijn aan het project. Vervolgens worden er meer kenmerken en details toegevoegd (bv handen en gezicht). Deze componenten zijn uniek voor het project.

Na de workshop hebben we besloten om de ITCSS structuur toe te passen op Chopstick. Met de driehoek als leidraad hebben we onze code herschreven en alles onderverdeeld in de verschillende lagen. De huidige structuur kan je op github bekijken.

Conclusie

Dankzij de workshop hebben we een aantal extra inzichten verkregen die we ondertussen hebben toegepast in Chopstick. We hanteren nu allen nog meer dezelfde aanpak binnen onze projecten wat een nog vlottere samenwerking onderling en doorstroming naar het service team garandeert.

 

Benieuwd hoe wij jou visueel sterker kunnen maken?  Contacteer ons!

Tom Hudders

Tom Hudders

Designer

Share this insight on

It's time to stop scrolling and start making.

Let's get in touch

Call us +32 9 335 22 80