Guías de estilo oficiales para HTML, CSS y Javascript

44

21

Según la Wikipedia, el estilo de programación es:

Estilo de programación (también llamado estándares de código o convención de código) es un término que describe convenciones para escribir código fuente en ciertos lenguajes de programación.

El estilo de programación es frecuentemente dependiente del lenguaje de programación que se haya elegido para escribir. Por ejemplo el estilo del lenguaje de programación C variará con respecto al del lenguaje BASIC.

En varios lenguajes existen guias de estilo que podríamos llamar "oficiales" como en el caso de PHP y Python, aunque son una recomendación, no un estándar obligatorio:

En HTML, CSS y JS utilizo las guías de estilo de Google:

HTML/CSS Style Guide

JavaScript Style Guide

Mi pregunta es:

¿Existen otras guías de estilo más reconocidas u "oficiales" para HTML, CSS y JS?

Shaz

Posted 2016-09-02T12:13:51.253

Reputation: 15 215

3@ArtEze Si no estoy mal esta pregunta ya a tenido ya algunas recompensas y con una respuesta ya aceptada y con varias preguntas muy buenas no entiendo que más fondo se puede llegar a mi me parece muy completa las respuestas.J. Doe 2017-03-28T21:36:44.760

@J.Doe Me gustaría que se hable un poco más del ECMA-262, pero es cierto, están bastante bien.ArtEze 2017-03-28T21:47:25.290

3@ArtEze Hubiese sido mucho mejor que se cree una nueva pregunta basada en ese tema más aún con aquella recompensa se obtendrá muchas respuesta basadas a solo a ese tema.J. Doe 2017-03-29T03:31:17.940

2

Estoy bastante seguro que w3schools sería el estandard en esto.

Miquel Coll 2016-09-02T12:19:42.247

No sólo puedes tener estilos por lenguaje sino por frameworks, cada uno puede generar guías de estilo diferentes.devconcept 2016-09-02T12:43:09.227

Pues supongo que "oficial" sería la de la w3c https://www.w3.org/Provider/Style/ , solo da unas pautas bastante generales aunque luego tenemos las especificaciones, pautas de accesibilidad, etc que también nos dicen como escribir el código.

blonfu 2016-09-02T13:31:34.843

MDN de Mozilla es un gran referente, por no decir el que mas apoyos recibe, un proyecto solido y con seguimiento continuo.UnderZero_- 2016-09-02T13:36:39.797

5@Shaz difícil entender a los moderadores u administradores la pregunta se trata de opiniones e sugerencias y es aceptada sin embargo otras preguntas que se basa a lo mismo es rechaza o peor aún mencionan que esperas que escriba el código por ti estos es decepcionante se necesita dar una recompenza al parecer para que una pregunta que no se basa a las politicas o el uso del sitio. Más de uno menciono que el sitio es para ayudar en errores que se presenten.J. Doe 2016-09-15T13:41:30.413

6@J.Doe en este caso mi problema es que no sabía (no sé) si existen guías de estilo de código oficiales o reconocidas, no estoy pidiendo opiniones sobre cuál es mejor o cuál prefieren.Shaz 2016-09-15T13:57:40.957

3@Shaz Ok entiendo con lo dicho no es que no este de acuerdo, pero la intriga es que muchas preguntas son cerradas por no poseer código cómo un problema, en ocaciones son similares a su pregunta y son cerradas o puesto en espera lo justo de aquellas preguntas que se esperen tres días para así el usuario observando que no tiene reapuesta pueda iniciar con una recompenza. Las reglas no se aplican para todos una pregunta que no se rechace alparecer se incia con recompenzas.J. Doe 2016-09-15T14:09:20.550

2

@J.Doe dices que "muchas preguntas son cerradas por no poseer código cómo un problema" pero resulta que esas preguntas por lo general son del formato "Tengo problema con <funcionalidad>. ¿Cómo lo hago?" o "Me sale un error al hacer <foo>. Ayuda." o también "Necesito que mi programa pueda hacer <bar>. ¿Sugerencias?". Son cerradas principalmente por no demostrar un esfuerzo para resolver el problema. Un ejemplo de pregunta que no necesita código es esta y que fue mal cerrada.

– None – 2016-11-17T19:36:15.577

