{"id":690,"date":"2008-02-21T11:49:00","date_gmt":"2008-02-21T13:49:00","guid":{"rendered":"http:\/\/aleare.com.ar\/web\/css-clases-con-acento\/"},"modified":"2021-06-20T20:40:15","modified_gmt":"2021-06-20T23:40:15","slug":"css-clases-con-acento","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/css-clases-con-acento\/","title":{"rendered":"CSS: Clases con acento"},"content":{"rendered":"
<\/div>

En el tiempo que llevo haciendo c\u00f3digo CSS, nunca se me hab\u00eda ocurrido \u2013ni remotamente\u2013 la posibilidad de una clase con acento, o con e\u00f1e. Lo mismo para los ID’s. Lo cierto, es que tampoco se me ocurri\u00f3 preguntar por qu\u00e9 no. Haciendo un poco de l\u00f3gica, record\u00e9 que ya desde el BASIC no exist\u00eda la posibilidad de agregar acentos, e\u00f1es y otros caracteres propios del idioma.<\/p>\n

He aqu\u00ed una cr\u00f3nica de lo que me pas\u00f3 hace unos d\u00edas revisando c\u00f3digo.<\/p>\n

\nCosa e’mandinga<\/h4>\n

El tema fue que, revisando c\u00f3digo CSS, no lograba encontrar un ID por su nombre, y habi\u00e9ndolo reescrito tampoco obedec\u00eda a sus nuevos atributos. Nos fijamos entre varios programadores del equipo y nada. \u00abCosa e’ mandinga\u00bb dijimos. Al explorar nuevamente el c\u00f3digo con el Firebug<\/span><\/a>, nos dimos cuenta que el nombre de la clase en cuesti\u00f3n… \u00a1ten\u00eda acento!<\/p>

\r\n\"Samsung<\/a>\r\nSamsung Galaxy Tab A11 Color Gris Capacidad 64 GB Ram 4GB | $256.090<\/span>\r\n

Ver m\u00e1s productos <\/i><\/a><\/p>\r\n<\/div><\/div>\n

\u00abPero, \u00bfqu\u00e9 clase de brujer\u00eda es \u00e9sta?\u00bb pensamos todos entre risas. Le sacamos el acento y asunto finiquitado.<\/p>

\"Abre<\/a><\/div><\/div>\n

Ya en casa, me qued\u00e9 pensando en ello. Me puse a escribir para reproducir el supuesto error, que como ver\u00e1n en el ejemplo de abajo, funciona en tanto en Firefox, Chrome y los IE’s:<\/p>\n

\"\"<\/a>
\nY a continuaci\u00f3n, las l\u00edneas de c\u00f3digo HTML y CSS donde consta lo que vimos arriba:<\/p>\n

\"\"<\/a>Raro, rar\u00edsimo, pero real.<\/p>\n

.<\/span>
\nCuesti\u00f3n de entidades<\/h4>\n

Aunque la prueba fue superada, el consejo final es NO usar clases con acento para nombrar clases o IDs en el CSS. \u00bfPor qu\u00e9? Porque los navegadores interpretan los acentos y e\u00f1es y dem\u00e1s como \u00abcaracteres especiales\u00bb<\/span> y los convierten en entidades con porcentajes<\/strong><\/span> (por ejemplo, un espacio en blanco pasa a ser %20<\/strong>). Pero ahora, si se incluyen scripts dentro de la p\u00e1gina, ah\u00ed es donde se arma flor de merengue: el script se confunde, lee esa entidad con porcentajes y lo interpreta como una instrucci\u00f3n. La recomendaci\u00f3n incluye no abusar tampoco del uso de los guiones medios y bajos.<\/p>\n

.<\/span>
\nNo me nombres (mal)<\/h4>\n

A la hora de buscar nombres, lo mejor siempre es usar los m\u00e1s simples. Si son m\u00e1s de dos palabras se puede usar la inicial en may\u00fascula, como por ejemplo div.RecuadroPrincipal<\/span> \u00f3 div.ColumnaMenuIzq<\/span>. Vale nombrar las clases en el idioma que prefieran, espa\u00f1ol, ingl\u00e9s, ruso o quechua, pero sin meter caracteres especiales.<\/p>\n

Siempre traten de simplificar al m\u00e1ximo y comentar. No olviden nunca que el c\u00f3digo que generamos hoy, en unos meses ser\u00e1 revisado por otro programador, o por nosotros mismos; de esta forma nos ahorramos horas de buscar y rebuscar y recontrabuscar.<\/p>\n

\u00a1Espero que esta experiencia les sirva para aplicar a su propio c\u00f3digo!<\/p>\n

\u0421ollaborator<\/a><\/div>