... Y esto es lo que pasa cuando uno se descuida

[metacortex]

Sólo que luego de echar todo el código del mundo me doy cuenta que la hoja de estilos sobrepasó los 50kb y sigue en aumento . Pienso que podría haber solucionado muchos casos de forma más estratégica y ahorrar un montón de tiempo/esfuerzo. A estas alturas resultaría extremadamente complicado optimizar el código, ya que -además- los estilos ya están fijados en el html de todo el portal.

Según esta experiencia, por supuesto voy a tomar en cuenta un aspecto que nunca había pensado, el cual es la planificación previa de todo el código a utilizar. Por lo demás nunca más dejo que una hoja de estilos se infle de esa manera. Afortunadamente no me pierdo en el código porque ya saben, uno inevitablemente conoce cada palmo de su propio trabajo (no faltaba más ).

Si alguien tiende a planificar previamente el código a utilizar sería bueno que compartiera parte de sus métodos. Personalmente siempre he trabajado "por instinto" y -tal como mencioné- nunca antes me había sentado con lápiz y papel a construir un bosquejo de estilos. Estoy seguro que de haberlo hecho, me hubiese ahorrado como mínimo la tercera parte del CSS actual.

Al que quiera curiosear un poco les dejo el archivo aquí.

[Daniel Ulczyk]

En lo personal, trato de seguir siempre estas líneas, separando así los bloques

• reseteo de la hoja de estilo
• definición de elementos básicos (body, p, ul, ol, li)
• clases más comunes
• selectores específicos para ciertas partes de la página
• diseño de la plantilla

Además, considero separar los estilos en documentos separados

• reset.css
• plantilla.css

agrupando los siguientes bloques:

• contenedores
• encabezado
• navegación
• contenido
• pie de página

• contenido.css
• formulario.css

Para casos como > 50 Kb, suelo utilizar Compresores de CSS
Con tu archivo de ejemplo, he conseguido bajar a 47 Kb (sin tocar una línea de código). Aunque bueno... una vez subido al server, es obligatorio quedarse con la anterior versión para futuras modificaciones.

No es mucho con lo que te puedo aportar; espero te sea útil.

[DoPeY-BBS]

Me parece interesante este tema ya que, estoy empezando a codificar mi primera hoja de estilo para la competencia de css que se esta efectuando actualmente.

Daniel Ulczyk si pudieras explicarme un poco mas como se realizan esos procesos y con un ejemplo básico, te lo agradezco.

[Rafael]

Interesante tema realmente.
Es un tema que contínuamente le estoy dando vueltas para refinar.
Las ventajas que busco son principalmente reciclar código y facilidad para modificar.
Igual que daniel, separar en algunas hojas diferentes cosas.

• Layout principal
• Navegación
• Estilo (Tipografía)
• Id específicos.

Quizá minimizar los Id.
Algo importante creo es tener un primer layout básico. En teoría las hojas de estilo son para modificar rápidamente el look de una página. Tener muchos Id creo, es casi casi tener que modificar las cosas una por una.

[metacortex]

Interesante el método de Daniel. Ahora me dio curiosidad por saber qué es el "reseteo" .

Iniciado por Daniel Ulczyk

Con tu archivo de ejemplo, he conseguido bajar a 47 Kb (sin tocar una línea de código). Aunque bueno... una vez subido al server, es obligatorio quedarse con la anterior versión para futuras modificaciones.

Es lo malo de la compresión, hay que estar todo el tiempo modificando y comprimiendo.

Iniciado por Daniel Ulczyk

• reseteo de la hoja de estilo
• definición de elementos básicos (body, p, ul, ol, li)
• clases más comunes
• selectores específicos para ciertas partes de la página
• diseño de la plantilla

Buenísimo. Es casi la misma estructura de estilos que aplico. Adicionalmente luego de las clases comunes (tu punto 3) ubico todos los estilos sujetos a sobrescribirse (lo que hace que a primera vista mis hojas parezcan "desordenadas" pero no lo están en realidad). También me gusta usar sufijos que ayuden a identificar la parte de la web donde se aplican. Igualmente trato de mantener concordancia entre el nombre de las imágenes de fondo y los estilos. Si no fuese por esto me perdería en el limbo a partir de cierto punto.

También me gusta el uso de múltiples clases. En este campo me estoy iniciando y también estoy convencido de que -una vez tomado como método regular- ayudaría muchísimo a la simplificación de la hoja. Lo que veo es que si se van a aplicar varias clases (como método) se hace necesaria una planificación previa, la cual comenzaría desde el mismo diseño (siempre comienzo por el diseño). Sería muy bueno contar con la pericia para diseñar en Photoshop, tomando en cuenta -así por reflejo- la posible aplicación de múltiples clases. Y como "la práctica hace al maestro" mejor comienzamos con esto desde ya . El nuevo plan es éste:

1.- Planificación de la interfaz.
2.- Prediseño y luego planificación previa de estilos (el paso nuevo).
3.- Diseño sujeto al paso 2.
4.- Maquetación sujeta a 1) el paso 2/3, y 2) a la aplicación web a implementar.
5.- Explorer.

Iniciado por Rafael

Quizá minimizar los Id.
Algo importante creo es tener un primer layout básico. En teoría las hojas de estilo son para modificar rápidamente el look de una página. Tener muchos Id creo, es casi casi tener que modificar las cosas una por una.

