Te cuento como yo lo hago a ver si te funciona:
1- Definir primero las áreas grandes con divs y los id: #header, #content,
#sidebar, #footer -puede que necesite uno que contenga a los demás para
cuestiones de posicionamiento- en ese caso creo uno mas y lo nombro #wrapper
o #container y dentro de él coloco los anteriores (usualmente el #content y
el #sidebar).
2- Dentro de cada uno de ellos colocar los divs (si son divisiones), span
(si son elementos gráficos o decorativos), ul, p, img etc. Siempre teniendo
en mente la semántica y el correcto uso de cada etiqueta.
3- Indicar dentro de la division los atributos de los elementos:
Ej.:
#content p {font-size: 80%; width:394px; height:33px; margin:0 0 10px 0; }
#content h1 {...}
#content span {...}
(así todos los párrafos, titulos y span dentro de ese div tendrán esos
atributos)
4- Si necesito un estilo específico para algún elemento, por ejemplo
los *#content
h1* del home que serían con imágenes y serían distintos a los internos, uso
clases o ids tipo:
#content h1.nosotros {...}
#content h1#clientes {...}
5- Repetir el proceso con los divs principales, #header, # footer, #sidebar,
etc. siempre teniendo en mente a provechar la característica de cascada, así
como el ahorro de etiquetas innecesarias o equivocadas, por ejemplo colocar
un div o span para un párrafo de texto.
Ahora mismo trabajo en esta: http://www.leonelsilva.com/sj/
Por acá el css a ver si te ayuda:
http://www.leonelsilva.com/sj/css/screen.css
Saludos
2010/4/9 Rafa Artacho <teme...@gmail.com>
> Explico un poco por qué esta manera de trabajar, al llegar me encontré con
> un site muy grande ya hecho, el cuál no se había planificado en absoluto,
> por ejemplo, cada diseño de página mantenía una coherencia visual, pero
> variaba el tamaño de letra en 1px, o una era bold, cambiaba un poco el tono
> de color, la posición y ancho de las cajas y sus backgrounds eran
> diferentes, por lo tanto, me era imposible reutilizar las clases que se
> habían creado en cascada, por ejemplo:
>
> .tabladetalles03 .contcolunma03
> .contfila01{padding-bottom:5px;border-bottom-style:none;width:500px;}
>
> Toda esa ristra de selectores solo me servía únicamente para una página,
> por
> lo que opté por atomizar los estilos lo que me daba una mayor flexibilidad
> a
> la hora de maquetar con menos clases. Por ejemplo, para las cajas
> contenedores, creé unas clases que variaban en su ancho en 10px, por
> ejemplo:
>
> block01{float:left; width:20px;}
> block02{float:left; width:30px;}
>
> y los mismo con los textos: text_1, text_2, etc...
>
> Ahora que vamos a empezar de 0, entiendo que debería concretar con el
> diseñador un manual de estilo para hacer unos diseños más homogéneos y
> poder
> usar selectores del tipo anterior, .tabladetalles03 .contcolunma03
> .contfila01{padding-bottom:5px;border-bottom-style:none;width:500px;}
>
> ¿es así?
>
>
>
>
> 2010/4/9 Leonel Silva <lsi...@gmail.com>
>
> > Creo que hay que leer más sobre el uso de CSS y sobre el porque se habla
> de
> > *estilo en cascada*; me parece absurdo tener 80 clases de texto, primero
> > por
> > lo engorroso luego a la hora de cambiar parámetros a un estilo, y que
> > afecte
> > en varias partes que no se sabe cuáles contenedores son, hay que adivinar
> > que tipo de letra (clase) está colocado en que sitio, con el perdón pero
> > esto no tiene sentido, lo lógico es indicar dentro de cada contenedor
> como
> > sería el estilo de cada texto, aún un sitio tan grande como amazon indica
> > el
> > contenedor y dentro de el las características de la tipografía, hay que
> ver
> > el código fuente de *http://www.amazon.com/ *-que tiene incrustado el
> css-
> > donde especifican dentro de cada div, ul, span o lo que sea de que
> tamaño,
> > color, estilo y tipo va a ser la letra.
> >
> > Si te sirve de ejemplo estas son algunas hojas de estilo hechas por gente
> > que sí sabe del tema:
> >
> > *Jason Santamaría:* http://jasonsantamaria.com/css/master.css
> > *Jeffrey Zeldman:*
> > http://www.zeldman.com/wp-content/themes/zeldman-v2/style.css?0323100834
> > *A list Apart:* http://www.alistapart.com/css/base.css
> >
> > Suerte.
> >
> >
> > 2010/4/9 Ramón Corominas <lis...@ramoncorominas.com>
> >
> > > Siguiendo con el ejemplo de Ernesto, lo que no estaría mal es que
> > > defináis varias clases distintas para poder combinarlas, pero haciendo
> > > referencia a nombres más estructurales que de presentación. Por
> ejemplo:
> > >
> > > <div class="titular biografia">Casanova</div>
> > >
> > > O bien que en la propia hoja de estilos se contemplen distintas
> > > posibilidades según la herencia:
> > >
> > > <div class="biografia">
> > > <div class="cabecera">...</div>
> > > <div class="cuerpo">...</div>
> > > <div class="relacionados">...</div>
> > > </div>
> > > <div class="opinion">
> > > <div class="cabecera">...</div>
> > > <div class="cuerpo">...</div>
> > > </div>
> > >
> > > .biografia .cabecera {}
> > > .biografia .cuerpo {}
> > > .biografia .relacionados {}
> > > .opinion .cabecera {}
> > > .opinion .cuerpo {}
> > >
> > > Saludos,
> > > Ramón.
> > >
> > > Ernesto escribió:
> > > > identificado con su nombre y con su definición correspondiente en
> > > > la hoja de estilos, de tal manera que quedase algo como (por
> ejemplo):
> > > >
> > > > <div class="TitularBiografias">Cassanova</div>
> > > >
> > > > Y que el estilo TitularBiografia tuviese definido el tamaño de letra,
> > > color, cursiva, etc...
> > > >
> > >
> > > _______________________________________________
> > > Lista de distribución Ovillo
> > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > > 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 Ovillo@lists.ovillo.org
> > 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 Ovillo@lists.ovillo.org
> 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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
