Respuestas:
Solo para agregar a lo que jdelStrother ha mencionado sobre las especificaciones de w3 y ARTstudio sobre la representación del navegador.
Se recomienda porque cuando tiene el CSS declarado antes de que <body>comience, sus estilos ya se han cargado. Entonces, muy rápidamente, los usuarios ven que algo aparece en su pantalla (por ejemplo, colores de fondo). De lo contrario, los usuarios ven la pantalla en blanco durante algún tiempo antes de que el CSS llegue al usuario.
Además, si deja los estilos en algún lugar del <body>, el navegador debe volver a representar la página (nueva y antigua al cargar) cuando los estilos declarados se han analizado.
linky styleno debe aparecer en el cuerpo a menos que tengan un alcance (estilo) o tengan el atributo itemprop(enlace) declarado.
stylees un elemento de flujo en html5 y html4.1 (incluso si no tiene un alcance) y se puede poner en el cuerpo.
scopedatributo ha quedado obsoleto.
Las versiones más recientes de la especificación HTML ahora permiten la <style>etiqueta dentro de los elementos del cuerpo. https://www.w3.org/TR/html5/dom.html#flow-content
También el scopedatributo que solía ser un requisito previo para tener una styleetiqueta en el bodyahora está obsoleto.
Esto significa que puede usar la styleetiqueta en cualquier lugar que desee, las únicas implicaciones son la disminución del rendimiento de la página debido a posibles reflujos / repintados una vez que el navegador alcanza estilos más abajo en el árbol de la página.
Respuesta obsoleta:
La <style>etiqueta no está permitida <body>según las especificaciones de w3. (Por supuesto, puede aplicar estilos en línea a través de <div style="color:red">si es necesario, pero generalmente se considera una separación deficiente de estilo y contenido)
<style>es un elemento de flujo en html 5 y 4.1 y se puede poner en el cuerpo (como todos los demás elementos de flujo).
Poner CSS en el cuerpo significa que se carga más tarde. Es una técnica que algunos utilizan para permitir que el navegador comience a dibujar la interfaz más rápido (es decir, elimina un paso de bloqueo). Esto es importante para la experiencia del usuario en SmartPhones.
Hago mi mejor esfuerzo para mantener un pequeño css en el <head>y muevo el resto en la parte inferior. Por ejemplo, si una página usa JQuery UI CSS, siempre la muevo al final de la página <body>, justo antes de los enlaces a JQuery javascript. Al menos, todo el elemento que no sea Jquery ya se puede dibujar.
Head está diseñado para (Citando el W3C):
"información sobre el documento actual, como su título, palabras clave que pueden ser útiles para los motores de búsqueda y otros datos que no se consideran contenido del documento "
Consulte la estructura global de un documento HTML . Como CSS no es contenido de documentos, debería estar en la cabeza.
Además, cualquier otro desarrollador web esperará verlo allí, ¡así que no confunda las cosas colocándolo en el cuerpo, incluso si funciona!
El único CSS que debe poner en el cuerpo es CSS en línea , aunque generalmente evito los estilos en línea.
Los estándares ( HTML 4.01: el elemento de estilo ) especifican claramente que la etiqueta de estilo solo se permite dentro de la etiqueta de encabezado. Si coloca etiquetas de estilo en la etiqueta del cuerpo, los navegadores intentarán aprovecharlo de todos modos, si es posible.
Es posible que un navegador ignore una etiqueta de estilo en el cuerpo si especifica un tipo de documento estricto. No sé si algún navegador actual hace esto, pero no contaría con todas las versiones futuras para estar tan relajado sobre dónde colocar el elemento de estilo.
styleetiquetas están permitidas en el cuerpo si tienen un scopedatributo.
Aunque la styleetiqueta no está permitida en el cuerpo, sí lo linkestá, por lo que siempre que haga referencia a una hoja de estilo externa, todos los navegadores deben representar y usar el CSS correctamente cuando se usan en el body.
Fuente: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
Además de las respuestas anteriores, aunque poner un bloque de código de estilo dentro del elemento puede funcionar en los navegadores modernos (aunque eso todavía no funciona), siempre existe el peligro, particularmente con los navegadores más antiguos, de que el navegador muestre el código como texto a menos que la sección de estilo esté incluida dentro de una sección CDATA.
Por supuesto, la otra cosa con ponerlo dentro del elemento, aparte de los estilos en línea, es que, dado que no cumple con las especificaciones W3C HTML / XHTML, es que cualquier página con él dentro del cuerpo fallará en el validador W3C. Siempre es más fácil detectar problemas de visualización inesperados si todo su código es válido, lo que facilita la detección de errores. Un elemento HTML no válido puede afectar negativamente el desgarro de todos y cada uno de los elementos más allá de donde aparece en el código, por lo que puede obtener efectos inesperados al tener elementos en lugares donde no deberían estar, porque cuando un navegador encuentra un elemento no válido, simplemente hace que sea mejor adivinar cómo debe mostrarlo, y diferentes navegadores pueden tomar diferentes decisiones sobre cómo lo representan.
Ya sea que use un doctype de transición o estricto, aún no será válido de acuerdo con las especificaciones (X) HTML.
De hecho, usted anularía el propósito de usar CSS al poner los estilos en el cuerpo. El punto sería separar el contenido de la presentación (y la función). De esta manera, cualquier cambio en el estilo se puede hacer en la hoja de estilo, no en el contenido. Una vez que use el método de estilo en línea, cada página que tenga un estilo en línea debe cambiarse una por una. Tedioso y arriesgado, ya que podrías perderte una página o tres, o diez.
Usando una hoja de estilo, solo necesita cambiar la hoja de estilo; Los cambios se propagan automáticamente a cada página HTML que se vincula a la hoja de estilo.
El punto de neonble es también otra gran razón; Si estropea el HTML agregando CSS en línea, la representación se convierte en un problema. HTML no arroja excepciones a su código. En cambio, se apaga y lo hace de la mejor manera posible, y sigue adelante.
Cumplir con los estándares web mediante el uso de una hoja de estilo lo convierte en un mejor sitio web. Y cuando necesita ayuda porque las cosas en su página no son exactamente como las quiere, colocar su CSS en la cabeza en lugar del cuerpo hace que la solución de problemas sea mucho mejor para usted y para cualquier persona a la que le pida ayuda.
Dos respuestas en conflicto:
Desde la página MDN en la etiqueta de enlace:
Un
<link>elemento puede aparecer en el elemento<head>o<body>, dependiendo de si tiene un tipo de enlace que sea body-ok. Por ejemplo, el tipo de enlace de la hoja de estilo es body-ok y, por lo tanto, a<link rel="stylesheet">está permitido en el cuerpo. Sin embargo, esta no es la mejor práctica; tiene más sentido separar sus<link>elementos del contenido de su cuerpo, poniéndolos en su cabeza.
De CSS The Definitive Guide (4th Edition / 2017) página 10
Para cargar con éxito una hoja de estilo externa, el enlace debe colocarse dentro del elemento principal pero no puede colocarse en ningún otro elemento.
¿Qué diferencia hará?
Pros: a veces es más fácil aplicar ciertos atributos en ciertos lugares, especialmente si el código se genera sobre la marcha (como construir a través de php y cada una de una lista de tamaño dinámico necesita su propia clase ... como por ejemplo, los tiempos de los elementos para las transformaciones).
Contras: un poco más lento, puede que no funcione algún día en un futuro lejano.
Mi opinión general al respecto: no lo haga, no tiene que hacerlo, pero si tiene que hacerlo, no pierda el sueño.
Ponerlo <style>en el cuerpo funciona bien con todos los navegadores modernos.
Había estado usando esto en eBay.
Si funciona, no lo patees.