CSS - Como estructurar mi css?

   
Vista:

Como estructurar mi css?

Publicado por Velarde (1 intervención) el 30/10/2011 23:22:35
Hola, quisiera saber si me pueden aclarar algunas dudas sobre como estructurar mi css:

Yo separo la cabecera, contenido y pie en diferentes div, hasta ahi bien. Sucede que tengo una web con varias paginas y formularios, y estos formularios son variables, a veces los input text tienen menor ancho o estan en diferentes coordenadas.
Entonces yo me pregunto ¿como puedo estructurar los divs, de modo que si en algun momento tengo que añadir un nuevo input text, no tenga que estar dandole estilo y repitiendo codigo para llegar darle estilo.
He intentado darle estilo en general a todos los input, pero tambien a veces me topo con que necesito un nuevo input que no tenga ninguno de los estilos que he definido en general, y entonces tengo que darle estilo retirando o sobreescribiendo el estilo que se creo en general, lo cual tambien me resulta largo y tedioso, ya que a veces si no restaure algun valor, se generan comportamientos indeseados.

¿Como suelen dar estilo a elementos que tienen algunas caracteristicas similares, y que a la vez tienen su parte particular? Quisiera saberlo a fin de minimizar el codigo repetido, con algun ejemplito muy simple me bastaria.

Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Como estructurar mi css?

Publicado por DerangedMX (8 intervenciones) el 31/10/2011 18:34:45
Hola Velarde,

en primera instancia, por usabilidad no es recomendable generar estilos distintos para cada sección. Esto es, todos tus formularios y elementos deben lucir igual en toda tu web. De lo contrario al final obtendrás un css enorme y poco funcional. Ahora, para el caso puedes controlar los estilos conformando bloques, por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.bloque_ejemplo {width:200px; float:left; padding:4px; background:#ccc;}
.bloque_ejemplo p {width:100%; float:left; margin:0;}
.bloque_ejemplo input[type="text"] {width:100px; display:block; float:left; background:#e1e1e1; border:1px solid blue; margin:0 0 10px 0;}
.bloque_ejemplo input[type="submit"] {width:100px; float:left; padding:4px;}
 
</style>
<form class="bloque_ejemplo">
	<p>
		<input type="text"></input>
	</p>
	<p>
		<input type="text"></input>
	</p>
	<p>
		<input type="submit"></input>
	</p>
</form>


Como puedes notarlo, "bloque_ejempo" controlará tus genéricos dentro del mismo, de esta forma podrás tener un control de tus elementos, siempre procurando mantener al mínimo este requerimiento.

Espero te sea de utilidad. Saludos.

pki |ssl | certificado de seguridad | certificado digital | cfdi |
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar