Este post fue visto: 1870

En el tiempo que llevo haciendo código CSS, nunca se me había ocurrido –ni remotamente– la posibilidad de una clase con acento, o con eñe. Lo mismo para los ID’s. Lo cierto, es que tampoco se me ocurrió preguntar por qué no. Haciendo un poco de lógica, recordé que ya desde el BASIC no existía la posibilidad de agregar acentos, eñes y otros caracteres propios del idioma.

He aquí una crónica de lo que me pasó hace unos días revisando código.

Cosa e’mandinga

El tema fue que, revisando código CSS, no lograba encontrar un ID por su nombre, y habiéndolo reescrito tampoco obedecía a sus nuevos atributos. Nos fijamos entre varios programadores del equipo y nada. «Cosa e’ mandinga» dijimos. Al explorar nuevamente el código con el Firebug, nos dimos cuenta que el nombre de la clase en cuestión… ¡tenía acento!

«Pero, ¿qué clase de brujería es ésta?» pensamos todos entre risas. Le sacamos el acento y asunto finiquitado.

  • Abre tu cuenta en Payoneer y obtén 25 dólares de regalo!
  • Neolo Servicios de Hosting -- El blog de aleare.design

Ya en casa, me quedé pensando en ello. Me puse a escribir para reproducir el supuesto error, que como verán en el ejemplo de abajo, funciona en tanto en Firefox, Chrome y los IE’s:


Y a continuación, las líneas de código HTML y CSS donde consta lo que vimos arriba:

Raro, rarísimo, pero real.

.
Cuestión de entidades

Aunque la prueba fue superada, el consejo final es NO usar clases con acento para nombrar clases o IDs en el CSS. ¿Por qué? Porque los navegadores interpretan los acentos y eñes y demás como «caracteres especiales» y los convierten en entidades con porcentajes (por ejemplo, un espacio en blanco pasa a ser %20). Pero ahora, si se incluyen scripts dentro de la página, ahí es donde se arma flor de merengue: el script se confunde, lee esa entidad con porcentajes y lo interpreta como una instrucción. La recomendación incluye no abusar tampoco del uso de los guiones medios y bajos.

.
No me nombres (mal)

A la hora de buscar nombres, lo mejor siempre es usar los más simples. Si son más de dos palabras se puede usar la inicial en mayúscula, como por ejemplo div.RecuadroPrincipal ó div.ColumnaMenuIzq. Vale nombrar las clases en el idioma que prefieran, español, inglés, ruso o quechua, pero sin meter caracteres especiales.

Siempre traten de simplificar al máximo y comentar. No olviden nunca que el código que generamos hoy, en unos meses será revisado por otro programador, o por nosotros mismos; de esta forma nos ahorramos horas de buscar y rebuscar y recontrabuscar.

¡Espero que esta experiencia les sirva para aplicar a su propio código!

Avatar

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.

Deja una respuesta

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

Cerrar

Sobre mí

¡Bienvenidos a mi blog! Mi nombre es Alejandra y soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora.

Fundadora de aleare design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades de Argentina y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005