El propósito de las guías es ayudar a lidiar con la Ley de la trivialidad, también conocida en el desarrollo de software como el efecto de la caseta de bicis.
Algunas de estas son requeridas si intentas contribuir de alguna forma en algunos repositorios y librerías publicas (ej karma). Todo esto ayuda a que el código sea fácil de mantener aunque sea escrito por múltiples desarrolladores (incluso aunque no tengan contacto entre sí).
Todo el código de cualquier fuente debería parecer escrito por una sola persona sin importar cuantos han contibuido
Otra de las razones de dichas guías es ayudar a lidiar con la algunas de las rarezas de los lenguajes.
Muchas de ellas comparten similitudes como el uso de var al principio de las funciones para evitar hoisting y no usar el eval.
Voy a mencionar las más notables para JavaScript.
Guía de Crockford
Este es un personaje muy conocido del mundo de los navegadores, entre otras cosas por haber inventado JSON y haber escrito un libro "JavaScript, the good parts". Las reglas más notables son
Uso del operador ternario en líneas diferentes
condicion1 && condicion2
? expresión
: expresión
Uso de la expresión de retorno en la misma línea para evitar la inserción del punto y coma automático.
// Recomendado
return expresion;
return {
propiedad: 'valor'
};
// No recomendado
// Se convierte en return; lo que resulta en undefined
return
{
propiedad: 'valor'
}
Guía de jQuery
Uso de corchetes en bloques
if/else/for/while/try
Siempre usan corchetes {} y siempre van en múltiples líneas
if (true)
alert();
se transforma en
if (true) {
alert();
}
Operadores unarios
Los operadores unarios (ej., !, ++) no deben tener espacios con respecto a su operador
// No recomendado
a ++;
(! a)
Guía de npm
No usan puntos y comas ; salvo contadas ocasiones
Ciclos for(;;). Son requeridos por el lenguaje.
Ciclos nulos while (condición); (Obviamente no recomendado).
Instrucción case en una misma línea que el break case 'valor': hazAlgo(); break
En frente de un paréntesis ( o corchete [ al inicio de la línea. Esto evita que la expresión sea interpretada como una llamada a función o un acceso a una propiedad respectivamente.
Ejemplo
;(x || y).doSomething()
;[a, b, c].forEach(doSomething)
for (var i = 0; i < 10; i ++) {
switch (state) {
case 'begin': start(); continue
case 'end': finish(); break
default: throw new Error('unknown state')
}
end()
}
Coma al principio
Divide una expresión larga en sus comas y pon las comas al principio
var magicWords = [ 'abracadabra'
, 'gesundheit'
, 'ventrilo'
]
, spells = { 'fireball' : function () { setOnFire() }
, 'water' : function () { putOut() }
}
, a = 1
, b = 'abc'
, etc
, somethingElse
Guía JavaScript Standard
Usa un solo var por línea
// Recomendado
var a;
var b;
// No recomendado
var a, b;
Siempre usa window
// No recomendado
alert();
// Recomendado
window.alert();
Guía de estilo de node
Usa return para reducir código
// Recomendado
function isPercentage(val) {
if (val < 0) {
return false;
}
if (val > 100) {
return false;
}
return true;
}
// No recomendado
function isPercentage(val) {
if (val >= 0) {
if (val < 100) {
return true;
} else {
return false;
}
} else {
return false;
}
}
No crees funciones dentro de funciones para evitar el anidamiento a menos que sea estrictamente necesario
// Recomendado
setTimeout(function() {
client.connect(afterConnect);
}, 1000);
function afterConnect() {
console.log('winning');
}
//No recomendado
setTimeout(function() {
client.connect(function() {
console.log('losing');
});
}, 1000);
Guía de airbnb
Esta viene con detalles adicionales para lenguajes y frameworks como SASS, ES6 y React
Usa destructuración para acceder a las propiedades de los objetos cuando quieres asignarlas a variables.
// No recomendado
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// Recomendado
function getFullName(user) {
const { firstName, lastName } = user;
return `${firstName} ${lastName}`;
}
// La mejor variante posible
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
Siempre usa clases en lugar de manipular el prototipo directamente
// No recomendado
function Queue(contents = []) {
this.queue = [...contents];
}
Queue.prototype.pop = function () {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
};
// Recomendado
class Queue {
constructor(contents = []) {
this.queue = [...contents];
}
pop() {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
}
}
Idiomatic
Las instrucciones const y let deberían aparecer al inicio de su bloque
// No recomendado
function foo() {
let foo,
bar;
if ( condition ) {
bar = "";
// statements
}
}
// Recomendado
function foo() {
let foo;
if ( condition ) {
let bar = "";
// statements
}
}
Usa truthy para comprobar tamaños de los arreglos y cadenas de caracteres
// No recomendado
if ( array.length > 0 )
if ( array.length === 0 )
if ( string !== "" )
if ( string === "" )
// Recomendado
if ( array.length )
if ( !array.length )
if ( string )
if ( !string )
Estoy seguro que hay más y con el tiempo pueden seguir surgiendo. Cada framework JavaScript puede crear su estilo también por lo que puedes terminar con estilos combinados.
Para CSS puedes consultar
https://css-tricks.com/css-style-guides/
http://codeguide.co/#css
https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS
http://primercss.io/guidelines/
https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/
Recuerda también que puedes escoger no trabajar con CSS, sino con algún lenguaje preprocesador como Sass, Less y Compass que pueden a su vez pueden tener guías de estilo.
Concluyendo, si tienes en consideración la gran cantidad de variantes que existen la solución es que decidas tu propio estilo. Escoge una de las guías y síguela, si te parece que no se ajusta a lo que quieres cambia a otra o hazle pequeñas modificaciones a tu gusto. Lo importante es que tu y los otros que escriban código contigo estén de acuerdo con un estándar y este sea visible a los nuevos desarrolladores.
Te dejo una cita de la guía de node
Una guía para estilar tu código JavaScript/ node.js. Bifurca y ajusta a tu gusto.
