# The Total.js code style: names, files, CSS, SQL and components

> The conventions of the Total.js community for JavaScript, names, schemas, require(), CSS, jComponent plugins and components, SQL scripts and folders, so that every project reads the same and a team or an AI assistant can continue it.

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

Total.js projects share one style, and that is a strength: open any of them and you know where things are and how they are written. This page collects the conventions of the [Total.js guidelines](https://github.com/totaljs-es/guidelines) (reviewed commit recorded in [ai-sources.json](/ai-sources.json)) in one place. Follow the style of the project you are working in first; these are the defaults for new code. For the framework side, read [Total.js 5 conventions for coding assistants](/en/docs/totaljs-agent-conventions/).

## JavaScript

- **Files:** lowercase names, with dashes instead of underscores (`user-profile.js`).
- **Layout:** tabs (width 4), no extra whitespace, and a semicolon at the end of every statement.
- **Strings:** single quotes for short strings.
- **Variables:** use `var` or `let` inside methods, and keep `const` for the top of a module.
- **Loops:** a classic `for` loop is preferred over `forEach()` where it fits.
- **Dependencies:** keep them to a minimum and follow the code that is already there.

## Names that travel between projects

Use the same name for the same thing everywhere, so that code can be moved between projects and read at a glance:

| Name | Use |
|---|---|
| `id`, `name`, `value`, `email` | the usual identifier, name, value and e-mail |
| `items` or `arr`, `item` | a list and one of its elements |
| `tmp` | a temporary value |
| `dtcreated`, `dtupdated` | dates of creation and update |

**Schemas** use a plural name that starts with an uppercase letter (`Contacts`), and identifiers are created with `UID()`.

## Using require()

At the top of a module use `const`, and start the name of the variable with an uppercase letter: `const Fs = require('fs');`.

## CSS

- Lowercase file names with dashes.
- Write each style rule on a single line.
- Do not write vendor prefixes by hand: add the `/*auto*/` comment and Total.js prefixes the rules for you.
- Single quotes, and plain CSS instead of LESS or SASS.

## Plugins and components (jComponent)

- Lowercase names for plugins, components and the entries of `FUNC.`, `MAIN.` and `REPO.`, and lowercase variables.
- Avoid underscores where you can, and keep the nesting to two or three levels.
- A plugin is written with `exports.`; a component uses `self`, `config` and `cls`.
- Design for reuse.

## SQL scripts

- Lowercase names of tables and fields, tabs for indentation and a semicolon at the end of each statement.
- Remove casts that are not needed, format the script, and keep tables, views, procedures or functions and indexes in separate scripts.

| Prefix | For |
|---|---|
| `tbl_` | tables, with the name in the singular |
| `cl_` | code lists |
| `view_` | views |
| `sp_` | stored procedures |
| `fn_` | functions |

In the fields, `dt` starts a date, `is` starts a boolean, keys follow the pattern `id` or `userid`, and `text` is used instead of `varchar`. Use `id`, `name` and `dtcreated` where they fit, and order the columns as identifiers, main fields, numbers, booleans and dates, with the foreign key constraints at the end.

## Folders

Put images in `/img/`, scripts in `/js/`, styles in `/css/`, fonts in `/fonts/` and videos in `/videos/`, and name the files with dashes.

## Why it helps

A shared style makes a project easy to hand over, review and extend, and it gives an AI assistant a clear pattern to follow. Give your assistant this page together with the [conventions for coding assistants](/en/docs/totaljs-agent-conventions/) and its code will match the rest of your application.