Consejo sobre la siguiente estructura css

neodani · #1 (**permalink**) 23/01/2011, 12:09

Buenas,

Estoy haciendo el apartado de privacidad de la web y quiero poner como dos columnas en la izquierda el titulo y a la derecha un desplegable donde escoger el tipo de privacidad. Lo he conseguido de la siguiente manera... pero me preguntaba si se podría mejorar... y si semanticamente es correcto hacerlo así.

Código HTML:

Ver original<form action="#" method="post" id="privacidad" onsubmit="enviar.disabled=true">   
    <fieldset>
        <p>Eres el dueño de tu privacidad, decide quién con quién quieres compartir la siguiente información.</p>       
        <div class="form_privacidad_izq">                   
            <label class="priva" for="apellidos">Apellidos: </label>
        </div>
        <div class="form_privacidad_der">
            <select name="apellidos" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Nombre: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>      
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Correo electrónico: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>      
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Fecha Nacimiento: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>      
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Pais: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>      
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Población: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>      
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Redes sociales y mensajeria: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>
    </fieldset> 
    <fieldset>  
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Recibir mensajes privados: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>              
        <div class="form_privacidad_izq">                   
            <label class="priva" for="nombre">Recibir retos y desafios: </label>
        </div>      
        <div class="form_privacidad_der">
            <select name="nombre" tabindex="4"><option value="1">Todo el mundo</option><option value="2">Usuarios registrados</option><option value="3">Mis amigos</option><option value="4">Nadie</option></select> 
        </div>      
    </fieldset>
    <div><button class="create" name="enviar" type="submit" id="forgot_password">Guardar cambios</button></div>
    </form>

Muchas gracias de antemano

sanxuan · #2 (**permalink**) 23/01/2011, 13:44

Supongo que tienes razones para utilizar esas tres clases y todos esos div.
Creo que yo hubiese prescindido de crear una clase "priva" y habría añadido sus propiedades en "form_privacidad_izq". En todo caso hubiese usado el selector "#privacidad label" ya que no hay etiquetas <label> que no pertenezcan a esa clase. De esa manera no tendrías que especificar la clase en cada etiqueta <label>.
Puedes prescindir también de la clase "form_privacidad_der" usando el selector "#privacidad .form_privacidad_izq + div" ya que todos los elementos que poseen esa clase van precedidos de un elemento de clase "form_privacidad_izq".
Incluyo "#privacidad" en los selectores porque puedes estar usando esos nombres de clase en otros lugares del documento para otros fines. Si no es así, puedes eliminar esa parte del selector.
No es que esto vaya a funcionar mejor ni que lo estés haciendo mal, el código HTML resultante será más limpio.
Otra persona lo hará seguramente de otra forma.
Se podría incluso incluir los <div class="form_privacidad_der"> dentro de los <div class="form_privacidad_izq">, de esta forma te ahorras el declarar también la clase "form_privacidad_izq".
De esa manera me quedarían los siguientes selectores:
#privacidad label{} /* si fuese necesario */
#privacidad div {} /* se corresponde con form_privacidad_izq */
#privacidad div div {} /* se corresponde con form_privacidad_der */
y ni un solo atributo class en ninguna de las etiquetas del formulario. Sólo el id de <form>

neodani · #3 (**permalink**) 24/01/2011, 01:18

Cita:

Iniciado por sanxuan

Supongo que tienes razones para utilizar esas tres clases y todos esos div.
Creo que yo hubiese prescindido de crear una clase "priva" y habría añadido sus propiedades en "form_privacidad_izq". En todo caso hubiese usado el selector "#privacidad label" ya que no hay etiquetas <label> que no pertenezcan a esa clase. De esa manera no tendrías que especificar la clase en cada etiqueta <label>.
Puedes prescindir también de la clase "form_privacidad_der" usando el selector "#privacidad .form_privacidad_izq + div" ya que todos los elementos que poseen esa clase van precedidos de un elemento de clase "form_privacidad_izq".
Incluyo "#privacidad" en los selectores porque puedes estar usando esos nombres de clase en otros lugares del documento para otros fines. Si no es así, puedes eliminar esa parte del selector.
No es que esto vaya a funcionar mejor ni que lo estés haciendo mal, el código HTML resultante será más limpio.
Otra persona lo hará seguramente de otra forma.
Se podría incluso incluir los <div class="form_privacidad_der"> dentro de los <div class="form_privacidad_izq">, de esta forma te ahorras el declarar también la clase "form_privacidad_izq".
De esa manera me quedarían los siguientes selectores:
#privacidad label{} /* si fuese necesario */
#privacidad div {} /* se corresponde con form_privacidad_izq */
#privacidad div div {} /* se corresponde con form_privacidad_der */
y ni un solo atributo class en ninguna de las etiquetas del formulario. Sólo el id de <form>

Una pregunta.

Tener repetida una clase como en este caso .priva 10 veces, es más lento que declarar la clase tal y como mencionas por ejemplo así, y no tenerla que usar 10 veces, sino que con la declaración css es suficiente:

#privacidad label{}

Eso se nota en velocidad al cargar la página o es simplemente algo semántico?

Alguien seria tan amable de confirmarme este punto por favor?

Muchas gracias de antemano!

sanxuan · #4 (**permalink**) 24/01/2011, 08:05

Es aún más rápido prescindir de clases innecesarias. No te he podido simplificar el código aún más por que no has incluido el CSS en tu pregunta.
Sabiendo para qué va a ser y teniendo la posibilidad de examinarlo, es bastante posible que se hubiese podido eliminar no sólo alguna de las propiedades CSS sino también algo del HTML.
En una hoja de estilos normal, la penalización entre un selector u otro no es tan grande.
El tiempo que tarda en mostrarse la página no va a cambiar tan drásticamente en comparación a otros factores como la cantidad de enlaces, el tamaño de imágenes, el código javascript que se tenga que ejecutar al abrir la página, etc...
Otra cosa distinta sería si utilizases muchos :hover, accedieses mediante Javascript al estilo de algunos elementos etc...
En este otro caso sí que el usar un selector CSS u otro penaliza el comportamiento de la página. No vamos a acceder al CSS una sola vez al inicio, sino que vamos a hacerlo cada vez que pasemos por encima de algo o cuando cambiemos los estilos con nuestro script por la razón que sea.
En general va a ser más rápido usar un id y después un class, pero será aun más rápido tener un código que no incluya etiquetas y clases innecesarias. El tiempo de descarga del fichero puede ser menor y el tiempo de proceso para mostrar la página lo será también.
Quiero dejar claro de nuevo que en una página con el código que tienes y poco más, las diferencias no serán muy grandes. El problema es cuando tenemos páginas muy grandes y/o muy complicadas.
Y de nuevo quiero dejar claro que el código que mostraste ni es incorrecto ni es peor que el que yo te pueda sugerir. Aunque hablemos el mismo idioma, cada uno escoge su vocabulario y sus expresiones favoritas.

neodani · #5 (**permalink**) 24/01/2011, 08:45

Cita:

Iniciado por sanxuan

Es aún más rápido prescindir de clases innecesarias. No te he podido simplificar el código aún más por que no has incluido el CSS en tu pregunta.
Sabiendo para qué va a ser y teniendo la posibilidad de examinarlo, es bastante posible que se hubiese podido eliminar no sólo alguna de las propiedades CSS sino también algo del HTML.
En una hoja de estilos normal, la penalización entre un selector u otro no es tan grande.
El tiempo que tarda en mostrarse la página no va a cambiar tan drásticamente en comparación a otros factores como la cantidad de enlaces, el tamaño de imágenes, el código javascript que se tenga que ejecutar al abrir la página, etc...
Otra cosa distinta sería si utilizases muchos :hover, accedieses mediante Javascript al estilo de algunos elementos etc...
En este otro caso sí que el usar un selector CSS u otro penaliza el comportamiento de la página. No vamos a acceder al CSS una sola vez al inicio, sino que vamos a hacerlo cada vez que pasemos por encima de algo o cuando cambiemos los estilos con nuestro script por la razón que sea.
En general va a ser más rápido usar un id y después un class, pero será aun más rápido tener un código que no incluya etiquetas y clases innecesarias. El tiempo de descarga del fichero puede ser menor y el tiempo de proceso para mostrar la página lo será también.
Quiero dejar claro de nuevo que en una página con el código que tienes y poco más, las diferencias no serán muy grandes. El problema es cuando tenemos páginas muy grandes y/o muy complicadas.
Y de nuevo quiero dejar claro que el código que mostraste ni es incorrecto ni es peor que el que yo te pueda sugerir. Aunque hablemos el mismo idioma, cada uno escoge su vocabulario y sus expresiones favoritas.

Muchas gracias por tus consejos.