Guías de estilo de programación para WordPress

¿Sabías que sólo somos tres personas aquí en Nelio? Y aún así nuestras entradas molan, ¿eh? ¡Es gracias a nuestro nuevo plugin, Nelio Content! ¿Por qué no lo usas tú también?

Uno de los motivos por los cuales WordPress ha triunfado es su naturaleza open source: cualquiera puede ver el código fuente del programa y puede contribuir al proyecto… ¡y no únicamente a nivel técnico! Además, la posibilidad de ser extendido a través de temas y plugins también ha promovido la participación de terceras partes en WordPress (nosotros somos un ejemplo de ello). Pero claro, que cualquiera pueda meterle mano tiene sus inconvenientes…

Miedo
Sí, mucha gente en un mismo sitio da un poco de miedo.

…entre los cuales está el hecho de que cada programador tiene su propio estilo de programación. Por ejemplo, tenemos la eterna discusión sobre el uso de tabuladores o espacios para la indexación del código, las convenciones de nombres de variables y funciones, la forma de escribir las condiciones, y un larguísimo etcétera.

¿Cómo podemos conseguir que todo el mundo trabaje igual? ¿Existe alguna fórmula para que todos los desarrolladores sigan las mismas reglas y principios? ¿Podemos crear un proyecto uniforme y coherente, cuando en él participan miles de personas alrededor del mundo?

Qué son las guías de estilo

En un artículo de 2004 en SitePoint, el autor explicaba claramente qué son las guías de estilo y por qué las necesitamos. Por ejemplo, imagina que necesitas crear una variable en PHP para almacenar un nombre de usuario. ¿Cuál usarías tú? ¿$userName? ¿$username? ¿$user_name? ¿Y tus compañeros? Yo, por ejemplo, empecé a programar con Java, así que lo más natural para mí hubiera sido usar “camel case” ($userName). ¡Cada vez que veía algo escrito con “snake case” ($user_name) me parecía horrible!

Poco importa la opción que hayas escogido, ya que sólo estamos hablando de “cuestiones de estilo”, y aquí cada uno tiene el suyo propio. Como ya te avanzaba, el problema aparece cuando tenemos múltiples desarrolladores trabajando en un mismo proyecto, cada uno con su “estilo propio”. Si queremos que nuestro proyecto sea consistente, necesitamos que todos trabajen igual, o podemos acabar con un fragmento tal que así:

donde cada línea es de su padre y de su madre…

Podría haber sido peor.
Podría haber sido peor.

La solución

La solución al problema está en usar las guías de estilo. Una guía de estilo es un sencillo documento que recoge la forma en que los desarrolladores tienen que escribir su código. Si todos los desarrolladores siguen las recomendaciones de la guía, conseguiremos que nuestro proyecto tenga un estilo consistente y evitaremos que parezca un Frankenstein hecho a pedazos.

Normalmente, una buena guía de estilo debería:

  1. Promover que el código sea inteligible
  2. Promover que el código esté organizado en unidades de trabajo comprensibles (funciones no más extensas de un cierto número de líneas, organización en párrafos, etc)
  3. Definir las convenciones de nombres de variables, estilo de espaciados, etc
  4. Indicar cómo comentar el código

Definir una buena guía de estilo no es sencillo, aunque, a poco que busques, en seguida descubrirás que en Internet hay un montón disponibles que podrás adaptar o usar con tu equipo. Pero, claro, aquí estamos hablando del mundo WordPress, y como comunidad open source que somos ya tenemos estas guías definidas. Si todavía no las conoces, permíteme que te las presente en un momento.

WordPress tiene múltiples guías de estilo

Lo primero que debería haberte sorprendido de mi párrafo anterior es que he hablado de guías, en plural. “¿Cómo? ¿Que WordPress define múltiples guías? ¿Por qué?” ¡Muy buenas preguntas, amigo! 👏 Como ya sabes, WordPress es un proyecto web y, como tal, utiliza múltiples tecnologías: PHP, JavaScript, HTML y CSS. Y, como ya debes estar imaginando, tenemos una guía de estilo para cada una de ellas: una para el lenguaje PHPotra para el código en JavaScript, otra más para la maquetación de webs en HTML y una última para los estilos CSS.

No es mi intención entrar a detallar cada una de ellas… más que nada porque toda la información que necesitas está muy bien explicada en las propias guías. Por cada una de las reglas que te dan, encontrarás un ejemplo explicativo de qué hacer y qué no hacer, con lo que no deberías tener ningún problema por seguirlas (incluso si están en inglés). Pero sí que me gustaría destacar algunos de los ejemplos que más me sorprendieron cuando empecé a aplicarlas.

El código más espaciado que has visto en tu vida

Recuerdo que lo que más me impresionó de las reglas de estilo de WordPress fueron el uso de espacios. Hasta entonces, yo estaba acostumbrado a escribir el código de forma bastante compacta:

