Organizar CSS

[Hereje]

Hola, me gustaria saber qué formas hay de organizar mis estilos.

Tengo estilos que son comunes para todas las paginas y otros que no, solo para paginas especificas.

¿Conviene tenerlas todas juntas en un mismo archivo o hacer un archivo comun, y luego uno para cada pagina que utilize los otros? ¿Cuál es la mejor forma de incluirlos, por links o @import?

¿Qué pasa si ese archivo comun.css es muy extenso? ¿No seria un problema de carga para mi sitio web? ¿Hay reglas para que mis estilos pesen menos? ¿Agrupando los selectores por diseños en comun quizá?

Disculpen tantas preguntas!!! Muchas gracias y hasta luego.

[juanchilo]

Mira en primer lugar quiero decirte que las formas mas comunes de organizar diferentes hojas de estilos es por medio de links, colocando todos los que afecten al mismo documento documento

<link rel="stylesheet" href="css/estilo.css" type="text/css"/>
<link rel="stylesheet" href="css/estilo2.css" type="text/css"/>
<link rel="stylesheet" href="css/estilo3.css" type="text/css"/>

O sino como dices con el: @import
Pero de las dos recomendaciones la primera (link) es la mejor ya que varios navegadores previos a las versiones 5.5 de explorer o Netscape 5 no lo soportan al @import

Igual quiciera decirte que una de las principales razones de traer los estilos desde un archivo externo (archivo.css) es que el documento html solo llama a los estilos que seran usados por el archivo html (llamados mediante id, o class), por lo que no se cargara en el documento html todos los estilos que definas (como si lo haria si colocas el estilo de forma interna con <style></style>).

En cuanto a conseguir menos peso te recomendaria si que agrupes propiedades dentro de un mismo elemento como por ejemplo:

Border: 1px solid #330000;

que resumiria todo esto:

border-color:#330000;
border-style: solid;
border-width: 1px;

saludos espero te sirba mi aporte

[K3NNY]

Iniciado por juanchilo

Igual quiciera decirte que una de las principales razones de traer los estilos desde un archivo externo (archivo.css) es que el documento html solo llama a los estilos que seran usados por el archivo html (llamados mediante id, o class), por lo que no se cargara en el documento html todos los estilos que definas (como si lo haria si colocas el estilo de forma interna con <style></style>).

Estas seguro que no carga todo el css? Como hace para sacar solamente un estilo en particular que esta a lo ultimo del css sin cargarlo completamente?

[CifuSO]

si tenes razon lo carga todo, lo podes comprobar desde la cache
saludos

[Hereje]

¿Nadie conoce técnicas para optimizar css?

[juanchilo]

Bueno has validado en css tus estilos? puedes optimizar tu codigo de esa manera. Sino comenta a que tipo de optimizacion te refieres.

Puedes probar reduciendo codigo como te di el ejemplo del border mas arriba; tambien puedes hacerlo ejemplo con el font...

Código HTML:

font: 700 12px Verdana, Arial, Helvetica, sans-serif;

o con elementos como el background...

Código HTML:

background: url(images/logos_buscadores.jpg) repeat-x;

saludos

[Hereje]

Ok, gracias por la ayuda. Lo voy a hacer, pero crei que habia algunos trucos para cuando los css se tornan extensos.

Otra cosa, para los css exclusivos para determinada pagina (no comun) conviene poner el codigo en otro link o escribirlo entre <style> en la misma pagina?

[K3NNY]

Si lo escribis entre los <style> de la pagina, cada vez que recarguen esa pagina va a tener que descargar de nuevo todos los estilos, en cambio si lo linkeas a un archivo aparte, no importa cuantas veces recargue la pagina los estilos ya los va a haber descargado, por lo que la descarga seria mas rapida.

[juanchilo]

claro, traelos de forma externa con link