4Esta pregunta no se ajusta bien al formato del sitio: aunque es específica, se basa principalmente en opiniones y todas las preguntas puede ser igualmente válidas. Es un caso similar al de la pregunta sobre IA: una pregunta que debería estar cerrada pero que no se acabará cerrando nunca porque tiene tantas visitas y votos positivos que siempre habrá quien (en mi opinión, equivocadamente) la acabe reabriendo.Alvaro Montoro 2016-11-17T20:38:52.863

Answers

42

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://make.wordpress.org/core/handbook/best-practices/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.

devconcept

Posted 2016-09-02T12:13:51.253

Reputation: 7 563

@devconcept difícil entender a los moderadores u administradores la pregunta se trata de opiniones e sugerencias y es aceptada sin embargo otras preguntas que se basa a lo mismo es rechaza o peor aún mencionan que esperas que escriba el código por ti estos es decepcionante se necesita dar una recompenza al parecer para que una pregunta que no se basa a las politicas o el uso del sitio. Más de uno menciono que el sitio es para ayudar en errores que se presenten.J. Doe 2016-09-15T13:36:56.440

@J.Doe Tienes razón con que la pregunta puede ser basada en opiniones pero es un tema que interesa a muchos. Mi respuesta no se limita a mencionar guías sino a tratar el problema subyacente. La solución a la ley de trivialidad es zanjar la discusión (muchos jefes de equipo entienden esto). Si no puedes convencer de tu punto de vista usa un estándar reconocido. La razón por la que menciono las diferentes guías es porque para contribuir a algunos repositorios Open Source debes conocer de la existencia de ellas de lo contrario los pull-request serán rechazados aunque el código esté bien.devconcept 2016-09-15T13:47:10.570

@devconcept yo entiendo igual no estoy en contra pero si la ley se aplica para uno pues que sea para todos es lo más justo. Ejemplo mi pregunta se a rechazado tres veces y cerrada sin poder esperar los dos días para iniciar una recompenza. Adicional aquello mi pregunta puede ser de interes un sistema de tags que funciona correctamente muchos les gustaria tener un sistema de tag es un tema de interes solo por querer mejorar el sistema no es aceptada.J. Doe 2016-09-15T13:55:22.907

8

Con una búsqueda rápida a través de tu buscador de confianza puedes encontrar lineamientos para HTML, CSS y JavaScript como por ejemplo:

Para el caso particular de JavaScript te recomienda que revises el estándar de ECMAScript el cual da la especificación propia del lenguaje y utilices la herramienta JSLint para una correcta codificación.

Fabio Julián Bernal

Posted 2016-09-02T12:13:51.253

Reputation: 194

w3Schools es popular pero no es oficial. Según entiendo ECMAScript incluye guías de estilo ya que se trata de la especificación del lenguaje, como lo mencionas. JSLint como tal es una herramienta pero detrás de esta debería haber algo que fundamente como opera, eso podría ser una guía de estilo.Rubén 2017-06-29T19:04:33.790

8

te diría que uses las guías de esta página (aunque están en inglés) http://www.w3schools.com para HTML y CSS, suelo utilizarlas cuando tengo alguna duda o no me acuerdo de alguna propiedad y van genial. Para Javascript suelo usar https://developer.mozilla.org/es/docs/Web/JavaScript que si bien es de un navegador, la encuentro bastante completita. De todas formas, w3schools también te sirve para Javascript, tiene un apartado para ello (y para otras cosillas también). La de mozilla también tiene una sección para HTML y CSS dividida en 3 niveles, este sería el enlace: https://developer.mozilla.org/es/docs/Web/Tutoriales y eliges el nivel (aunque no suelo mirar esta para HTML y CSS, prefiero w3school).

Claro que después, depende de los frameworks etc que utilices, quizás algunas cosas de las guías no te sirvan de mucho, pero en esos casos sería buscar la guía de ese framework en cuestión.

Luego, si esas páginas no me sirven o no me entero mucho de que dicen, suelo buscar por foros o por páginas web explicativas como puede ser http://www.aulaclic.es/index.htm o http://librosweb.es/ . La última suele traducir las guías oficiales de otras cosas como Bootstrap 3 (framework) a español.

Dianne

