Estimado Quique:
No existe ningún problema en utilizar id's, class o ambos. Eso es un tema de
diseño (y elegancia, profesionalidad, rendimiento, etc.).
El estándar define el uso de los id para identificación única de un elemento
HTML. El uso de class es para agregar un contenido semántico a un elemento HTML.
Me explico mejor: existe un sólo Quique en la lista; por tanto su id será
Quique.
Sin embargo, existen muchas mujeres (class="mujer") u hombres (class="hombre")
o programadores en php (class="php_programmer") u odiadores de mal software
(class="hate_ie") o que procuran cumplir el estándar (class="check_std").
por tanto, el elemento podría ser <... id="Quique" class="check_std">
pero también podrías dar más información semántica en el atributo class,
simplemente aumentando el nuevo contenido semántico separado por un espacio:
<... id="Quique" class="check_std hombre">
Donde se quiere expresar que el elemento es único (Quique) y que cumple los
estándares (al igual que muchos otros) y que es hombre.
Esta analogía -sin pretender ser irrespetuosa con las calidades intelectuales
de los miembros de nuestra lista- pretende mostrar la diferencia entre id y
class.
En el diseño en mi empresa, utilizamos mucho id y class (juntos y mezclados).
En el diseño de las páginas, creamos áreas de diseño únicas y distintivas pero
que tienen los mismos elementos. Por ejemplo, noticias y menúes. Estos
conjuntos de datos tienen básicamente la misma estructura:
Noticias:
========
<ul>
<li class="primero">Noticia 1</li>
<li>Noticia 2</li>
.
.
.
<li>Noticia n</li>
</ul>
Menú:
====
<ul>
<li class="primero">Opción 1</li>
<li>Opción 2</li>
.
.
.
<li>Opción m</li>
</ul>
Si deseamos dar formato a estos componentes, tenemos varias opciones: colocar
el contenido semántico a los elementos mayores. P.e. <ul class="menu"> y <ul
class="noticias"> o (al ser únicos y diferentes) podemos darles
"identificación". P.e. <ul id="menu"> y <ul id="noticias">
La definición de los estilos podría ser realizada, para el primer caso de la
siguiente manera:
ul.menu { color... }
ul.menu li { font... }
ul.noticias { color... }
ul.noticias li { font... }
En el segundo caso sería:
#menu { color... }
#menu li { font... }
#noticias { color... }
#noticias li { font... }
ya que no interesa el elemento que se define, porque es único.
Para cualquier elemento que es primero (no necesariamente de una lista) se
podría crear una definición:
.primero {border: ....}
Si el primero de noticias es diferente del primero de menú, se puede definir
también en forma especial:
#menu ul.primero {backgorund-color:... }
#noticias ul.primero {backgorund-color:... }
Para definir el comportamiento de todos los primeros de noticias (primero de la
lista, de la fila de una tabla, de un párrafo, etc) se podría definir como algo
así:
#noticias .primero {font ... }
Finalmente, en mi empresa preferimos definir las cosas de la siguiente manera:
Noticias:
========
<div id="noticias">
<ul>
<li class="primero destacado">Noticia 1</li>
<li>Noticia 2</li>
.
.
.
<li>Noticia n</li>
</ul>
</div>
Menú:
====
<div id="menu">
<ul>
<li class="primero">Opción 1</li>
<li class="destacado">Opción 2</li>
.
.
.
<li>Opción m</li>
</ul>
</div>
Que sería la estructura (el HTML) y que, como ya aprendimos, facilita la
presentación (el CSS).
Espero sea de utilidad.
Saludos.
--
Alejandro Salamanca Mazuelo
Gerente General
DeveNet SRL
[email protected]
Cel. 591-2-70618872
DeveNet Srl - Software para Internet
Telf. 591-2-2117985
[email protected]
Av. 20 de Octubre #2473 Edif. Topáter Piso 2, Of. 204
La Paz - Bolivia
www.devenet.net
----- Mensaje original -----
De: "stripTM" <[email protected]>
Para: "la lista de CSS en castellano Ovillo" <[email protected]>
Enviados: Miércoles, 28 de Enero 2009 19:22:16 GMT -04:00 Caracas / La Paz
Asunto: Re: [Ovillo] ¿Es correcto mezclar id y class?
Ignacio Ricci escribió:
> Si pero por ejemplo si tengo una lista de elementos, y quiero destacar el
> 1ro,
> le puedo dar una clase a todos y agregarle un ID al primero.
>
> Es muy comun hacer eso. No es o usas clases, o usas IDS.
>
>
Y si en lugar de una lista tienes dos, ya con el id no te vale.
Yo lo haría
<ul>
<li><strong>...</strong></li>
<li>...</li>
</ul>
o
<ul>
<li class="destacado">...</li>
<li>...</li>
</ul>
Aunque lo chulo de verdad sería pasar del explorer y usar first-child ;-)
--
Saludos -=stripTM=-
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
