¿Será una idea incorrecta tener <style> en <body>?


12

En el siguiente código coloqué una hoja de estilo interna con una etiqueta en el cuerpo, en lugar de tenerla en la cabeza. Para la aplicación de una sola página, estoy considerando hacer esto para los estilos que solo se aplican a esa página solo, en lugar de tener un archivo pagespecific.css separado.

¿Hay algún escenario en el que esto tenga inconvenientes ya que no estoy poniendo lo mismo en la sección principal?

<!-- myPartial.html starts here --> 
<!-- Like to keep styles unique to this html right here in this file --> 
<div>
  <style>
    body { background-color: red; }
    #myText { color: white; }
  </style>

  <span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here --> 

Respuestas:


18

Un styleelemento dentro del bodyelemento viola las reglas de sintaxis HTML. (Excepto que según los borradores HTML5, está permitido en algunas condiciones, si los scopedatributos están presentes; este atributo es compatible con algunos navegadores). Por otro lado, a los navegadores no les importa. La división en heady bodyelementos es teórica.

Sin embargo, no gana nada al usar la sintaxis no válida, en lugar de colocarla styledentro head. La única excusa serían las limitaciones técnicas, en algunos entornos de autoría, que podrían impedirle poner algo en la headpieza.

El problema de usar un styleelemento frente a una hoja de estilo externa linkes completamente ortogonal a esta pregunta.


1
La primera parte de tu respuesta no es necesariamente cierta .
patricksweeney

1
@patricksweeney, creo que es algo teórico en este contexto, pero es una observación correcta; respuesta actualizada
Jukka K. Korpela

Tomo "navegadores no me importa" como algo positivo para mi enfoque. Como mis páginas son parciales (Aplicación de una sola página), no puedo tener la sección <head>, la razón por la que estoy tratando de poner dentro de <body> o elementos internos en el cuerpo.
Saran

2
@Galaxy, no veo por qué una aplicación de una sola página carecería de un headelemento. Una página HTML siempre tiene uno.
Jukka K. Korpela

@ JukkaK.Korpela, actualicé parte del código en mi pregunta para responder a su pregunta.
Saran

6

(Dado que estamos aquí en SE.SX, un enfoque más estratégico puede ser un aumento valioso de las consideraciones técnicas habituales).

[preámbulo] La especificación HTML5 es un objetivo en constante movimiento, y tienen una política de seguimiento de la práctica común establecida. Obtuvieron características obsoletas y resucitadas en el pasado, cambiaron el significado de los demás, cambiaron el enfoque de las recomendaciones metódicas, etc. No está escrito para toda la eternidad con toda la sabiduría de la humanidad disponible de una vez. La especificación no es una fuente sagrada de la verdad. Es natural que a veces los navegadores tengan razón. [/preámbulo]

La situación de OP es abrumadoramente común y válida.

Tiene un CMS, con su tema diseñado e instalado, todo el CSS se cargó correctamente desde HEAD, luego ahí está, el editor de páginas, con un cuadro WYSIWYG de moda que puede (¡gracias a Dios!) Cambiar al "modo fuente" y escriba (pegue) en marcado HTML (previamente creado en otro lugar, con herramientas más adecuadas). Afortunadamente, incluso puede incluir STYLEetiquetas (tal vez debido a una omisión fortuita en un filtro de etiquetas) ... El día se salva, de un montón de trabajo gruñido repetitivo que destruye el alma. Pero aún no tiene medios, en absoluto, para interferir con el elemento HEAD del sistema desde un escenario de edición de página.

¿Debería eso evitar que use su CSS de manera directa con sus fragmentos HTML, solo porque la especificación lo dice?

O bien, tiene una aplicación AJAX de una sola página.

Se ejecuta sin recarga durante una sesión larga, y hay contenido sindicado proveniente de varias fuentes aleatorias, todas con un estilo arbitrario e independiente. Requerir que se conviertan primero para usar solo STYLEatributos en línea en lugar de solo venir con un STYLEelemento incrustado sería absurdo.

