IceBeat

Yo uso la camelCase esta, la cual ni zorra que se llamava asi, pensava que en css, guion en el medio no se podia usar... y guion bajo, no me gusta esteticamente jjajaajjaj

saludos!

Me parece con mucho sentido que uses el '-' debido a que las propiedades de CSS lo utilizan. Sin embargo, el '-' como bien apuntas, es utilizado como signo aritmetico. El '_' me parece poco estetico tambien, acordando con Mitsu. CamelCase sin duda para mi :) asi lo hacemos en (fm) :)

En CSS cuando los aplico a elementos si es un id (con #nombreEstilo) lo suelo poner en camelCase, si es un class (con .nombre-estilo) lo suelo poner con el guión.

El motivo de esto es porque con mootools se me hace más cómodo llamar a los elementos usando camelCase... no se, me suena mejor poner $('miElemento') a $('mi-elemento')

En php a las variables que son de una clase las pongo con camelCase también, al resto con el guión bajo _

Aunque reconozco que a veces mezclo estos métodos, pero al final al corregir código lo pongo siempre así.

He probado todas y tardé mucho en decidirme, en parte por que depende hasta de la tipografía que uses en tu editor de texto. Al final gana el Guión Medio, porque se lee muy bien y es genial para hacer elementos correlativos, por ejemplo:

.news .news-title .news-description .news-featured

Aunque en algunos casos, suelo combinar con camelCase

.vEntries .vEntries-main .vEntries li.first

Aunque en PHP (como en C) se usa mucho el guión bajo creo que no es nada apropiado, está en deshuso y los namespace están reservados de esa forma, con lo cual preservas la posibilidad de error en cualquier nombre de variable o función.

PD: El guión-medio provoca algún error conocido en CSS o JS en IE, no recuerdo bien el caso pero se da muy poco.

Yo no uso ninguna de las tres. Si necesitas nombre de más de dos palabras para las clases es que algo estás haciendo mal.

Bueno, ya en serio, no suelo usar más de una palabra porque las CSS que hago no sulen tocarlas otros así que ya tengo mi "idioma" y yo con nombres cortitos me apaño. Suelo usar cosas como "ppal", "lat", "pie", "repie", "cabecera", "central"... pero si tuviera que usar nombres compuestos nunca usaría CamelCase porque creo que es la más dada a equivocarse al escribirla. Probablemente me quedaría con guión bajo, para distinguir mejor de las propiedades.

Yo utilizaba el camel case porque aprendí a programar en Pascal y por aquella época ese estilo estaba de moda. Hace un par de años me pasé al guión medio que tiene alguna desventaja como la de que la mayoría de editores no seleccionan todo el id al hacer doble click sobre él.

Sin embargo tiene una gran ventaja sobre el camel case y es que según el estándard HTML 4 (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2) tanto los valores de id como class son sensibles a mayúsculas y minúsculas lo que suele provocar errores muy difíciles de detectar. Así que en mi experiencia la mejor opción es utilizar el guión medio con todas las letras en minúsculas.

Lo de utilizar solo minúsculas es importante porque no todos los navegadores siguen el estándard, asi que mientras #AAA y #aaa son identificadores totalmente distintos para el estandard en algunos navegadores pueden resultar ser iguales, lo que podría introducir errores muy dificiles de encontrar.

PD: Alguien se anima a crear un espacio virtual en google docs o similar para definir entre todos una guía de estilo y buenas maneras para CSS? Estoy seguro que con el conocimiento y la experiencia de todos los que comentan aquí se podría tener algo publicable en pocas semanas.

Se me olvidó responder a @4

El único problema que conozco con el guión medio es con Opera. En su implementación de los selectores por atributos con "|=" solo coge como valor de comparación el texto hasta el primer guión. Pongo un ejemplo:

div[class|="mi-clase"]

En todos los navegadores excepto Opera compararía la lista de valores con "mi-clase" pero en Opera compararía solo con "mi".

En realidad este tipo de selector es realmente útil en conjunción con la nomemclatura del guión medio. La he usado muy poco porque IE6 no la soporta pero las posibilidades son amplias. Podemos utilizar prefijos para agrupar propiedades con este selector y ahorrar un monton de líneas de CSS haciendo no solo cascada sino tambien un sistema de 'herencia' muy simple pero potente.

CamelCase

En el caso de las clases la primera es minúscula, y en el caso de los ids la primera es mayúsculas, aunque eso ya es manía :)

CamelCase A todas los motivos, escritos antes, añado: te ahorras un caracter

Entonces estamos entre CamelCase y guión medio.

@Jorge Hernández como dice @frenadoll para agrupar elementos viene muy bien, por ejemplo en microformatos se usan .entry-title, .entry-content.

Vaya no he caído en nombres cortos.

@DrSlump algo he leído sobre eso, pero no me acordaba.

No estaría mal esa guía jeje.

yo siempre uso camelCase, para no liarme, ya que tambien lo uso en todos los lenguajes de programación que utilizo :)

¿Y si ninguna fuera más acertada que otra? Después de todo, sólo son convenciones.

yo uso las dos primeras!

guión-medio ... :D (Claro, en CSS)

He encontrado este artículo en el que está todo muy bien explicado, para los todavía indecisos: http://www.brownbatterystudios.com/sixthings/2006/11/21/forming-effective-css-classes-ids/