Posted 2016-09-02T12:13:51.253

Reputation: 302

7

Una de las guías de estilo para JavaScript que más y mejor acogida está teniendo es la del equipo de desarrollo de Airbnb. Está muy bien documentada y consta de numerosos ejemplos. En ese repo también encontrarás una guía para CSS-in-JavaScript y otra para CSS & Sass que están muy bien.

eledgaar

Posted 2016-09-02T12:13:51.253

Reputation: 1 142

6

Guía de estilo para HTML, CSS y Javascript.

Pues no hay nada mejor que las fuentes oficiales:

  • Fuente oficial HTML w3.
  • Fuente oficial CSS w3.
  • Una guía completa basada a la pagina oficial w3 con muchos ejemplos html, css, javascript y jQuery es w3schools todos los ejemplos son sencillos originales sin nigun tipo de complementos u plugin.
  • Fuente oficial de javascript seguramente es le herencia de jQuery en su documentación se encuentran muchos ejemplos https://jquery.com/ hasta de como crear tu propio plugin

Existen otros sitios adicionales con muy buenos estilos y una guia completa paso a paso:

Para mi la mejor guía completa en estilos tanto para html, css, y javascript es w3schools en w3schools existen muchos ejemplos sencillos avanzados y muy prácticos.

J. Doe

Posted 2016-09-02T12:13:51.253

Reputation: 562

2

Existe un organismo encargado de actualizar y crear nuevos estándares web: el llamado W3C o WORLD WIDE WEB Consortium.

W3Schools es un popular sitio web para el aprendizaje de tecnologías web en línea podrás encontrar el estándar HTML CSS JavaScript y algun lenguaje más de programación. No está afiliado con el W3C.

Podrás encontrar varios temarios sobre cada lenguaje, los más útiles: Tutoriales, Ejemplos y Referencias.

En primer lugar, veamos el estándar HTML

Estándar HTML:
http://www.w3schools.com/html/default.asp

Aquí te explican detalladamente cada etiqueta HTML.

Etiquetas HTML ordenadas alfabéticamente

Referencia de etiquetas HTML:
http://www.w3schools.com/tags/default.asp


Podrás también validar tu web en W3C, para así comprobar si tu web cumple con los estándares HTML.


Ejemplos para estándar CSS

Estándar CSS
http://www.w3schools.com/css/default.asp

Podrás encontrar todos los ejemplos necesarios para añadir estilos CSS a nuestras web.


Referencia de CSS
http://www.w3schools.com/cssref/default.asp


Podrás también validar tu CSS, para comprobar si cumple con los estándares.


Ejemplos para estándar JavaScript

Estándar JavaScript
http://www.w3schools.com/js/js_intro.asp


Esta página contiene algunos ejemplos de lo que JavaScript puede hacer.

JavaScript y HTML DOM referencia:


JQuery es una biblioteca JavaScript.

http://www.w3schools.com/jquery/jquery_intro.asp



Otros Ejemplos:

Tambien te dejo un página de W3Schools con grandes ejemplos utilizando HTML, CSS, JavaScript y jQuery (Ejemplos como Slideshow, Modal login, ..., Progress Bars, etc.):


Guía de JavaScript:
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide

D.Bulten

Posted 2016-09-02T12:13:51.253

Reputation: 3 800

1

Ya que hay excelentes respuestas con explicaciones. Me limitaré a citar algunas de las guías de estilo más usadas y/o conocidas actualmente, ofreciendo los enlaces a cada una de ellas:

HTML/CSS

  1. Primer de Github
  2. Google CSS/HTML Style Guide
  3. Idiomatic CSS
  4. CSS Guidelin
  5. ThinkUp
  6. WordPress
  7. CodeGuide
  8. W3 Schools
  9. jQueryFoundation: HTML y CSS
  10. Mozilla HTML en General / HTML5 / CSS

Javascript

  1. Google
  2. jQuery Foundation
  3. W3 Schools
  4. Mozilla
  5. Javascript.com
  6. WordPress
  7. Standard.js
  8. Hapijs
  9. Drupal
  10. Moodle

Espero que este 10 + 10 sea útil.

A. Cedano

Posted 2016-09-02T12:13:51.253

Reputation: 22 638