Mare Digitale

Ik geef toe: aan het einde van een webproject vind ik mijn CSS-code een beetje rommelig. Terwijl ik me in het begin voorneem om zo netjes en gestructureerd mogelijk te werken. Naarmate het project vordert, en de CSS-code groeit, is het moeilijker dat erin te houden. Een aantal tips van wedeveloper Taha Shashtari boden uitkomst. Ik heb er 4 tips aan overgehouden die ik veel gebruik, zodat het nu wel nette code blijft.

1. Gebruik een pre-processor

Het is pas een paar webprojecten geleden dat ik SASS leerde, en nu wil ik niet meer anders! SASS staat voor Syntactically Awesome Style Sheets, en ‘manipuleert’ de CSS door gebruik van onder meer variables, mixins en nesting, een soort extra opties voor je CSS.

Voordelen: de code is niet alleen gestructureerder, ik kan er ook een stuk sneller door werken. Met SASS is het veel makkelijker om jezelf niet te herhalen (DRY – don’t repeat yourself). Omdat het zoveel op CSS lijkt, is het relatief makkelijk aan te leren.

Fijne SASS-tutorials:

• Getting started with SASS (with interactive examples) – Scotch.io
• Learn SASS and LESS: A Beginner’s Guide – 1stwebdesigner
• SASS Basics – SASS lang
• Beginner tutorials – The SASS way

2. Organiseer

Organiseer je SASS in verschillende bestanden, zodat je weet wat je waar kunt vinden.

Zo groepeer ik:

• variables: alle veelgebruikte variabelen, zoals header- en bodyfont, kleuren en mediaqueries
• grid: een grid à la Bootstrap, maar dan minder omvangrijk
• standard: de basis styling van de site (typografie, links, lijsten, etc.)
• specific:
  • layout: de styling voor de basis (header, footer, article, nav, etc.)
  • style: alle overige styling

3. Schrijf mixins

Dat scheelt zoveel tijd en vooral bloat in je code. Een mixin is een stukje code die je in je CSS kunt herhalen. Denk bijvoorbeeld aan mediaqueries of voorvoegsels als -moz en -webkit.

Voorbeelden van handige mixins:

• 8 Sass mixins you must have in your toolbox – zerosixthree
• Handy SASS mixins – webdesignweekly

4. Definieer kleuren

Een van de fijnste dingen aan SASS: de variabelen. Ik definieer in het begin van de code een aantal ‘hoofdkleuren’, en geef ze semantische namen als ‘primary-color’, ‘secondary-color’ en ‘tertiary-color’. Op die manier kan ik snel van kleuren wisselen, zonder die óveral te moeten aanpassen. En SASS kan ook van een hoofdkleur ondersteunende kleuren maken door de kleur meer of minder te verzadigen of door het lichter of donkerder te maken.

Dus wil een opdrachtgever van alle blauwe kleuren af en ze door paars vervangen? In 1 seconde gedaan!

Nu op naar blijvend nette code 🙂