Además: puede a) incrustar cualquier CSS en cualquier lugar del BODY, a través de STYLEatributos, por lo que CSS es "teóricamente" legal de todos modos; yb) ya puede hacer lo que quiera con casi cualquier estilo, siempre que lo desee (y más) de Javascript, por lo que CSS también es posible usar de manera inadecuada patológicamente. Y ninguno de nosotros objetaría esas características. Tampoco el W3C.

Entonces, ¿qué es exactamente tan malo acerca de los STYLEelementos en el BODY? ¿Cuáles son esas implicaciones adversas adicionales que agregaría a nuestro amplio arsenal de abuso a las construcciones HTML? ¿Más bajo rendimiento? Probablemente. Algunas veces.

¿Es esa una razón válida para abolir esta práctica increíblemente útil, respaldada por cada navegador por una razón? ¡No en un millón de millas!

No somos idiotas Bueno, no todos, o no siempre ...;) Las técnicas con el riesgo de un bajo rendimiento podrían simplemente documentarse , en lugar de simplemente prohibirse. Solíamos tener applets de Java en los primeros días de la web, y sobrevivimos. Los autos pueden ser mal utilizados, causando miseria, incluso los alimentos pueden usarse de maneras perturbadoras e ineficientes, y los conductores que pueden comer pueden ser, en promedio, incluso más estúpidos que el diseñador web promedio. Además, querido W3C, no hay de qué preocuparse: los furiosos rebaños de manipuladores de HTML que tienen sus piernas disparadas con STYLEelementos en el BODYtodavía no pueden perseguir al W3C y vengarse. No saben la dirección. Y no tienen piernas.

Entonces, por favor: ¡haz que se escuche tu voz por STYLEser legal BODY! Citar el texto de manera obediente, pero no proporcionar una alternativa viable que sea mejor que la situación actual no ayuda. En realidad, es una amenaza para esta técnica de solución de último recurso.

Recuerde: la especificación HTML5 se llama recomendación .


Actualización: las especificaciones finalmente atrapados: STYLEes ahora válido en BODY! ;)
lunakid

1
Actualización 2: Las especificaciones no se pusieron al día porque cambiaron de opinión (haga clic en el enlace de lunakid, se actualizó).
Maximillian Laumeister

2

La especificación html establece que

Un elemento de estilo sin un atributo de ámbito se limita a aparecer en el encabezado del documento.

El atributo de ámbito es un valor booleano que indica que debe aplicarse solo al subárbol enraizado en el elemento padre del elemento de estilo.

En este momento, solo Firefox admite el atributo de ámbito. http://www.w3schools.com/tags/att_style_scoped.asp


55
El sitio w3schools no debe citarse como referencia, o en absoluto; ver w3fools.com
Jukka K. Korpela

2
Y esto no responde la pregunta.
Jukka K. Korpela

1
Gracias @ JukkaK.Korpela fue el primer enlace que encontré citando la compatibilidad con el explorador de atributos. El otro comentario proporciona una cita mucho mejor. +1 su respuesta -1 sus comentarios poco constructivos.
crad

+1 para apuntar hacia la especificación, así como señalar la falta de soporte para el alcance (que se requiere para cumplir con la especificación). Creo que deberías haber leído la respuesta antes de lanzar el arma allí @ JukkaK.Korpela, muy pobre. Realmente no puede ser más confiable que la especificación, y responde a la pregunta perfectamente. " Será una idea equivocada tener estilo en el cuerpo ", de acuerdo con la especificación " Sí, lo será ".
Fergus en Londres el

1

Hay algunas razones técnicas para tener su CSS en un archivo frente a una etiqueta de estilo:

  • La capacidad de usar un minificador css (no creo que los minificadores funcionen en etiquetas de estilo)
  • Para que el navegador pueda almacenar en caché el archivo CSS.

Algunas razones basadas en la opinión para usar un archivo:

  • Puede usar un maravilloso preprocesador css como Sass (Compass) o Less.
  • Mantiene dos formas de agregar CSS a su aplicación.

Mi preferencia personal es usar Compass para mantener archivos separados para cada página y luego usarlo para compilarlos en un solo archivo. Ese único archivo se incluiría en cada página. Si en el futuro, los archivos deben separarse por cualquier razón que siempre puedan ser, pero mientras tanto no vale la pena.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.