# De Total.js-codestijl: namen, bestanden, CSS, SQL en componenten

> De conventies van de Total.js-community voor JavaScript, namen, schema’s, require(), CSS, jComponent-plugins en -componenten, SQL-scripts en mappen, zodat elk project hetzelfde leest en een team of een AI-assistent het kan voortzetten.

Framework: total5
Product: Total.js 5 (total5@0.0.19)
Language: nl
Content-SHA256: 9df8e3759ff49da33da6df62cb084dd2106af4e35fcf43d049038019db222a08
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: total5-installed@total5@0.0.19
Review: not-recorded

Total.js-projecten delen één stijl, en dat is een kracht: je opent er een en weet waar dingen staan en hoe ze geschreven zijn. Deze pagina bundelt de conventies van de [Total.js guidelines](https://github.com/totaljs-es/guidelines) op één plek (de bekeken revisie staat in [ai-sources.json](/ai-sources.json)). Volg eerst de stijl van het project waarin je werkt; dit zijn de standaardregels voor nieuwe code. Lees voor de kant van het framework de [Total.js 5-conventies voor codeerassistenten](/en/docs/totaljs-agent-conventions/).

## JavaScript

- **Bestanden:** namen in kleine letters, met streepjes in plaats van underscores (`user-profile.js`).
- **Opmaak:** tabs (breedte 4), geen overbodige spaties en een puntkomma aan het einde van elke instructie.
- **Strings:** enkele aanhalingstekens voor korte strings.
- **Variabelen:** gebruik `var` of `let` binnen methoden en bewaar `const` voor de bovenkant van een module.
- **Lussen:** waar het past, heeft een klassieke `for` de voorkeur boven `forEach()`.
- **Afhankelijkheden:** houd ze minimaal en volg de code die er al is.

## Namen die tussen projecten meereizen

Gebruik overal dezelfde naam voor hetzelfde, zodat code tussen projecten verplaatst en in één oogopslag gelezen kan worden:

| Naam | Gebruik |
|---|---|
| `id`, `name`, `value`, `email` | de gebruikelijke id, naam, waarde en e-mail |
| `items` or `arr`, `item` | een lijst en een van de elementen |
| `tmp` | een tijdelijke waarde |
| `dtcreated`, `dtupdated` | data van aanmaak en van bijwerking |

**Schema’s** hebben een meervoudsnaam die met een hoofdletter begint (`Contacts`), en id’s worden aangemaakt met `UID()`.

## require() gebruiken

Gebruik bovenaan een module `const` en laat de naam van de variabele met een hoofdletter beginnen: `const Fs = require('fs');`.

## CSS

- Bestandsnamen in kleine letters met streepjes.
- Schrijf elke stijlregel op één regel.
- Schrijf browserprefixen niet met de hand: voeg het commentaar `/*auto*/` toe en Total.js zet de prefixen voor je.
- Enkele aanhalingstekens, en gewone CSS in plaats van LESS of SASS.

## Plugins en componenten (jComponent)

- Kleine letters voor namen van plugins, componenten en de items van `FUNC.`, `MAIN.` en `REPO.`, en voor variabelen.
- Vermijd underscores waar het kan en houd de nesting op twee of drie niveaus.
- Een plugin schrijf je met `exports.`; een component gebruikt `self`, `config` en `cls`.
- Ontwerp voor hergebruik.

## SQL-scripts

- Namen van tabellen en velden in kleine letters, tabs voor inspringing en een puntkomma aan het einde van elke instructie.
- Verwijder onnodige casts, formatteer het script en houd tabellen, views, procedures of functies en indexen in aparte scripts.

| Voorvoegsel | Voor |
|---|---|
| `tbl_` | tabellen, met de naam in het enkelvoud |
| `cl_` | codelijsten |
| `view_` | views |
| `sp_` | stored procedures |
| `fn_` | functies |

In de velden begint `dt` een datum, `is` een boolean, volgen sleutels het patroon `id` of `userid` en wordt `text` gebruikt in plaats van `varchar`. Gebruik `id`, `name` en `dtcreated` waar ze passen en orden de kolommen als id’s, hoofdvelden, getallen, booleans en data, met de foreign key-constraints aan het einde.

## Mappen

Zet afbeeldingen in `/img/`, scripts in `/js/`, stijlen in `/css/`, lettertypen in `/fonts/` en video’s in `/videos/`, en noem de bestanden met streepjes.

## Waarom het helpt

Een gedeelde stijl maakt een project makkelijk over te dragen, te beoordelen en uit te breiden, en geeft een AI-assistent een duidelijk patroon om te volgen. Geef je assistent deze pagina samen met de [Total.js 5-conventies voor codeerassistenten](/en/docs/totaljs-agent-conventions/) en zijn code sluit aan op de rest van je applicatie.