css múltiples

[supratux]

Hola muy buenas, he estado informándome acerca de la forma adecuada de estructurar css para su claridad y posterior modificación.

He visto que recomiendan crear un archivo raiz css por ejemplo estilos.css y luego desde este llamar a los otros archivos css mediante la regla import.

Mi archivo raiz css es el siguiente (estilos.css)

@import "maquetacion.css";
@import "formularios.css";
@import "cabecera.css";
@import "contenido.css";
@import "barralateral.css";
@import "pie.css";

Pues mi duda llega a la hora de plantear mi sitio web puesto que el cliente quiere que las páginas tengan (cabecera, contenido, barra lateral y pie), sin embargo en una página del sitio en especial no quiere que aparezca la barra lateral y que el contenido ocupe el 100 % del ancho.

¿Qué metodología se sigue en este caso?, porque se supone que el css maquetacion.css es común para todas las estructuras de las páginas.

Muchas gracias y cualquier información será muy agradecida.

[Daniel Ulczyk]

Utilizaría esta técnica:

Código:

@import "maquetacion.css";
@import "otra-maquetacion.css";
@import "formularios.css";
@import "cabecera.css";
@import "contenido.css";
@import "barralateral.css";
@import "pie.css";

Y en el archivo otra-maquetación.css escribo las declaraciones que se adapten al requerimiento del documento.

[daPhyre]

Para empezar, creo que "otra-maquetación.css" debería quedar al final, además que solo debería llamarse en este caso. Ahora, nunca he usado esta técnica, ¿pero no se podría mejor sobreescribirse así?:

Código:

@import "maquetacion.css";
@import "formularios.css";
@import "cabecera.css";
@import "contenido.css";
@import "barralateral.css";
@import "pie.css";

div.barralateral{display:none;}
div.contenido{width:100%;}

(Suponiendo que así se llamen los id's determinados)

[Mikmoro]

Mi opinión:

en primer lugar, intentaría hacer la maquetación de manera que si esa columna no estuviera no pasara nada (es posible, y según el caso no muy difícil).

Si por alguna razón no fuera posible, y has de usa la técnica de los import, haría la otra-maquetacion.css que te dice Daniel, y haría una segunda hoja estilos2.css, sustituyendo "maquetacion.css" por "otra-maquetacion.css", que cargaría sólo para esa página.

Para mi gusto, o el sitio es gigante y tiene 300 estilos, o yo no usaría tantas hojas y los import.

Mikel.

[cristiansantana]

concuerdo con lo que dice, y también te puedo ofrecer como alternativa la posibilidad de generar vía php un class especial.. asì.. si el div que contiene la pagina es:

<div id="pagina">

cuando detectes que se trata de la pagina en cuestion sería:

<div id="pagina" class="especial">

de esta forma puedes tener en la misma hoja de estilo "maquetacion.css" definidos los:

#pagina
#pagina.especial

sin necesidad de recurrir a otros archivos css.

Aunque es importante lo que indica Mikmoro, si el sitio no es gigante, quizás no vale la pena hacer tantas separaciones.

[Daniel Ulczyk]

div.barralateral{display:none;}
div.contenido{width:100%;}

Verdaderamente esto es lo que, en tu caso, bien podría ser otra-maquetacion.css
Yo te ofrecí un archivo alternativo, ahora bien: si deseás poner ese contenido entre etiquetas <style></style>
no te voy a decir que está mal. Pero en tu ejemplo, decididamente estás trabajando con CSS externos.
Podés también, como bien dice cristiansantana tener un class para ese div y de esa manera, lo podés declarar cómodamente dentro de barralateral.css
Lo importante es que tu código sea de simple edición, fácil mantenimiento y pueda cubrir en forma sencilla futuras implementaciones.