Puede ser. Como dice mi abuela "cada ID es un mundo". Creo que la forma de minimizarlos es reemplazándolos -hasta donde se pueda- por clases múltiples más aprovechables. Por ejemplo, suponiendo que hay 2 páginas internas que varían un poco el aspecto, en lugar de nombrarlas con 2 ID diferentes (e hijos nuevos) mejor se crean unas buenas clases reutilizables que puedan ser empleadas una y otra vez. El CSS nos permite esto:

Código:

<div class="contenedor noticias azul talcosa">

Sólo con eso ya nos permitimos cambiar muchas cosas dentro de un "contenedor" que originalmente viene con unos estilos, y luego son sobreescritos por los siguientes. Creo .

Bueno ése es el plan. Cuestión de probar. A primera vista lo veo razonable.

[Mikmoro]

Ojo con las clases múltiples y IE6: haz unas pruebas.

Yo creo que hay tres métodos suficientemente diferenciadores antes que eso:
1.- identificar los elementos por tipo y procedencia (#menu span a)
2.- por clase
3.- por ID

Es decir:
- primero identificamos los elementos de manera genérica (span a {...}), con una propiedades determinadas
- si queremos modificar un grupo de esos elementos, siempre podremos usar su procedencia y aplicar únicamente las modificaciones (#header span a {font-size:...})
- si todavía debemos refinar más para uno o varios de los elementos de ese grupo, podremos aplicarle una clase y aplicar sólo las diferencias con su genérico o procedencia (#header span a.especiales {color:...})
- y si todavía nos falta precisión para un único elemento en una página, entonces ya le aplicamos un ID.

Con estos niveles debería ser suficiente para identificar cualqueir elemento o grupo de ellos.
Una de las ventajas de la semántica será precisamente que podamos controlar los elementos por sus genéricos y procedencia, ya que estarán colocados cómo y dónde deben, lo que nos hará el código más lógico, sencillo y entendible.

Es mi opinión.

[conmenta1965]

Hola desde EyRWeb.net .

Disculpa que no te sea muy conciso con tu duda pero como puedes comprobar estoy intentando indexar este nuevo proyecto y estoy algo más que atareado.

Pero si me ha parecido muy interesante tu hoja CSS. Realmente entiendo lo que mencionas en el post porque parece realmente elaborada con una gran casacada, por lo menos a mi entender y mis conocimientos en la materia.

Pero me ha llamado la atención un aspecto:

He visto una secuencia que creo que es el origen de tu situación, que es la siguiente y que se repite varias veces:

li#enlaceVen... {... }
li#enlaceVen... a {...}
ul#menuPri... {...}
ul#menuPri... li {...}
ul#menuPri... li a {...}
ul#menuPri... li a:hover {...}

En total son: "li", "ul" "a" y ":hover" = 4. Y (solo en esta sección has colocado 6. Hay una diferencia de 2. 2+2+2... es un porcentaje que puede llegar apróximadamente al 40% del total de los bloques en cuestión.

Simplificar quieres simplificar. Repito, según mis conocimientos, creo que este es un buen método.

Disculpa que no te facilite más información, pero como te he mencionado al comienzo ando algo más que atareado. Soy de los que de una manera u otra tenemos que trabajar al ritmo que marcan los grandes porque, los pequeños somos muchos, pero nunca hemos sido todos juntos; igual de grandes que los grandes. Soy un apasionado de la Historia, principalmente la Antediluviana.

Saludos.

[Daniel Ulczyk]

Iniciado por metacortex

Interesante el método de Daniel. Ahora me dio curiosidad por saber qué es el "reseteo" .

El tema sobre los alcances del reset.css lo he leído por primera vez, si mal no recuerdo, en el sitio de Eric Meyer.
El cual está basado en el conocimiento que todos los navegadores tienen valores de presentación por defecto; no obstante, no siempre son ellos idénticos.

La puesta en práctica y el uso de esta técnica, empareja de alguna manera estas diferencias. Permitiendo así trabajar más cómodamente.

Existen, disponibles, varias técnicas que no distan mucho una de otras sobre los contenidos y declaraciones de este tipo de hojas de estilo.

Luego, ubicaré enlcaces sobre donde consultar otras, aparte de las citadas.

[ruben-et]

Perdonar mi ignorancia pero, que pasa cuando el archivo CSS sobrepasa los 50Kb?
supongo que será muy obvio pero soy nuevo en CSS.
En respecto a la forma de escribir el código yo no realizo ninguna previsión pero ya se que esto tiene que cambiar por que al inal es un desastre.
Saludos Cracks

[Rafael]

Mmm, nada, es una barrera psicológica de que como que le tenemos que ajustar algo a la paginita en cuestión.

[metacortex]

Iniciado por Rafael

Mmm, nada, es una barrera psicológica de que como que le tenemos que ajustar algo a la paginita en cuestión.

Con casi 4000 líneas de código (y el problema que representa) creo que la cosa es más que una barrera psicológica (que también la hay) ;)

[Daniel Ulczyk]

Iniciado por metacortex

Si alguien tiende a planificar previamente el código a utilizar sería bueno que compartiera parte de sus métodos.

Tenía presente que algo había escrito oportunamente en mi blog; el tema es que en mi anterior, no lo había encontrado...
Ya, el año pasado, publiqué 20 recomendaciones para CSS, una traducción libre del artículo en inglés publicado por aPaddedCell.

Si a alguien le resulta útil, enhorabuena.