# El estilo de código de Total.js: nombres, archivos, CSS, SQL y componentes

> Las convenciones de la comunidad Total.js para JavaScript, nombres, esquemas, require(), CSS, plugins y componentes de jComponent, scripts SQL y carpetas, para que todos los proyectos se lean igual y un equipo o un asistente de IA pueda continuarlos.

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

Los proyectos Total.js comparten un mismo estilo, y eso es una fortaleza: abres cualquiera y sabes dónde está cada cosa y cómo está escrita. Esta página reúne en un solo lugar las convenciones de las [Total.js guidelines](https://github.com/totaljs-es/guidelines) (la revisión consultada está en [ai-sources.json](/ai-sources.json)). Sigue primero el estilo del proyecto en el que trabajas; estas son las pautas por defecto para código nuevo. Para la parte del framework, lee [convenciones de Total.js 5 para asistentes de código](/en/docs/totaljs-agent-conventions/).

## JavaScript

- **Archivos:** nombres en minúsculas, con guiones en lugar de guiones bajos (`user-profile.js`).
- **Formato:** tabuladores (ancho 4), sin espacios de más y punto y coma al final de cada sentencia.
- **Cadenas:** comillas simples para las cadenas cortas.
- **Variables:** usa `var` o `let` dentro de los métodos y reserva `const` para la parte superior de un módulo.
- **Bucles:** se prefiere un `for` clásico a `forEach()` cuando encaja.
- **Dependencias:** mantenlas al mínimo y sigue el código que ya hay.

## Nombres que viajan entre proyectos

Usa el mismo nombre para lo mismo en todas partes, de modo que el código se pueda mover entre proyectos y se lea de un vistazo:

| Nombre | Uso |
|---|---|
| `id`, `name`, `value`, `email` | el identificador, el nombre, el valor y el correo habituales |
| `items` or `arr`, `item` | una lista y uno de sus elementos |
| `tmp` | un valor temporal |
| `dtcreated`, `dtupdated` | fechas de creación y de actualización |

Los **esquemas** usan un nombre en plural que empieza por mayúscula (`Contacts`), y los identificadores se crean con `UID()`.

## Usar require()

Al principio de un módulo usa `const` y empieza el nombre de la variable con mayúscula: `const Fs = require('fs');`.

## CSS

- Nombres de archivo en minúsculas con guiones.
- Escribe cada regla de estilo en una sola línea.
- No escribas los prefijos de navegador a mano: añade el comentario `/*auto*/` y Total.js prefija las reglas por ti.
- Comillas simples, y CSS normal en lugar de LESS o SASS.

## Plugins y componentes (jComponent)

- Nombres en minúsculas para plugins, componentes y las entradas de `FUNC.`, `MAIN.` y `REPO.`, y variables en minúsculas.
- Evita los guiones bajos cuando puedas y mantén el anidamiento en dos o tres niveles.
- Un plugin se escribe con `exports.`; un componente usa `self`, `config` y `cls`.
- Diseña para reutilizar.

## Scripts SQL

- Nombres de tablas y campos en minúsculas, tabuladores para la sangría y punto y coma al final de cada sentencia.
- Quita las conversiones de tipo innecesarias, da formato al script y mantén tablas, vistas, procedimientos o funciones e índices en scripts separados.

| Prefijo | Para |
|---|---|
| `tbl_` | tablas, con el nombre en singular |
| `cl_` | listas de códigos |
| `view_` | vistas |
| `sp_` | procedimientos almacenados |
| `fn_` | funciones |

En los campos, `dt` inicia una fecha, `is` inicia un booleano, las claves siguen el patrón `id` o `userid` y se usa `text` en lugar de `varchar`. Usa `id`, `name` y `dtcreated` donde encajen, y ordena las columnas como identificadores, campos principales, números, booleanos y fechas, con las restricciones de clave foránea al final.

## Carpetas

Pon las imágenes en `/img/`, los scripts en `/js/`, los estilos en `/css/`, las fuentes en `/fonts/` y los vídeos en `/videos/`, y nombra los archivos con guiones.

## Por qué ayuda

Un estilo compartido hace que un proyecto sea fácil de traspasar, revisar y ampliar, y da a un asistente de IA un patrón claro que seguir. Dale a tu asistente esta página junto con las [convenciones de Total.js 5 para asistentes de código](/en/docs/totaljs-agent-conventions/) y su código encajará con el resto de tu aplicación.