Stylesheets en workflow

Stylesheets en workflow

In de laatste blogpost gaven we aan in te gaan op de verschillende technieken die toegepast worden binnen ons team. In dit artikel beschrijf ik (Roy) hoe wij stylesheets creëren en welke tools wij gebruiken.

Bij het ontwikkelen voor het web ontkom je niet aan het schrijven van CSS (Cascading Style Sheets). CSS verzorgt de visuele weergave. Echter schrijven wij al jaren geen CSS meer, maar Sass (Syntactically Awesome Style Sheets).

Structuur

Het is voor jezelf - als frontend developer - en andere developers fijn als de code leesbaar en duidelijk is. Maar hoe doe je dit? Leesbare code start bij een duidelijke structuur en het gebruik van standaarden. Zodoende wordt het lezen en bewerken een stuk fijner.

Package manager

Ons team gebruikt voor het beheer van alle frontend frameworks, libraries, assets en utilities package manager Bower.io. Het werken hiermee gaat net zoals veel andere tools via Command-line.

Na het aanmaken van een bower.json bestand worden alle assets hierin opgeslagen met bijhorend versienummer. Zo kunnen andere developers in één lijst de assets en versienummers kunnen zien. Met het commando bower install wordt de gehele lijst geïnstalleerd voor het project. 

Bestanden worden in de map bower_components geplaatst. Vanuit de frontend roepen we hier straks bestanden van aan.

Voorbeeld van een bower.json bestand

Screenshot van bower.json

Gebruik van frontend frameworks

Als solide basis gebruikt ons team één van de twee grootste (open source) frontend frameworks, namelijk Bootstrap of Foundation. Beide zijn in Sass geschreven. Ook hebben wij goede ervaringen met beide frameworks. In dit voorbeeld gebruiken we foundation.

Frameworks bevatten vaak code die je niet gebruikt. Enkele simpele tips om dit tegen te gaan:

  • Zet in het basis .scss bestand componenten uit die je niet gebruikt
  • Gebruik altijd je eigen Scss compile bestand, nooit het volledige .css bestand.
  • Semantisch code en HTML opbouwen
  • Gebruik zoveel mogelijk mixins

Foundation settings: zet componenten zoveel mogelijk uit

Style.scss bestand

Aparte bestanden

Gedurende het ontwikkelen van een website is het verstandig om componenten te bouwen in aparte bestanden.

Alle Sass code die wordt geschreven voor bijvoorbeeld de header van een website plaatsen we in een apart bestand zodat het netjes en overzichtelijk zonder tussenkomst van andere code leesbaar is.

Naast het opdelen in aparte bestanden schrijven we ook zoveel mogelijk met Mixins. Dit is sneller en je hoeft er minder CSS voor te schrijven.

Sass mixin

div {
  @include transition(all .4s ease);
}

CSS na verwerking Sass naar CSS

div {
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}

Task manager

Een task manager kan vooraf gedefineerde taken uitvoeren. Tijdens de ontwikkeling is het hulpzaam om bepaalde taken te automatiseren. Een goed voorbeeld hiervan is dat de browser bij elke codewijziging uit zichzelf ververst. Voor het automatisch uitvoeren van taken gebruiken wij Gulp.js. De volgende taken hebben wij geautomatiseerd met Gulp.js:

  • Sass omzetten naar één CSS bestand
  • CSS bestand comprimeren
  • Javascript samenvoegen tot 1 bestand
  • Javascript comprimeren
  • Browser uit zich zelf laten verversen
  • Testen in meerdere browsers (browser-sync)

Om de stylesheet compact te houden geven we Gulp.js de opdracht style.scss te comprimeren naar style.min.css. Het bestand wordt kleiner en de browser kan dit vervolgens sneller lezen.

Update

Inmiddels gebruiken we geen bower meer. Met webpack, yarn en node modules beheren we onze assets.