Pero resulta que en WordPress te invitan a escribirlo muchísimo más espaciado:

Y, obviamente, buscan la coherencia entre los diferentes lenguajes. Aquí tienes un ejemplo en JavaScript:

Si eres como yo, pensarás que “tanto espacio es innecesario”. Pero la verdad es que, cuando te acostumbras, ¡cuesta mucho volver atrás! Estos espacios ayudan a que el código respire y no se vea tan sobrecargado, haciéndolo (en mi opinión) más inteligible y cómodo de leer.

Las condiciones de Yoda

Otra de las cosas que me hizo gracia fue el uso de “condiciones Yoda”. Habitualmente, estamos acostumbrados a escribir las condiciones así:

pero la guía de estilo nos recomienda hacerlo al revés:

poniendo en primer lugar el literal (en este caso, un entero) seguido por la variable. El motivo de este pequeño cambio es que si tecleas mal y en lugar de poner dos iguales (comparación de igualdad) pones sólo uno (operador de asignación), el intérprete de PHP daría un error de sintaxis y podrías identificar rápidamente qué está mal.

Por cierto, si te preguntas por qué se le llama “Yoda condition”, no tienes más que leer este ejemplo y lo entenderás 😂:

Escribe código que se pueda mantener

¿Recuerdas cuando te decía que una buena guía de estilo debería promover la generación de código inteligible? Pues las de WordPress no son una excepción. Por ejemplo, en PHP puedes escribir código como el siguiente:

el cual es totalmente correcto y muy compacto. Ahora bien, si lo comparas con este otro:

está claro que el segundo es mucho más fácil de entender, porque se parece mucho más al lenguaje hablado y es menos críptico. Siempre que estés programando y te encuentres con una situación en la debes decidir si escribir un código un poco más largo y “verbose” u otro breve y “hack”, opta por la primera opción: tu “yo” del futuro o próximos desarrolladores te lo agradecerán.

¡Qué bonito!
Con una buena guía de estilo, la vida es más bella.

¡Cuidado! También existen diferencias que debes tener en cuenta

Finalmente, acabar con un pequeño aviso. Aunque los creadores de las guías han intentado que sean lo más coherentes y uniformes entre sí (ahí tienes el ejemplo del espaciado en los paréntesis), existen algunas diferencias entre unas y otras. Por ejemplo, mientras que en la guía PHP te recomiendan escribir los nombres en “snake case”:

en la guía de JavaScript te piden hacerlo en “camel case”:

Esta pequeña diferencia entre un lenguaje y otro genera “curiosidades” como la siguiente:

Cuando queremos pasar variables de PHP a JavaScript usamos la función wp_localize_script, la cual nos permite definir un objeto con los valores PHP que queremos que estén disponibles en JavaScript. En este caso, vemos cómo las claves del array que estamos creando no cumplen las guías de PHP; esto es debido a que estas variables están pensadas para ser usadas en JavaScript, no en PHP. Me pregunto si esto es correcto así o deberíamos hacerlo al revés… 🤔

Deja que tu editor te ayude

A lo mejor estás pensando que las guías están muy bien y tal, pero que no tienes ni el tiempo ni las ganas necesarios para aprenderlas. A fin de cuentas, depende de ti, programador, aplicarlas o no en tu código, ¿no? ¡Pues te equivocas! Puedes confiar en tu editor de código para ello. 😇

Atom puede configurarse para detectar incorrecciones en el estilo de tu código. Fíjate que te avisa de que no estás usando una condición en formato Yoda.
Atom puede configurarse para detectar incorrecciones en el estilo de tu código. Fíjate que te avisa de que no estás usando una condición en formato Yoda.

En entradas anteriores, mi compañero Antonio te ha hablado de Atom; un editor de código elegante y versátil. Pues bien, una de las ventajas del Atom es que puedes configurarlo para que compruebe automáticamente si el código que estás escribiendo cumple con las guías de estilo que tú le indiques y, si no cumples con algún requisito, que te salte un aviso o un error para que puedas corregirlo. Huelga decir que este consejo no sólo depende de Atom. Yo, por ejemplo, lo uso en Vim, y seguramente también puedas configurar tu editor para ello.

Ola fútbol
¡Ese Atom, como mola, se merece una ola!

Y ahora te toca a ti, compañero. ¿Qué opinas de las guías de estilo de WordPress? ¿Las sigues? ¿Preferirías que fueran otras? ¿Dejas que tu editor te ayude? Déjanos tu opinión en los comentarios y lo hablamos.

Imagen destacada de Glenn Carstens-Peters.

por

Lidera el análisis y diseño de nuestros servicios, así como el servicio de soporte a los usuarios. Es Doctor en Computación por la UPC y siempre ha estado interesado en una gran variedad de áreas, incluyendo el modelado conceptual, la realidad virtual y la impresión digital en 3D. Contribuye muy activamente en la comunidad WordPress, habiendo participado en meetups, seminarios y en la WCEU.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *