Foros del Web » Creando para Internet » CSS »

Estoy malgastando lineas de codigo css?

Estas en el tema de Estoy malgastando lineas de codigo css? en el foro de CSS en Foros del Web. Buenas, Creo que repito muchas declaraciones css, os pongo un ejemplo. Cada formulario de la página tiene el mismo aspecto gráfico pero tiene detalles que ...
  #1 (permalink)  
Antiguo 20/06/2011, 14:05
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 9 años, 10 meses
Puntos: 20
Estoy malgastando lineas de codigo css?

Buenas,

Creo que repito muchas declaraciones css, os pongo un ejemplo. Cada formulario de la página tiene el mismo aspecto gráfico pero tiene detalles que hace que ningún formulario sea igual. Ejemplo el width del formulario o alguna que otra label.

Lo que estoy haciendo son cosas así

Código CSS:
Ver original
  1. #formulario fieldset, #form_registro  fieldset, #form_preferencias  fieldset,#form_contactar fieldset, #form_amigo fieldset,#form_publicar_articulo fieldset, #form_agregar_web fieldset{
  2. -moz-border-radius:5px 5px 5px 5px;
  3. background-color:#EEEEEE;
  4. border:1px solid #DDDDDE;
  5. margin:0 0 15px;
  6. padding:15px;
  7. box-shadow: 3px 3px 5px #EEEEEE;
  8. }

Pero creo que podría usar un único id ejemplo #formulario lo que no tengo claro es como llevar bien el resto de estilos. Seguro que vosotros lo véis más claro, estoy malgastando lineas y haciendo más engorroso mi css, verdad?

Lo que comentaba que cada formulario tiene sus propiedades...

Código CSS:
Ver original
  1. #formulario label,#form_registro label{
  2. font-weight:bold;
  3. font-size:11px;
  4. font-family:'Lucida Grande',Verdana,sans-serif;
  5. padding-left:1px;
  6. width:270px;
  7. float:left;
  8. line-height:15px;
  9. }
  10.  
  11. #form_contactar  label, #form_agregar_web label{
  12. font-weight:bold;
  13. font-size:12px;
  14. font-family:'Lucida Grande',Verdana,sans-serif;
  15. padding-left:1px;
  16. width:250px;
  17. float:left;
  18. line-height:15px;
  19. margin-top:6px;
  20. }
  21.  
  22. #form_preferencias  label{
  23. font-weight:bold;
  24. font-size:12px;
  25. font-family:'Lucida Grande',Verdana,sans-serif;
  26. width:96px;
  27. float:left;
  28. line-height:15px;
  29. }

¿Me proponéis algo más eficiente?

Muchas gracias por vuestra ayuda!
  #2 (permalink)  
Antiguo 20/06/2011, 14:45
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 6 años, 7 meses
Puntos: 309
Respuesta: Estoy malgastando lineas de codigo css?

A lo primero, yo lo pondría así (a falta de información produciría el mismo resultado):
Código CSS:
Ver original
  1. fieldset {
  2. -moz-border-radius:5px 5px 5px 5px;
  3. background-color:#EEEEEE;
  4. border:1px solid #DDDDDE;
  5. margin:0 0 15px;
  6. padding:15px;
  7. box-shadow: 3px 3px 5px #EEEEEE;
  8. }

A lo segundo, podrías usar un selector con las propiedades generales:

Código CSS:
Ver original
  1. label {
  2. font-weight:bold;
  3. font-size:12px;
  4. font-family:'Lucida Grande',Verdana,sans-serif;
  5. float:left;
  6. line-height:15px;
  7. }
  8.  
  9. #formulario label,#form_registro label{
  10. font-size:11px;
  11. padding-left:1px;
  12. width:270px;
  13. }
  14.  
  15. #form_contactar label, #form_agregar_web label{
  16. padding-left:1px;
  17. width:250px;
  18. margin-top:6px;
  19. }
  20.  
  21. #form_preferencias label{
  22. width:96px;
  23. }

Espero que te sirva.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #3 (permalink)  
Antiguo 20/06/2011, 15:31
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 9 años, 10 meses
Puntos: 20
Respuesta: Estoy malgastando lineas de codigo css?

Pero si lo hago así usando el selector por defecto

Código CSS:
Ver original
  1. fieldset {
  2.     -moz-border-radius:5px 5px 5px 5px;
  3.     background-color:#EEEEEE;
  4.     border:1px solid #DDDDDE;
  5.     margin:0 0 15px;
  6.     padding:15px;
  7.     box-shadow: 3px 3px 5px #EEEEEE;
  8.     }

Corro el riesgo que si una vez necesito un fieldset que tenga otra propiedad de margin que tengo que hacer?

#form fieldset{
margin:20px;
}

ó

fieldset .form{
margin:20px;
}

u otra forma?

Gracias
  #4 (permalink)  
Antiguo 20/06/2011, 17:34
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 6 años, 7 meses
Puntos: 309
Respuesta: Estoy malgastando lineas de codigo css?

Pero siempre será mejor que tener que usar un selector kilométrico, ¿no?
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #5 (permalink)  
Antiguo 21/06/2011, 12:54
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 9 años, 10 meses
Puntos: 20
Respuesta: Estoy malgastando lineas de codigo css?

Holas,

Y puedo tener un identificador que sea #formulario con todas las propiedades de ese formulario, que si fieldset, inputs, etc... ejemplo:

#formulario fieldset
#formulario input

etc...

Y luego cada vez que necesite un formulario nuevo con ese estilo escribir

<div id="formulario"> (.............) </div> y dentro de la capa el propio formulario, de esta forma siempre tendrá ese aspecto.

Ahora bien, mi duda viene cuando tienes diferentes formularios, ejemplo Contactar y Registro de usuarios.

Cómo puedo hacer para variar mi #formulario que es comun para todos para que diferencie cuando se trata de un formulario u otro?

Ejemplo veo que el formulario contactar lo unico que cambia es el fieldset el resto es igual.

Puedo hacer algo así <div id="formulario contactar"> (.............) </div>

#formulario #contactar fieldset?
o
#formulario .contactar fieldset?
u otra forma válida?

Muchas gracias de antemano

Etiquetas: lineas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:50.