• (Automated) Frontend Framework Styleguides

    Dit document is in ontwikkeling en zal langzaamaan groeien

    Er is veel veranderd in deze branche de laatste 10 jaar. Waar we in 2004 nog wegkwamen met wat procedural php, een paar html bestanden en wat plaatjes, vragen websites tegenwoordig met het oog op veiligheid en snelheid om een solide backend framework zoals Symfony of Laravel. Ook frontend zijn er ontelbare mogelijkheden om een website te verfraaien en versnellen, en de gebruiker een moderne beleving te bieden. Van font embedding tot Javascript libraries, de mogelijkheden zijn legio en de code raakt hierdoor steeds meer een opeenhoping van includes en niet-gedocumenteerde Javascript triggers. Niet handig, vooral niet wanneer door meer dan een persoon aan een project gewerkt wordt. Gelukkig zijn er ook tal van mogelijkheden code te vereenvoudigen en goed te documenteren hoe een project in elkaar steekt. Dit artikel benoemt deze mogelijkheden, waarbij de focus op frontend zal liggen.

    Javascript frameworks
    intro (...)

    AngularJS
    (...)

    jQuery
    De meest gebruikte Javascript library is niet echt een framework, maar een eenvoudige include waarna je in een apart Javascript bestand de functionaliteit van je pagina uitwerkt. jQuery gebruikt CSS selectors als hooks en triggers voor het selecteren van het juiste elemement (...)

    Testing frameworks
    (...)

    - Selenium (url)
    (...)

    - Jasmine (url)
    (...)

    (Geautomatiseerde) styleguides
    Bij het woord 'styleguide' denk ik in eerste instantie aan de boekwerken vol pantonekleuren, op de pixel uitgemeten layouts en uitvoerig omschreven corpsgroottes en stramienafmetingen zoals ik die in de begintijd van mijn loopbaan hanteerde wanneer wij materiaal ontwikkelden voor grote merken. Tegenwoordig wordt hier iets heel anders mee bedoelt, in een CSS of Javascript styleguide beschrijf je hoe een project op die disciplines in elkaar steekt. (...)

    Javascript styleguides

    - Grunt (url)
    (...)

    CSS styleguides

    - KSS-Node (https://github.com/kneath/kss/blob/master/SPEC.md)
    As mentioned, this is a methodology for writing documented CSS. With KSS-Node in place, it's possible to automate building of a readable styleguide. It works by using comment blocks inside your CSS file to 'describe' the purpose and states of the element it's preceding. The magic happens when you use an auto generator to automatically generate your styleguide. Several libraries and framework can do this for you, including the aforementioned Grunt.
    The good: easy to implement format for documenting a stylesheet
    The bad: it's just a specification, requires Ruby, Grunt or similar to achieve results


    - StyleDocco
    Like KSS, StyleDocco's aim is to automatically generate a styleguide from comments placed in your stylesheets. At least Styledocco comes with its own command like tool, but a Node.js installation is required. On the plus side, there is support for SASS, SCSS, Less built-in.
    The good: seems very useful and complete, SCSS support is a big plus
    The bad: still required a node.js installation, isn’t that asking too much?


    - Kalei
    This is another approach to automatically generate a styleguide out of your stylesheets. Here there is no file generated, the styleguide is generated on the fly, so it's always up-to-date. This works, again, by parsing existing stylesheets and reading the comments and descriptors. Here you also insert markup code inside the comment block. This part is then shown in the stylesheet.
    Installation should be straightforward, I didn’t get round to trying this out yet.

    The good: Genuine 'living stylesheet', easy to use
    The bad: Does not show the CSS markup. No SCSS support (?)

    CSS Guidelines / methodology
    Naast geautomatiseerde styleguides, kun je op het internet ook ontzettend veel vinden over CSS code standards, waarbij in hoofdlijnen maintainability en DRY (Dont Repeat Yourself) voorop staan, maar er onderling nog wel wat verschillen zijn in aanpak. Ik zal de bekendste bespreken.

    - SMACSS (http://smacss.com)
    This is 'just' a very, very big collection of rules and guidelines for structuring CSS files and writing better CSS code. While it's free, some premium content requires a purchase. I've read a few chapters to see if it was worth investing and was pleasantly surprised, it's very complete and worth a read.
    Many topics are, however, already covered by the 'best practices' section. Still, I'm going to check out the complete PDF and see if there's stuff in there I can apply.

    - PureCSS (http://purecss.io)
    A small CSS framework that provides some basic elements and various resets to create a clean and consistent look out-of-the-box. It's easy to extend and implement, but doesn’t fit this research much, since it's not really a styleguide.

    - DRY


    - OOCCS


    - LESS, SASS
    LESS en SASS zijn geen geautomatiseerde styleguides, het zijn preprocessors. Ze zorgen ervoor dat CSS code zo efficient mogelijk weggeschreven wordt (gecompileerd) naar een enkele .css file, ontdaan van alle overbodige spaties, witruimtes en commentaar. Daarbij geven zij wel de mogelijkheid CSS includes mee te nemen, en nemen zij een heleboel werk uit handen dankzij ondersteuning voor experimentele CSS selectors en vendor-prefixes. Ook kun je eenvoudig een project in meerdere .scss bestanden indelen.

    Conclusie
    Er is ontzettend veel te vinden en er zijn erg veel ideeen over Javascript en CSS styles en styleguides. Zodra een project rijkelijk gebruik maakt van Javascript lijkt AngularJS een goed framework om toe te passen. Dit vanwege de structuur en uitgebreide functionaliteit. Op CSS-gebied kom je al heel ver met een goede preprocessor (waarbij SASS mijn voorkeur heeft) en een fikse dosis common sense. De onderverdeling die je binnen SASS zelf kunt aanbrengen is in veel gevallen afdoende. Om een nieuw en groots project goed te documenteren is een professionele (design) styleguide onontbeerlijk.

‹ HOME Meer research