Reglas CSS específicas de la página - ¿dónde ponerlas?

Question

A menudo, cuando estoy diseñando un sitio, necesito un estilo específico para aplicarlo a un elemento específico en una página y estoy absolutamente seguro de que solo se aplicará a ese elemento en esa página (como, por ejemplo, un botón posicionado o algo así). No quiero recurrir a estilos en línea, ya que tiendo a estar de acuerdo con la filosofía de que los estilos se mantienen separados del marcado, por lo que me encuentro debatiendo internamente dónde poner la definición del estilo.

Odio definir una clase o ID específica en mi archivo CSS base para un escenario de uso único, y me da miedo la idea de crear archivos .css específicos de la página. Para el sitio actual en el que estoy trabajando, estoy considerando simplemente poner la definición de estilo en la parte superior de la página en el elemento principal. ¿Qué harías?

Answer 1

Mire para ver si hay una combinación de clases que le daría el resultado que desea. También podría considerar dividir el CSS para ese elemento en unas pocas clases que podrían reutilizarse en otros elementos. Esto ayudaría a minimizar el CSS requerido para su sitio como un todo.

Intentaré evitar el CSS específico de la página en la parte superior de los archivos HTML, ya que eso deja su CSS fragmentado en caso de que quiera cambiar la apariencia del sitio.

Para CSS que realmente, realmente, nunca se utilizará en otra cosa, todavía me gustaría poner una regla #id en el CSS de todo el sitio.

Como el CSS está vinculado desde un archivo diferente, permite que los navegadores guarden en caché ese archivo, lo que reduce el ancho de banda del servidor (muy) ligeramente para cargas futuras.

Answer 2

Los pondría en una etiqueta <style /> en la parte superior de la página.

Answer 3

Para esa situación, creo que poner la información de estilo de página específica en el encabezado es probablemente la mejor solución. La contaminación de la hoja de estilos de todo el sitio parece incorrecta, y estoy de acuerdo con su opinión sobre los estilos en línea.

Answer 4

En ese caso, normalmente lo coloco en la parte superior de la página. Tengo un marco de definición de página en PHP que utilizo que lleva variables locales para cada página, una de las cuales es estilos CSS específicos de la página.

Answer 5

Colóquelo en el lugar donde se vería si quisiera saber dónde se definió el estilo.

Para mí, es exactamente el mismo lugar que colocaría los estilos que usaron 2 veces, 5 veces o 170 veces. No veo ninguna razón para excluir estilos de la (s) hoja (s) de estilo principal (s) según el número de usos.

Answer 6

Creo que definitivamente debe ampliar el proceso de pensamiento para incluir algunas dudas sobre "CSS específicos de la página". Esto debería ser algo muy raro de tener. Yo diría que prefiero las hojas de estilo globales, pero refactorice su css/html de forma que las páginas no tengan que tener un estilo súper específico. Y si al final hay unas pocas líneas de marcado específicas de la página en el CSS global, a quién le importa. Es mejor tenerlo en un lugar constante de todos modos.

Answer 7

No vale la pena cargar un archivo CSS específico de la página para una o dos reglas específicas. Lo colocaría en etiquetas en el encabezado del documento. Lo que suelo hacer es tener mi archivo CSS para todo el sitio y luego usar comentarios, seccionarlo en función de las páginas y aplicar reglas específicas allí.

Answer 8

La definición del estilo en la página de consumo o la alineación de su estilo son dos caras de la misma moneda; en ambos casos, está utilizando el ancho de banda de la página para obtener el estilo. No creo que uno sea necesariamente mejor que el otro.

Yo recomendaría hacer un #Selector en su hoja de estilo principal de todo el sitio. La contaminación es mínima y si realmente tiene muchos casos verdaderamente únicos, es posible que desee replantearse la forma en que marca sus sitios.

Answer 9

Como sabe, los archivos de la hoja de estilos son archivos estáticos y se almacenan en caché en el cliente. También pueden ser comprimidos por el servidor web. Así que ponerlos en un archivo externo es mi elección.

Answer 10

me sentaría un ID para una página como

<body id="specific-page"> or <html id="specific-page"> 

y hacer uso del mecanismo para anular el CSS en el archivo CSS en todo el sitio.

Answer 11

Hay cuatro casos básicos:

1. style = atributo. Este es el menos sostenible pero más fácil de codificar. Personalmente considero el uso de style = ser un error.
   • <estilo> elemento en la parte superior de la página. Esto es un poco mejor que style = porque mantiene el marcado limpio, sin embargo, desperdicia ancho de banda y hace que sea más difícil hacer cambios de CSS, porque no se puede ver la (s) hoja (s) de estilo y saber qué reglas existen.
   • page-specifc css: Esto le permite tener el HTML limpio y limpiar el archivo CSS principal. Sin embargo, significa que su cliente debe descargar muchos pequeños archivos CSS, lo que aumenta el ancho de banda y la latencia de carga de la página. Sin embargo, es muy fácil de mantener.
   • un CSS grande para todo el sitio: la principal ventaja de un archivo grande es que es una sola cosa para descargar. Esto es mucho más eficiente en términos de ancho de banda y latencia.

Si tiene alguna programación del lado del servidor en marcha, que podría ser capaz de simplemente combinar dinámicamente varias hojas # 3 para obtener el efecto de # 4.

Recomendaría un archivo grande, ya sea que lo mantenga como un archivo o genere el archivo a través de un proceso de compilación o dinámicamente en el servidor. Puede especificar sus selectores utilizando ID específicos de la página (siempre incluya uno, por las dudas).

En cuanto al answer that was accepted when I wrote this, no estoy de acuerdo con la búsqueda de una "combinación de clases que le brinde el resultado que desea". Esto me parece que las clases identifican un estilo visual en lugar de un concepto lógico. Tus clases deberían ser algo así como "caja de título" y no "rojo". Entonces, si es necesario cambiar el color del texto en la página de información del usuario, se puede decir

#userInfoPage .titlebox h1 { color : red; } 

No inicie la aplicación de las clases por todo el lugar, porque una clase actualmente tiene una cierta apariencia que desea. Debería poner conceptos de alto nivel en su página, representados por HTML con clases, y luego diseñar esos conceptos, y no al revés.