CSS class naming, what’s the deal?

Geschreven door Dana Mol.

dana@dwvd.nl
06 81 81 85 72

Tijd voor een artikel over CSS. En dan voornamelijk class naming conventions en CSS scalability and maintenance. No worries, dit artikel is leesbaar als je nieuw bent in de materie.

First thing’s first: wat is ‘naming convention’?

Als app ontwikkelaar schrijf je in verschillende talen, om een taal goed te kunnen ‘spreken’ maken we gebruik van de juiste grammatica. De ‘grammatica’ waar ik in deze blog op focus zijn classes. Als front end developers HTML code schrijven, schrijven we tegelijkertijd ook namen voor CSS classes. Een vergelijking die ik vaak gebruik om dit allemaal uit te leggen is: HTML is het skelet en CSS is alles wat om een skelet heen zit (huidskleur, lengte, gewicht, haar style – alles wat ons visueel uniek maakt).

Het is cruciaal dat je classes een goede naam geeft. Duidelijk, omschrijvend en concreet. Een goeie class name verzinnen (die andere front end developers gelijk begrijpen) is soms best een dingetje. “Noem ik dit een ‘panel’ of een ‘dropdown’? Is ie ‘blue’ of ‘primary’?”. Daarnaast is het ook fijn als classes visueel goed scanbaar zijn.

De populairste CSS class naming conventions zijn BEM en ITCSS. BEM staat voor Block Element Modifier – dit zijn verschillende niveaus van styling elementen waarvan een block het hoogste niveau heeft. Streepjes maken het onderscheid tussen al die verschillende niveaus.

Dan is er ook ITCSS (Inverted Triangle CSS). Een methode om een project en CSS bestanden (beter) te organiseren. Of je nou een native app, een hybrid app, een cross platform app of een website aan het bouwen bent, het aantal styling bestanden bouwt zich snel op. Handig dus als je de dingen goed kunt terugvinden. ITCSS zorgt er voor dat we als developers vooraf besluiten waar we onze styling sheets gaan opslaan door ze te categoriseren. We maken folders die van algemeen naar specifiek gaan. Op de afbeelding hieronder zie je hoe dit er ongeveer uitziet.

Waarom is dit zo’n big deal?

Bij app bureau De Wortel Van Drie gebruiken we BEMIT, een combinatie van BEM en ITCSS. Zo zorgen we dat al onze front end developers op één lijn zitten en eenvoudig kunnen samenwerken. Hierdoor kunnen we bij het maken van een app meer focussen op de inhoud van onze code in plaats van hoe we de code hebben opgebouwd. Ook maakt dit onderlinge code reviews sneller.

Jezelf zo min mogelijk herhalen en dezelfde stukjes codes kunnen hergebruiken is iets waar ik oprecht heel blij wordt. Daarnaast komt het de schaalbaarheid van de app ten goede. Het hele development team kan op ieder gewenst moment gemakkelijk in iemand anders code duiken. Zo bouw je makkelijk aan nieuwe app features en fix je die nare bugs in een handomdraai.

Meer weten over BEMIT? Check deze, deze, deze of deze link. Heb je plannen om een app te laten ontwikkelen? Neem dan contact met ons op!

alle artikelen

app laten ontwikkelen?

Neem geheel vrijblijvend contact op voor een prijsindicatie of afspraak.