Digital Customer Experience Blog

Digital Customer Experience Blog

Meningen op deze blog weerspiegelen de opvattingen van de schrijver en niet per definitie die van de Capgemini Group

{Less is More}

Tijdens een project dat ik in de afgelopen maanden heb gedraaid kwam ik steeds meer in de knoei met de ontbrekende features van standaard CSS. Het was een groot en complex proces om de klant portal en werknemers portal uniform te krijgen. Ik kreeg steeds meer de behoefte om mijn workflow te optimaliseren en bijvoorbeeld afhankelijkheden te kunnen gebruiken in mijn CSS. Naar wat online rond te neuzen kwam ik een aantal css-preprocessors tegen die eigenlijk de ontbrekende features tot zich nemen en mijn workflow behoorlijk geoptimaliseerd heeft.

Een van de css-preprocessors die ik tegen kwam in het rijtje is LESS. Er zijn verschillende mogelijkheden om te kiezen voor een preprocessor en deze keuze is persoonlijk. Ik ben iemand die van syntax houd waardoor voor mij de keuze voor LESS een schot in de roos bleek. Om een indruk te geven wat de verschillen zijn, staat hieronder een screenshot waar dezelfde code staat in de verschillende talen. Daaronder  zal ik nog wat voorbeelden geven die ik als zeer prettig heb ervaren met het werken met Less.



Syntax
Wat opvalt is de syntax in SASS(.sass) en Stylus(.styl); deze wijkt heel erg af van de traditionele syntax van CSS. SASS(.scss) en LESS(.less) blijven veel dichter bij de core syntax van CSS. Wat goed te zien in bovenstaande code is het feit dat er bij .sass en .styl geen gebruik wordt gemaakt van brackets, commas en punten. Voor mij persoonlijk leidt dit niet tot een fijne manier van werken. Zo ken ik namelijk ook iemand die het heel handig vind om op deze manier te werken omdat hij op deze manier zich meer bewust is van het schrijven van SASS dan het schrijven van traditionele CSS.


Variabelen, Nesting, Operations en Mixins
Als we kijken naar CSS en CSS3 in het algemeen, dan valt het op dat er vrij weinig mogelijkheden zijn om voorwaardelijke opmaak te gebruiken. Hierdoor ben je vooral bezig met het herhalen van code. Bij verandering resulteert dit altijd in het aanpassen van code op veel verschillende plekken. Bij meerdere en grote wijzigingen leidt dit nog wel eens tot frustraties en verkleurde ctrl/cmd C en V toetsen op het toetsenbord. In alle varianten van de bovenstaande preprocessors kun je gebruik maken van variabelen, nesting operations en mixins. Met variabelen kun je bepaalde waardes definiëren. Deze variabele hergebruiken en bij het aanpassen hoef je dit dan nog maar op een plek te doen. Operations zijn een extra toevoeging die ervoor zorgt dat je wiskundige vergelijkingen kunt gebruiken om afhankelijkheden te creëren. Je kunt bijvoorbeeld variaties van kleuren maken of elementen afhankelijk maken van een standaard breedte, respectievelijk darken(@baseColor, 10%) en (@basicWidth * 2). Mixins zijn herbruikbare klassen die je binnen een bepaalde klasse kunt importeren. Je importeert dan de elementen van de klasse die je als mixin hebt gedefinieerd. Met deze extra functionaliteiten kun je door minimale aanpassingen te doen grote hoeveelheden tijd besparen.

Dit zijn nog maar enkele voordelen die je met het gebruik van CSS-preprocessors tot je beschikking krijgt. Het gebruik van een CSS-preprocessor is een workflow optimizer en zul je goed bewust moeten zijn van het feit dat je nog steeds je eigen code schrijft en optimalisaties niet zitten in de code, het verkeerd gebruik van een CSS-preprocessor leidt dan nog steeds tot trage en inefficiënte code.

Ik ben enthousiast over LESS-CSS maar wat zijn jouw ervaringen met het gebruik van CSS-preprocessors? Ben je ergens tegenaan gelopen met het gebruik? Ik hoor graag jouw visie.

Over de auteur

Kevin van der Bijl
Kevin van der Bijl
Within Capgemini Digital I work as lead social business consultant where I share my knowledge with our clients and our employees. I love to work on collaborative initiatives with clients sharing my expertise using a diversity of social business tools, coaching employees and assisting in the cultural and technological change. I believe that working with passion in your area of expertise will empower the people around you and this is key to take up the challenge to start a new way of working.

Plaats een reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.