PD:

Se rompió el comentario... usa:

.comment p { overflow: hidden; white-space: nowrap; }

ah, y algún día aprenderé Markdown :)

@frenadoll muchisimas gracias por el enlace, este parece que lo explica mejor que yo jeje.

@Josep Tarrés pero alguna tendremos que seguir :P.

@frenadoll markdown es una gozada.

Pues yo uso _ porque tiendo a usar lo mismo que en PHP. La costumbre, vamos. No me gusta demasiado lo del CamelCase, me parece más claro usar _ ...

@IceBeat, acabo de memorizar Markdown desde la wikipedia y ahora solo tengo ganas de integrarlo en mis sites :P

Supongo que estas alturas ya estáras jugando con la 1.2 de mootools... Espero que podamos debatir en próximos posts.

very cool

@David Martínez yo creo que casi todo lo hacemos por costumbre, pero en CSS es mejor adaptarse al potencial que nos ofrece.

@frenadoll jejeje, sin duda una buena elección. Tengo el RSS del svn de mootools con eso te lo digo todo jeje. He visto mas cambios en la libreria que hay que desglosarlos poco a poco.

Gran tema el que se toca aqui, y esta duda se aplica no sólo a CSS, si no que a toda la programación.

He preguntado en varios lados al respecto (a través del tiempo) y parece ser que no hay ninguna regla al respecto, si no más bien "formas usuales" de codificar. Estas formas usuales están dadas por normativas del lugar donde trabajas + estilo de programar en el lenguaje X + tu propio estilo.

Así por ejemplo, se ve que en PHP se usa bastante el "_" y en JS cambelCase. Pero el problema se torna confuso en la programación web, ya que se comienzan a mezclar estas distintas nomenclaturas debido a la conjunción de diferentes ambientes de trabajo.

@Jorge Henandez: "Yo no uso ninguna de las tres. Si necesitas nombre de más de dos palabras para las clases es que algo estás haciendo mal."

espero que eso haya sido broma, porque de verdad lo parece.

"Bueno, ya en serio, no suelo usar más de una palabra porque las CSS que hago no sulen tocarlas otros así que ya tengo mi "idioma" y yo con nombres cortitos me apaño. Suelo usar cosas como "ppal", "lat", "pie", "repie", "cabecera", "central""

bueno, parece que no era broma. dejame decirte que una de las 10 reglas de programación es comentar lo más posible como si no fuera para ti. esto es precisamente porque ayuda tanto al que alguna vez tiene que ver el código, como a ti mismo en un futuro.

por lo demás, los tiempos en que se escribía limitado por la longitud de nombres, se dejó atrás hace como una década. escribir en pseudo monosílabos es cosa de los '80.

@vladimir prieto Tienes todas la razón, dependiendo de nuestro estilo y del lugar de trabajo solemos crear un caos a la hora de escribir, yo por suerte aunque estoy solo en frontend puedo decir que escribo para mis compañeros, porque son ellos los que dependen de mi a la hora de modificar algo y claro si lo dejo todo mas semántico se las apañan mejor.

Yo uso el guión bajo (_) por una simple hecho de mejora de productividad en Windows... Me explico, si quiere seleccionar el nombre de una clase rapidamente para hacer copy&paste, lo hago usando el doble click, y si usara el guión medio solo me seleccionaría una palabra y no el nombre completo de la clase/id. Bien es cierto que tambien podría utilizar el camelCase, pero es si momento elegí lo otro y desde entonces no he cambiado, aunque esteticamente la opción que más me gusta es esta última. Lo único que me echa para atrás es que me gusta que todo lo que vaya en las etiquetas HTML (incluido atributos) esté en minúsculas. Arghhh, que dificil decisión!!!

Por cierto, aprovecho para comentar por si alguien no lo sabe que lo más apropiado para los nombres de imágenes y otros archivos es el guión medio (-).

Salu2

Ioz que tal maquina. En textmate podemos incluir ciertos caracteres para poder seleccionar las palabras.

Si puedes comentar un poco más sobre el ultimo parrafo mejor que mejor, me has dejado interesado.

Hola IceBeat,

Encantado de saludarte de nuevo. Veo que te va bien en tu vida profesional.

A lo que me referia en cuanto a utilizar guiones medios en los nombres de archivos para web, es por un tema de posicionamiento. Normalmente la mayoría de los buscadores a la hora de rastrear webs y archivos, y puntuarlos para los resultados, tratan los nombres de archivos que contienen guinones medios dividiendolos en palabras por cada guion que encuentran, mientras que si utilizas guiones bajos lo ven como una sola palabra. Es decir, si tu archivo se llama "mi-colibri-pequines.jpg", el buscador le asignaria los keywords "mi", "colibri" y "pequines"; mientras que si se llama "mi_colibri_pequines.jpg" solo le asignaria el keyword "mi_colibri_pequines". De todas formas, y según he leido recientemente, buscadores como Google ya están cambiando esto para considerar los guiones bajos también como separadores de palabras. Si quieres, tienes algo más de info en el blog de Matt: http://www.mattcutts.com/blog/dashes-vs-underscores/

Salu2 desde Bogotá :-P

@IoZ madre mía si que tas ido lejos, gracias por la explicación y siento contestar tan tarde :_(